0 Replies Latest reply on Jan 24, 2013 10:21 AM by aryanjaiswal

    suggestion Box Jquery $ conflict: I don't want to use $.noConflict();

    aryanjaiswal

      Hi,

       

      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