Jquery conflicts

Permalink
Hi,
I'm really getting mad trying to sort out jquery conflicts !! If I read the documentation and forum threads I understand that there should be no need to include jquery library as it is already included in the header_required or footer ...
But I'm trying to set up some tabs and I'm just getting mad trying to make them work.
They will only work if I include another jquery.js file .. and still doing this, I will only get the tabs working on the front end but not in the admin ....

I also fin it hard to know where to put the footer_required , as in most cases if I put it in the footer just before the </body> , the toolbar will not work .... or I will not be able to edit the areas ...

Anyway, all that to say that whichever combination I try I fail and get into a different problem ... Is there something I am missing, any solution or tutorial about how to handle those javascript issues ...

Do I need to include a javascript manually to make those tabs work ?

Any guidance is welcome !
Many thanks

 
JohntheFish replied on at Permalink Reply
JohntheFish
Tabs are a jQuery ui thing, but the standard C5 version of ui does not include tabs because the core uses bootstrap tabs. Yet including your own version of ui can lead to a conflict.

Whatever happens, not all themes automatically include jQuery unless the dashboard toolbar is needed, so its always worth doing an addHeaderItem for jquery and ui.

For tabs, if it is in the dashboard or an edit form I code them directly, the code is minimal.
http://www.concrete5.org/documentation/how-tos/developers/use-tabs-...

You can also use the bootstrap tabs widget.

On the front end, you have to think more about which tabs mechanism to use and what to include, perhaps just the tabs module of ui. A lot depends on the styling of the tabs.

In magic tabs
http://www.concrete5.org/marketplace/addons/magic-tabs/...
the actual tabbing code is my own jQuery, but the styling can be taken from bootstrap (c5), jQuery.ui or custom css, depending on the template.

It looks like you are including the footer in the right place. So the chances are that it will be something that the footer is arguing with rather than the placement of it.

You may also find
http://www.concrete5.org/documentation/how-tos/developers/protect-a...
could help
ptityop replied on at Permalink Reply
Hi, Thanks ... but this does not seem to be working in IE , is that a known issue ?
JohntheFish replied on at Permalink Reply
JohntheFish
Assuming you are talking about tabs...

With IE8+, it should work without mods. In <=IE7, IE prepends the url to the #id, so if you want it to work in IE7, you need to add some more code to strip out anything in front of the # when reading the href.

You should be able to google some standard code to do that, there are several different ways.
ptityop replied on at Permalink Reply
humm ... I'm actually using IE9 and it is not working ... Only that you did not mention anything about this version ... should it be working ?
JohntheFish replied on at Permalink Reply
JohntheFish
IE9 behaves normally on that tab code. Does it work with other browsers, or is it not working at all?
ptityop replied on at Permalink Reply
Only IE from what I see
JohntheFish replied on at Permalink Reply
JohntheFish
Could it be set in the old IE compatibility mode?

If not, then I guess you will need to start debugging and tracing, or adding alert() or console.log() every other line to see what is behaving differently.

A mistake I always kick myself about is giving elements an id="#id_name" instead of just id="id_name".