Jquery Conflict Which Gives Error

Working on an project which has variety of functionality in it such as, Google translator Image Slider [galleriffic used] Popup window [Shadow box used] JavaScript horizontal men

Solution 1:

I read your question and search on site of every plugins that you use.

• Any List Scroller
• Shadowbox.js
• Prototype
• Galleriffic

If something is missing plugin, publish it please.

I had the similar problem and I not used the $.noConflict(true);

If you project is the server that when this is open for take the file html.

I suggest for you that you insert the calling for external div in one file html.

And in every file html you can write the script with

 $(document).ready(function () {
   .............
    });

You can't calling the file external in every file html because this create a normal conflict.

AND..

I suggest this site for look the last libraries... Google-libraries-last

AND..

I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js but still not able toclear the conflict Here is the sequence used by me

This is better.

AND:::

For the error TypeError: $ is not a function depends how this function is implemented or write. Possible error is ; or {, } , ( , ) This happens because another javascript library has been loaded and has overwritten the object $() shortcut for jQuery. So when we include other javascript libraries besides jquery, we are exposing the jquery library to conflicts. Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. One solution if we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict() like:

<scripttype="text/javascript"src="mootools.js"></script><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ follow here.
  });
  // Code that uses other library's $ follow here.</script>

Another solution is to reassign jquery object $() back to jquery library, wrapping up our call inside a function that reassigns $() object. Thus we make sure our code isn’t messed with Prototype, Scriptaculous, etc.

( function($) {
 // Your jquery code
} ) ( jQuery );

Suppose:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"type="text/javascript"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"type="text/javascript"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"type="text/javascript"></script><scripttype="text/javascript">
( function($) {
    // Assigning $ again to jquery
    $(document).ready( function() { alert("Now you can use to use '$' in your jquery code");  } );
} ) ( jQuery );

//this will fail
$(document).ready( function() { alert('This fails because $ has been modified outside jquery'); } );
</script>

This approach is a self-calling anonymous function style to avoid conflicts with jQuery. If you don't use it then you would have to type jQuery() instead of its object $(). Example:

$(document) //won't workjquery(document) //will work

Example on JSFIDDLE.NET

Finally

Typeerrorfornull

Look on jquery-documentready-controlid-is-null

Solution 2:

try to use .noConflict() in jQuery

<scriptsrc="....../jquery-1.8.3.min.js"></script><scripttype="text/javascript">var jQuery_1_8_3 = $.noConflict(true);
</script><scripttype="text/javascript"src="...../jquery-1.4.2.js"></script><scripttype="text/javascript">var jQuery_1_4_2= $.noConflict(true);
</script>

Solution 3:

I went with this flow and the error was solved.Didn't need any .noConflict() and on!!!

1)<scripttype="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2)<scripttype="text/javascript"src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3)<scripttype="text/javascript"src="/scripts/jQuery/jquery.cookie.js"></script>
4)<scripttype="text/javascript"src="/scripts/jquery.bt.js"></script>
5)<scripttype="text/javascript"src="/fancybox/jquery.fancybox.pack.js"></script>
6)<scripttype="text/javascript"src="/scripts/common.js"></script>
7)<scriptsrc="/scripts/jQuery/insert_active_flash.js"type="text/javascript"></script>
8)<scripttype="text/javascript"src="/SliderBox/js/jquery.galleriffic.js"></script>
9)<scripttype="text/javascript"src="/SliderBox/js/jquery.opacityrollover.js"></script>
10)<scripttype="text/javascript"src="/SliderBox/shadowbox/shadowbox.js"></script>
11)<scripttype="text/javascript"src="/scripts/jquery.als-1.1.min.js"></script>
12)<scripttype="text/javascript"src="/scripts/settingsEN.js"></script>

The minified version javascript where having conflict with prototype.js. I just removed the prototype.js file and arranged all reference file in sequence [Sequence matters a lot]

Now the error is removed I was still wondering what was the actual issue with prototype.js ???