13 Replies - 1783 Views - Last Post: 02 April 2011 - 01:19 PM

#1 newbieHQ  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 76
  • Joined: 20-January 11

jquery conflict/crash

Posted 01 April 2011 - 06:45 AM

hi everyone.. currently i am developing a website now ...

i am using jquery and css to design the page...but when i include 2 jquery library in one php page like below.. somehow there is only 1 jquery libary is working and the other jquery library is not working anymore.. one of them is for lightbox and the other is for validation form jquery...

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>
<link rel="stylesheet" href="css/sell.css" type="text/css" />

	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
<script type="text/javascript" src="js1/jquery.js"></script>
<script type="text/javascript" src="js1/sell.js"></script>

</head>




above is my code ..can anyone help me how to solve this problem ?

thank you !!!!

This post has been edited by newbieHQ: 01 April 2011 - 06:46 AM


Is This A Good Question/Topic? 0
  • +

Replies To: jquery conflict/crash

#2 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: jquery conflict/crash

Posted 01 April 2011 - 08:46 AM

Hi,

This wouldn't be a PHP and is more of a Javascript one. It's possible the two plug-ins you are using are conflicting in some way but unlikely. If you showed the code you are using I may be able to give a better answer.


Just to clairify the problem only happens when you link to both plug-ins? If you remove plug-in A then plugin B works and vice versa?
Was This Post Helpful? 1
  • +
  • -

#3 newbieHQ  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 76
  • Joined: 20-January 11

Re: jquery conflict/crash

Posted 01 April 2011 - 09:01 AM

thank you for ur reply ....

yes it is! when i remove plugin A...the plugin B is working and vise versa as well ...

the below code is used for validation of the input form .. jquery.js is the library and there are bunch of codes there ... and sell.js is the function where used to validate the input form...

<script type="text/javascript" src="js1/jquery.js"></script>
<script type="text/javascript" src="js1/sell.js"></script>



on the other hand, the below code is used for lightbox effect...

<script type="text/javascript" src="js2/prototype.js" ></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder" ></script>
<script type="text/javascript" src="js2/lightbox.js" ></script>



when i remove the above 3 line of jquery script which support for lightbox.. the jquery.js and sell.js can function well... and vise versa ...

for the lightbox effect...i actually download through online and use it .... :)

the below code is sell.js where i used a long time to develop it .. :P
$(document).ready(function(){

	var sell = $("#sell");

	var email = $("#email");
	var emailInfo = $("#emailInfo");
	var des = $("#des");
	var desInfo = $("#desInfo");
	
	email.blur(validateEmail);
	des.blur(validateDes1);
	
	email.keyup(validateEmail);
	des.keyup(validateDes1);
	
		sell.submit(function(){
		if(validateEmail()& validateDes1())
			return true
		else
			return false;
		});
	
	function validateEmail(){
		//testing regular expression
		var a = $("#email").val();
		var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
		//if it's valid email
		if(filter.test(a)){
			email.removeClass("error");
			emailInfo.text("Valid E-mail please, need it to send email to seller!");
			emailInfo.removeClass("error");
			return true;
		}
		//if it's NOT valid
		else{
			email.addClass("error");
			emailInfo.text("Please type a valid e-mail. Thank you");
			emailInfo.addClass("error");
			return false;
		}
	}
	function validateDes1(){
	
		if(des.val().length < 10){
			des.addClass("error");
			desInfo.text("The description must more than 10 letters!");
			desInfo.addClass("error");
			return false;
		}
		//if it's valid
		else{
			des.removeClass("error");
			desInfo.text("Thanks For Your Description");
			desInfo.removeClass("error");
			return true;
		}
	}
});


thanks man !
Was This Post Helpful? 0
  • +
  • -

#4 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6111
  • View blog
  • Posts: 23,671
  • Joined: 23-August 08

Re: jquery conflict/crash

Posted 01 April 2011 - 09:37 AM

Moved to jQuery forum
Was This Post Helpful? 0
  • +
  • -

#5 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1877
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: jquery conflict/crash

Posted 01 April 2011 - 09:43 AM

Is the second script actually using jQuery? Or is it a different library?

You might have to include:
<script type="text/javascript">
		jQuery.noConflict();
		</script>


Immediately after your jQuery include, and then replace any of your jQuery $. references with jQuery.

There are other libraries that make use of the $ syntax and it might be conflicting.
Was This Post Helpful? 2
  • +
  • -

#6 newbieHQ  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 76
  • Joined: 20-January 11

Re: jquery conflict/crash

Posted 01 April 2011 - 10:07 AM

hi charlie seen,

it is different library ...

erm..is it add jQuery.noConflict(); in every script tag there?
somehow like this?
<script type="text/javascript" src="js1/jquery.js">jQuery.noConflict();</script>
<script type="text/javascript" src="js1/sell.js">jQuery.noConflict();</script>


and
<script type="text/javascript" src="js2/prototype.js" >jQuery.noConflict();</script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder" >jQuery.noConflict();</script>
<script type="text/javascript" src="js2/lightbox.js" >jQuery.noConflict();</script>



