suggestion Box Jquery $ conflict: I don't want to use $.noConflict();
aryanjaiswal Jan 24, 2013 10:21 AMHi,
My app is using JSF, Jquery heavily. I am using rich:a4j only in the app. this is the first time I am using the suggestion Box and getting $ conflict between Jquery and richfaces 's PrototypeScript.js and related js files.
I read lot of threads to avoid $ conflict by using $.noConflict(); and using jquery keyword instead of $. But in my app we are using this $ for Jquery in lot many files and have project related modification in some of the jQuery related js files.
so the bottom line is I cann't use jQuery instead of $ in my js files which can lead to lot of code change.
1) what I had done till this time to solve the issue partially I extracted following js file from richfaces impl.jar and copied to my war so i can modify those
<script type="text/javascript" src="scripts/richsuggestionbox/suggestionbox.js"></script>
<script type="text/javascript" src="scripts/richsuggestionbox/PrototypeScript.js"></script>
<script type="text/javascript" src="scripts/richsuggestionbox/AJAX.js"/>
for above 3 files I replaced $( with $$$( in to avoid the $ conflct of prototype.
<script type="text/javascript" src="scripts/richsuggestionbox/effects.js"/>
now the issue is , I have done the same thing with effects.js but some how instead of using the extracted effects.js the richfaces suggestion box is using the js of the lib.
following is the html source code of my jsp when i do the view source
<script src="/TestApp/a4j/g/3_3_1.GAorg/ajax4jsf/javascript/scripts/form.js.htm" type="text/javascript"></script>
<script src="/TestApp/a4j/g/3_3_1.GAorg.ajax4jsf.javascript.AjaxScript.htm" type="text/javascript"></script>
<script src="/TestApp/a4j/g/3_3_1.GAorg.ajax4jsf.javascript.PrototypeScript.htm" type="text/javascript"></script>
<script src="/TestApp/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/jquery/jquery.js.htm" type="text/javascript"></script>
<script src="/TestApp/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/available.js.htm" type="text/javascript"></script>
<script src="/TestApp/a4j/g/3_3_1.GAorg.ajax4jsf.javascript.SmartPositionScript.htm" type="text/javascript"></script>
<script src="/TestApp/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/browser_info.js.htm" type="text/javascript"></script>
<script src="/TestApp/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/utils.js.htm" type="text/javascript"></script>
<script src="/TestApp/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/scriptaculous/effects.js.htm" type="text/javascript"></script>
<script src="/TestApp/a4j/g/3_3_1.GAscripts/suggestionbox.js.htm" type="text/javascript"></script>
<script type="text/javascript" src="scripts/richsuggestionbox/suggestionbox.js"></script>
<script type="text/javascript" src="scripts/richsuggestionbox/PrototypeScript.js"></script>
<script type="text/javascript" src="scripts/richsuggestionbox/AJAX.js"/>
<script type="text/javascript" src="scripts/richsuggestionbox/effects.js.htm"></script>
When My jsp loads there is no js error but when i type in the suggestion box the control goes to the server side and at the time of rendering the suggestion drop down I get js error.
Error: element.getStyle is not a function
Source File: http://localhost:8080/TestApp/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/scriptaculous/effects.js.htm
Line: 29
My problem is I want to use the $ for jQuery and want to override the $ used by richfaces js files to $$$ or something else.
I aprreciate user help. I am strugling with this issue for 2 days.
Thanks
Novin.
============
Here is the solution to the issue following are final changes to make it work and I used JQuery instead of $ in my javascript code
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript" src="scripts/richsuggestionbox/suggestionbox.js"></script>
<a4j:loadScript src="resource://org.ajax4jsf.javascript.AjaxScript" />
<a4j:loadScript src="resource://org.ajax4jsf.javascript.PrototypeScript" />
Thanks
novin