Develop Reference

Using noconflict js in Magento

One bootstrap tab navigation panel is not working properly on my magento site because of the jQuery.noConflict() call that I have used in my custom JS file.
When I comment the jQuery.noConflict() line then my tab navigation works properly. However, I cannot comment that code because when I comment that line the main navigation doesn't work.
How can I make my tab navigation work without removing the jQuery.noConflict()? Thanks.

This is because Magento still uses prototype.js, change jQuery to $j
var $j = jQuery.noConflict();
For more details check this out

Using noConflict() should be fine, however I come across issues like this a lot with Magento.
I'm assuming you're definitely loading jQuery prior to your own jQuery script, etc.
I tend to find the most watertight way of ensuring your jQuery scripts don't cause issues is to wrap your scripts in an anoymous function:
(function($) {
// Your jQuery script
})(jQuery);
As you can see, we're passing the jQuery object as an argument to our function. This means we can use $ locally within the function without it conflicting with other scripts / frameworks / libraries, etc...

Bootstrap DateTimePicker and jQuery problems

I'm trying to use Bootstrap DateTimePicker on a Bootstrap-based HTML template. The problem is that there's a JS file called foundation.js which is included in the template and that file is killing DateTimePicker. When I don't include this file, DateTimePicker works, but lots of other functions of template (like tabs, image gallery etc.) stop working. When this file is included, DateTimePicker doesn't work. That foundation.js file is too big so I put it here: http://pastebin.com/fQhtpV2P
What I noticed is that there is obviously a whole jQuery v1.8.1 code included in that file. So I guess that this is the reason why DateTimePicker doesn't work since I'm including jQuery v2.1.1 library so these two are in conflict. I tried:
Remove the jQuery v1.8.1 code from foundation.js -> the same effect like removing the whole file; the picker works but all other functions from template doesn't work
Remove jQuery v2.1.1 library include -> DateTimePicker doesn't work
Remove the jQuery v1.8.1 code from foundation.js and replace it with jQuery v2.1.1 code -> nothing works
I also tried all combinations of including order, but no success. So, I can't remove that foundation.js and the picker won't work while that file is there. What should I do?
PS. my code is in Codeigniter so it's pretty complicated (in lots of files) but I can give you parts of the code if needed.

Try to use an older version of your picker, u can take a look at this link
http://plugins.jquery.com/datetimepicker/
The picker simply doesn't show with jQuery 1.8 or give u an error??
Regards

Uncaught TypeError: $(...).datetimepicker is not a function
This kind of error is communly caused because you included the library that is depending on jquery before jquery itself.
Check your including order to be sure the dateTimePicker js file is included after JQuery

Run jQuery and MooTools in jsfiddle simultaneously

I have some code that uses both jQuery and MooTools. Running it in Expressions Web, I have included the script tags for jQuery and MooTools and started the jQuery part like this:
jQuery.noConflict();
jQuery( document ).ready(function($) {
The MooTools followed after the jQuery closed. How can I achieve the same in jsfiddle, so that both jQuery and MooTools work simultaneously in the javascript section?
Here is the jsfiddle I am trying to run: http://jsfiddle.net/HamishT/fW8Y7/

You have 2 ways to add scripts is jsFiddle. In the "Frameworks & Extensions" and in "External Resources". You can get the link to jQuery or MooTools at: https://developers.google.com/speed/libraries/devguide
So from there you can do a fiddle like: http://jsfiddle.net/fW8Y7/2/
MooTools detects if the $ is already in use, in case you load MooTools after jQuery. So in that case you could use the $ for jQuery and document.id in MooTools wich is alias for $.
Anyway, unsing .noConflict() as you did is to me the best way.

Use the "External Resources" panel to add additional files. So add either jquery or mootools in the Frameworks panel and then add a url (e.g. cdn url) to the other in the external resources

WordPress Plugins, jquery noconflict issue

I am newbie to jQuery and javascript !!
To avoid any conflict in WordPress Plugin, I've included the following line in my JS file that is outside my page:
jQuery(document).ready(function() {
var yourFunc = function() {
//code
};
yourFunc();
});
Now when I click on plugin settings (which uses this javascript), opens the link in new tab and in that, an "more option" (toggle function) is not working. That might be due to WordPress or other, I dont know.
So Experts, Please help me, I want to open the links in same tab. I tried a lot but all in vain.

Are you using the $ in your JS? If so, while using jQuery in noConflict mode, you need to pass the $ in as a parameter to use as an alias for jQuery objects.
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});

I am building portfolio by using Jquery plugin filterable.pack and also using lightbox2 to open images. what lightbox is not working

I am using file below..
src="js/jquery-1.4.4.min.js">
src="js/filterable.pack.js">
src="js/prototype.js">
src="js/scriptaculous.js?load=effects,builder">
src="js/lightbox.js">
please help.. or tell is there any conflict b/w jquery files or something else..

If you use jQuery and Prototype in the same page, it's best to:
include jQuery after Prototype (so it has the $ it can restore)
call jQuery.noConflict() on jQuery, then use jQuery or whatever variable you set instead of $
Once you change the script order, it would look like this:
var $j = jQuery.noConflict();
$j(".selector").myPlugin();