SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Confilicting Javascript

    Greetings! I have here script that has auto suggest and a basic post ajax request, but I'm having trouble in implementing these codes.
    Code:
     <HTML>
     <HEAD>
        <link href="../css/style2.css" rel="stylesheet" type="text/css">
      <!--[if gte IE 6]>
        <link rel="stylesheet" type="text/css" href="i_hate_IE.css" />
      <![endif]-->
       <script type="text/javascript" src="../js/prototype.js"></script>
       <SCRIPT LANGUAGE="JavaScript" src="../js/jquery2.js"></SCRIPT>
       <SCRIPT LANGUAGE="JavaScript" src="../js/script.js"></SCRIPT>
    
     <script>
    			function sendRequest() {
    				new Ajax.Request("test.php", 
    					{ 
    					method: 'post', 
    					postBody: 'keyword='+ $F('keyword'),
    					onComplete: showResponse 
    					});
    				}
    
    			function showResponse(req){
    				$('show').innerHTML= req.responseText;
    			}
    		</script>
     </HEAD>
     <BODY>
    <form id="test" onsubmit="return false;">
       <div class="main">
         	 <div id="holder"> 
    		 Title : <input type="text" id="keyword" tabindex="0" name = 'keyword'><input type="submit" value="submit" onClick="sendRequest()">
    		</div>
    		 <div id="ajax_response"></div>
       </div>
       </form>
    		
    		<div id="show"></div>
    		<br/><br/>
     </BODY>
    </HTML>
    My problem is when I remove the prototype.js, my autosuggest script is working, when I put it back my ajax post request fail.
    Any help would be appreciated. Thank you.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The problem is both jQuery and the Protoype libraires both make use of the $ variable, to avoid having issues like this jQuery has a built in method called noConflict which allows you to release the use of $ when using jQuery in your page. The only change you need to make apart from adding the noConflict declaration is move the jQuery <script> resource above the Protoype resource or the conflict will continue.

    http://api.jquery.com/jQuery.noConflict/

  3. #3
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your response, I used external js.

    This thing doesn't work.
    Code:
     <SCRIPT LANGUAGE="JavaScript" src="../js/jquery2.js"></SCRIPT>
     <script type="text/javascript" src="../js/prototype.js"></script>
     <SCRIPT LANGUAGE="JavaScript" src="../js/script.js"></SCRIPT>
     <script>
       jQuery.noConflict();
    
    			function sendRequest() {
    				new Ajax.Request("Book_copy2.php", 
    					{ 
    					method: 'post', 
    					postBody: 'keyword='+ $F('keyword'),
    					onComplete: showResponse 
    					});
    				}
    
    			function showResponse(req){
    				$('show').innerHTML= req.responseText;
    			}
    		</script>
    How about this?
    Code:
    <script type = 'text/javascript'>>
     jQuery.noConflict();
    <script>
    Sorry for being dumb, I'm new in javascript.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The jQuery.noConflict() declaration needs to go directly after your jQuery <script> element and before the Prototype element other it will still cause an error.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The jQuery.noConflict() declaration needs to go directly after your jQuery <script> element and before the Prototype element other it will still cause an error.
    Here is my script
    Code:
     <SCRIPT LANGUAGE="JavaScript" src="../js/jquery2.js"></SCRIPT>
     <SCRIPT LANGUAGE="JavaScript" src="../js/script.js"></SCRIPT>
     <script type="text/javascript" src="../js/prototype.js"></script>
    and my jquery2.js is below

    Code:
    jQuery.noConflict() 
    (function(){
    /*
     * jQuery 1.2.6 - New Wave Javascript
     *
     * Copyright (c) 2008 John Resig (jquery.com)
     * Dual licensed under the MIT (MIT-LICENSE.txt)
     * and GPL (GPL-LICENSE.txt) licenses.
     *
     * $Date: 2008-05-24 14:22:17 -0400 (Sat, 24 May 2008) $
     * $Rev: 5685 $
     */
    
    // Map over jQuery in case of overwrite
    var _jQuery = window.jQuery,
    // Map over the $ in case of overwrite
    	_$ = window.$;
    
    var jQuery = window.jQuery = window.$ = function( selector, context ) {
    	// The jQuery object is actually just the init constructor 'enhanced'
    	return new jQuery.fn.init( selector, context );
    };
    
    // A simple way to check for HTML strings or ID strings
    // (both of which we optimize for)
    var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/,
    
    // Is it a simple selector
    	isSimple = /^.[^:#\[\.]*$/,
    
    // Will speed up references to undefined, and allows munging its name.
    	undefined;
    Still no work.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The following post in our tips and tricks section takes you through the details of what needs to be done.
    http://www.sitepoint.com/forums/show...=1#post4802032
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Seems like very simple, but why am I so morbid.

    I used the code below still no work.

    Code:
    <SCRIPT LANGUAGE="JavaScript" src="../js/jquery2.js"></SCRIPT>
      <script>jQuery.noConflict();</script>
     <SCRIPT LANGUAGE="JavaScript" src="../js/script.js"></SCRIPT>
     <script type="text/javascript" src="../js/prototype.js"></script>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by claro View Post
    Seems like very simple, but why am I so morbid.
    jQuery must be loaded before he noConflict command can be issued.

    From what I'm seeing up there, you are trying to run noConflict before the jQuery library., which just won't work.
    The noConflict command has to be issued only after the jQuery library has been loaded.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The noConflict command has to be issued only after the jQuery library has been loaded.
    I did juggling in positioning these script. Still no work.

    Code:
       <SCRIPT LANGUAGE="JavaScript" src="../js/jquery2.js"></SCRIPT>
       <SCRIPT LANGUAGE="JavaScript" src="../js/script.js"></SCRIPT>
       <script>jQuery.noConflict();</script>
       <script type="text/javascript" src="../js/prototype.js"></script>

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by claro View Post
    I did juggling in positioning these script. Still no work.
    Which part of it doesn't work?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Which part of it doesn't work?
    my jquery2.js.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by claro View Post
    my jquery2.js.
    I suggest then that you download jQuery from a source that is known to work.
    Google provides a good way to do that, such as https://ajax.googleapis.com/ajax/lib.../jquery.min.js
    or for a more recent version of jQuery, https://ajax.googleapis.com/ajax/lib.../jquery.min.js
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    But my jquery works fine when I remove prototype.js..

  14. #14
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Shame on me, I forgot that I can pass through ajax without using any library. I just remove the prototype.js and proceed to a simple xmlhttprequest();


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •