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.