How do I remove jQuery's usage of $ from the script files as well?

Question

I'm trying to use jQuery's controls in Software AG webMethods development IDE .. Now I'm importing jQuery's script from the following URL:

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

When I run the page deployed by webMethods IDE, I get the following errors in multiple browsers (between the two blue arrows):

The errors in the middle are the normal errors (i.e. the errors with the blue arrows next to them) which I'm getting, because something else in the page is also using the '$', when jQuery also uses it, it results in this other '$' user in getting confused, since this other '$' user has control for the '$' sign ..

To confirm this, here's what I did:

I wrote the following javascript code (don't worry about the internal usage of CAF.model .. its .id function returns the client-side ID of the control that jQuery needs for its processing)

alert($(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id).val());

... and it resulted in another one of those 'getAttribute' errors shown in the picture above ..

I then tried:

jQuery.noConflict();
alert(jQuery(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id).val());

And there was no error .. !

Also, if I use the code:

jQuery.noConflict();
alert($(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id).val());

it results in the bottom blue arrow error: Because the other entity using the '$' sign cannot figure out what the function 'val' is ...

The above confirms to me that the errors are because jQuery's script is probably using '$' sign for its own use there ..

Now to try and resolve this, I tried adding another script block before the script block calling jQuery's own script file, and put in this code:

jQuery.noConflict();

And this resulted in the first blue arrow error: .. 'jQuery' is not defined this early in the document, which makes sense ..

So basically, I need to somehow tell the main jQuery script file to also not use the '$' sign .. How do I do this ?

Answer 1

jQuery.noConflict(); needs to run in a script block immediately after jQuery is loaded.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>

The above aliases jQuery to jq instead of $.

Plugins to jQuery pass in the jQuery object and internally alias it to $, but the scope isn't global, so there's no need to change it in plugins.

Answer 2

You should not worry about the internals of jQuery, they work in any case.

The last error message means that you are trying to call a jQuery method (.val()) on a DOM element, not a jQuery object.

You already know that

$(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id)

results in an error so why should calling jQuery.noConflict() change this?

jQuery.noConflict() simply "releases" $ and assigns back the value it previously had.

You either have to use jQuery throughout your code or assign it to a different variable, e.g.:

var $j = jQuery.noConflict();
$j(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id);

The ready event handler also receives a reference to jQuery as first parameter, so you (and should) put all your jQuery code in there:

jQuery(function($) { 
    // $ will refer to jQuery
});

But that won't let you access the value to whatever $ refers outside of that function.

Answer 3

A nice way to do this is to use a self-executing function, like this:

(function ($) {

  // Your jQuery code here - just use $ as normal!
  $("#coolselector").cooljQueryPlugin();

})(jQuery);

Put that in your code just before the closing body tag, to speed up page load. Although with CAF and Prototype, you'll never notice the speedup :)