my sell.js and jQuery.js is include from a folder and the coding constructed are not in the same page somehow like this
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>


erm...is it change every jQuery $. references with jQuery in every $. within
<script type="text/javascript" src="js2/prototype.js" ></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder" ></script>
<script type="text/javascript" src="js2/lightbox.js" ></script>


or other as well? :)...

can you tell me more detail about this?

thanks man! ..

This post has been edited by newbieHQ: 01 April 2011 - 10:29 AM

Was This Post Helpful? 0
  • +
  • -

#7 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: jquery conflict/crash

Posted 01 April 2011 - 10:34 AM

I believe the wise and twice winning was pointing out prototype.js may be a reference to the Javascript Prototype library in which case jQuery and that may be conflicting. You would only have to call the noConflict() method once on each page you want to use them both, I believe. See Here

This post has been edited by Jstall: 01 April 2011 - 10:35 AM

Was This Post Helpful? 1
  • +
  • -

#8 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1877
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: jquery conflict/crash

Posted 01 April 2011 - 10:49 AM

You put the noconflict call in a seperate script tag after you include your jQuery library, but before any of the other librariers:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
		jQuery.noConflict();
		</script>


Then, in any of your jQuery specific javascript, you replace $ with jQuery.

The problem is with the prototype library I believe. It uses $ as well.
Was This Post Helpful? 1
  • +
  • -

#9 newbieHQ  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 76
  • Joined: 20-January 11

Re: jquery conflict/crash

Posted 01 April 2011 - 10:56 AM

thanks man!

i have been go through the website which is for jquery.api since before i posted the problem here... and i have beeen trying hard as well...because i do not see a proper way where should i put noConflict() method and where should i replace any of jQuery $. references with jQuery.... :(

feel blind man ! :ohno:
Was This Post Helpful? 0
  • +
  • -

#10 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1877
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: jquery conflict/crash

Posted 01 April 2011 - 02:09 PM

<script type="text/javascript" src="js1/jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>
<script type="text/javascript" src="js1/sell.js"></script>



Then, in your sell.js file, you'll replace all $ with jQuery
Was This Post Helpful? 1
  • +
  • -

#11 newbieHQ  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 76
  • Joined: 20-January 11

Re: jquery conflict/crash

Posted 01 April 2011 - 06:59 PM

sorry man ..... i thought the admin here has been remove my previous post and asked me to post again into jquery forum there .... i do not know the admin or moderator has a privilege to moved the whole post to other category .... thats why the other post which is exactly the same has been blocked ...

anyway thanks and i will try it later on .... seriously thanks .... and sorry for any inconvenience...

:)
erm..by the way .... how about the below code?
<script type="text/javascript" src="js2/prototype.js" ></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder" ></script>
<script type="text/javascript" src="js2/lightbox.js" ></script>



is it have to replace replace all $ with jQuery as well?
i have been doing some research that Javascript Prototype library is other jquery library as jstall has been mention about it .. :)is it still have to replace the $ with jQuery inside there as well ?
thanks again ...

This post has been edited by newbieHQ: 01 April 2011 - 07:29 PM

Was This Post Helpful? 0
  • +
  • -

#12 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1877
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: jquery conflict/crash

Posted 01 April 2011 - 09:02 PM

I don't think so. I believe Prototype and Scriptaculous are separate libraries unrelated to jQuery.

Why don't you try what I've actually told you, and then see what errors you get.
Was This Post Helpful? 1
  • +
  • -

#13 newbieHQ  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 76
  • Joined: 20-January 11

Re: jquery conflict/crash

Posted 01 April 2011 - 09:59 PM

haha ...that solve my problem ... thanks man !! :D

erm ..... just now i included another jquery lib .... which is special for footer jquery ...

<script type="text/javascript" src="jquery2/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery2/menu1.js"></script>



meaning that now i have 3 different library here(below) .... even i added noConflict() method inside it .. it still got conflict ... so what should i do now ? and how about if 4th and 5th jquery lib .. :) ...

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>
<link rel="stylesheet" href="css/sell.css" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
<script type="text/javascript" src="js1/jquery.js"></script>
<script type="text/javascript" src="js1/sell.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>
<script type="text/javascript" src="js2/prototype.js" ></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder" ></script>
<script type="text/javascript" src="js2/lightbox.js" ></script>

<script type="text/javascript" src="jquery2/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery2/menu1.js"></script>

</head>



how to solve the above problem now then?
and how am i differentiate the jquery.js, jquery-1.2.6.min.js file ? is it the same? and i do not think so it is the same ... :)

thanks again dude ! ;)
Was This Post Helpful? 0
  • +
  • -

#14 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: jquery conflict/crash

Posted 02 April 2011 - 01:19 PM

Hi,

I noticed you are calling the noConflict() method before you link to jQuery:
<script type="text/javascript" src="jquery2/jquery-1.2.6.min.js"></script>



I believe that would cause you trouble, you want to link to a library before you try to use it... so try moving that code above there you call noConflict(). Hope that helps.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1