jQuery - noConflict() issue

Question

I'm having an issue maybe with the scope of how i'm trying to do this.

Either the slider will work. or the images will replace text. but not both.

I HAVE to have this "scrollbox.min.js" file linked in order for the slider to work. hence me using noConflict.

I want the below snippet to use the scrollbox.min.js file:

<script>
  jQuery().noConflict();
  jQuery(function($) {
        $(document).ready(function() {
          jQuery('#scrool').scrollbox({
            direction: 'h',
            switchItems: 3,
            distance: 540,
            autoPlay: false
          });
          jQuery('#scrool-backward').click(function() {
            jQuery('#scrool').trigger('backward');
          });
          jQuery('#scrool-forward').click(function() {
            jQuery('#scrool').trigger('forward');
          });
        })
      }
</script>

and I want the rest to use the site's jQuery.

Something I've noticed:

Depending on where I place the jQuery().noConflict(); it allows for different sections of code to execute. I need both to work though:

Please see below for the full part of the script:

<script src="http://www.qwerty.com/assets/xjs/jquery.scrollbox.min.js"></script>
<script>
  jQuery().noConflict();
  jQuery(function($) {
    $(document).ready(function() {
      jQuery('#scrool').scrollbox({
        direction: 'h',
        switchItems: 3,
        distance: 540,
        autoPlay: false
      });
      jQuery('#scrool-backward').click(function() {
        jQuery('#scrool').trigger('backward');
      });
      jQuery('#scrool-forward').click(function() {
        jQuery('#scrool').trigger('forward');
      });
    });
  });

</script>

<script>
  jQuery(function($) {
    $(document).ready(function() {

      jQuery('.starIMGrating').each(function(i, obj) {

        var myString = jQuery(this).html()

        if (myString > "5") {
          var myString = "5"
        } else {}

        /* alert(myString); */
        myRegexp3 = /\d/;
        var match = myRegexp3.exec(myString);

        var myRegexp2 = /\d\.(\d)/;
        var matchstring = myString;
        var m;

        if (myString.indexOf(".") == -1) {
          var match2 = 0;
        } else if (myString.indexOf(".") == 1) {
          var m = myRegexp2.exec(matchstring)
          var match2 = m[1];
        }

        starIMG = "<img src='http://qwerty/" + match + "_" + match2 + "/5/rating.gif' alt='' style='width:70px !important;' />";

        /*alert(match2); */
        jQuery(this).html(starIMG);
        /* alert(starIMG); */
      });

    });
  });

</script>

Answer 1

Calling jQuery().noConflict(); will throw an error:

Uncaught TypeError: jQuery(...).noConflict is not a function

Which, when not inside a try { ... } block, will cause the rest of that script not to execute at all.

noConflict is part of the main jQuery namespace object but not individual jQuery objects, so you should remove the parenthesis from jQuery():

jQuery.noConflict();

See this for more info: http://learn.jquery.com/using-jquery-core/dollar-object-vs-function/

Answer 2

As others have mentioned, you need to use jQuery.noConflict(), but whenever debugging something like this you want to minimize all of the moving parts. What I'm going to describe below is not likely causing any problems for you, but it highlights a very glaring misuse of jQuery and you should try and follow along. You have the following code:

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

This is equivalent to writing the following:

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

Do you see the duplicity? Let me explain:

1. The following two lines are identical:

   $(function() { /* execute code */ });
   $(document).ready(function () { /* execute code */ });
   

   So when you put one of those inside the other like you've done, you are essentially saying "wait until the document is ready, and then wait until the document is ready again, and then execute code". This is redundant and unnecessary.

2. Whenever you use either of the above "document ready" statements, you can give jQuery a different name for use within the callback function. For example, we could rename jQuery to fOobar if we want:

   $(function(fOobar) {
       fOobar('#scroll').trigger('forward');
   });
   

3. The above technique is particularly useful when using noConflict(). Nobody likes typing jQuery because the $ dollar sign is so much easier. But noConflict() means you can't use the dollar sign. To fix this, we can rename jQuery back to dollar sign without affecting other code on the page:

   jQuery.noConflict();
   jQuery(function ($) {
     // you can safely use the dollar sign variable inside this function
     // instead of the cumbersome `jQuery` variable.
   });
   

4. Finally, every time you pass a selector to jQuery, it has to a lot of work to find that element in the page. In order to keep jQuery from getting too tired we can save (or cache) the work jQuery has done and reuse it. Here is what your code would look like if you cached the #scroll element:

   jQuery.noConflict();
   jQuery(function ($) {
     // get the #scroll element once and reuse it
     var $scroller = $('#scroll');
     $scroller.scrollbox({
       direction: 'h',
       switchItems: 3,
       distance: 540,
       autoPlay: false
     });
     $('#scrool-backward').click(function() {
       $scroller.trigger('backward');
     });
     $('#scrool-forward').click(function() {
       $scroller.trigger('forward');
     });
   });