Confilicting Javascript

JavaScript
1

Greetings! I have here script that has auto suggest and a basic post ajax request, but I’m having trouble in implementing these codes.


 <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

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

Thank you for your response, I used external js.

This thing doesn’t work.


 <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?


<script type = 'text/javascript'>>
 jQuery.noConflict();
<script>

Sorry for being dumb, I’m new in javascript.

4

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

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


 <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


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

The following post in our tips and tricks section takes you through the details of what needs to be done.

7

Seems like very simple, but why am I so morbid.

I used the code below still no work.


<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

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.

9

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.


   <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

Which part of it doesn’t work?

11

Which part of it doesn’t work?

my jquery2.js.

12

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/libs/jquery/1.2.6/jquery.min.js
or for a more recent version of jQuery, https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

13

But my jquery works fine when I remove prototype.js…

14

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();