How can I remove jQuery's use of $ from script files?
I am trying to use jQuery controls in Software AG webMethods software development environment. Now I am importing a jQuery script from the following url:
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
When I run a page deployed with the webMethods IDE, I get the following errors in multiple browsers (between the two blue arrows):
Errors in the middle are the usual errors (ie errors with blue arrows next to them) I get because something else on the page also uses "$", when jQuery also uses it, this results in that this other user "$" is getting confused because this other user "$" has control over the "$" sign.
To confirm this, here's what I did:
I wrote the following javascript code (don't worry about internal use CAF.model
.. its function .id
returns the client side id of the control that jQuery needs to handle it)
alert($(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id).val());
... and this led to another of the "getAttribute" errors shown in the picture above.
Then I tried:
jQuery.noConflict();
alert(jQuery(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id).val());
And there was no mistake ..!
Also, if I use the code:
jQuery.noConflict();
alert($(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id).val());
this results in a bottom blue arrow error: since another object using the $$ sign cannot determine what the function val is ...
The above confirms to me that the errors are due to the fact that the jQuery script is probably using the "$" sign for its own use there.
Now, to try and resolve this, I tried adding another script block before the script block calling the native jQuery script file and pasting this code:
jQuery.noConflict();
And that led to the first blue arrow error: "jQuery" is not defined at the beginning of the document, which makes sense.
Basically, I need to somehow tell the main jQuery script file to also not use the $ sign. How to do it?
source to share
jQuery.noConflict();
needs to be run in the script block right 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 jQuery aliases are for jq
instead of $
.
Plugins for jQuery go through a jQuery object and internally alias it $
, but the scope is not global, so there is no need to change it in the plugins.
source to share
You don't have to worry about jQuery's internals, they work anyway.
The last error message means that you are trying to call the jQuery ( .val()
) method on a DOM element, not a jQuery object.
You already know that
$(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id)
results in an error, so why call jQuery.noConflict()
change this?
jQuery.noConflict()
simply "frees" $
and assigns back the previously stored value.
You either need to use it jQuery
throughout your code, or assign it to another variable, for example:
var $j = jQuery.noConflict();
$j(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id);
The event handler ready
also receives a jQuery reference as the first parameter, so you (and should) put all your jQuery code:
jQuery(function($) {
// $ will refer to jQuery
});
But this will prevent you from accessing the value no matter what is $
referenced outside of that function.
source to share
A good way to do this is to use a self-executing function, for example:
(function ($) {
// Your jQuery code here - just use $ as normal!
$("#coolselector").cooljQueryPlugin();
})(jQuery);
Place this in your code just before the closing body tag to speed up page loading. Although with CAF and Prototype you will never notice the speedup :)
source to share