Javascript / JQuery Conflict

Question

I am a newbie to this. I have two javascript / jquery on my page. If I use 1st Script, the 2nd one doesn't work. If I remove the 1st script, the 2nd one works fine. I don't know how to solve this issue. I know there is a "no conflict" script. I tried but that didn't work out. I maybe tried in wrong way. Please someone help me. How can I run both of them? I have posted both the script below:

Script Number 1:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".sign_in").click(function(){
 $("#sign_box").show();
 return false;
 });
 $("body #headerwrap").click(function(){
 $("#sign_box").hide();
 return false;
 });
});
</script>

Script Number: 2

<script language="javascript" type="text/javascript">
var fieldstocheck = new Array();
fieldnames = new Array();
function checkform() {
 for (i=0;i<fieldstocheck.length;i++) {
 if (eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].value")==""){
 alert("Please enter your "+fieldnames[i]);
 eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].focus()");
 return false;
 }
 }
 return true;
}
function addFieldToCheck(value,name) {
 fieldstocheck[fieldstocheck.length] = value;
 fieldnames[fieldnames.length] = name;
}
</script>

• net.uk.sweet: Check the console - are there are any errors?
• dippas: just a note, you are using a very old version of jQuery. check here for all available versions
• Ron: Yes... Show this error: Uncaught ReferenceError: $ is not defined
• Deryck: another note: remove language="javascript"
• Yerko Palma: You don't need to use jQuery.noConflict because you are just using javascript, no conflict is made to use jquery with other js libraries that also use the $ sign

Answer 1

Where is second script on the page ? It would need a bit more info about it to see what's happening.

Second script looks very ominous, probably very old script. Some points of concern:

• All your code is thrown at global object
• fieldnames is not declared (missing var)
• Declaring array with [] is prefferable to new Array() syntax
• addFieldToCheck and checkform functions seems not to be used (at least not in the code you posted)
• it uses eval which is considered a bad practice

For a good start try wrapping your second one in self invoking anonymous function:

(function() {
 var fieldstocheck = [],
 fieldnames = [];
 function checkform() {
 //... 
 }
}());

Answer 2

Just a note about eval. You don't need to use eval in the way you're using it. You can simply use the bracket notation directly:

eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].value")

is the same as

document.subscribeform.elements[fieldstocheck[i]].value

and

eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].focus()");

is the same as

document.subscribeform.elements[fieldstocheck[i]].focus();

Answer 3

There's no conflict.

The first script has a click listeners that return false. I'm assuming the sign in button is used to submit the form.

Returning false on that click event will prevent the form from submitting which means the execution path will never enter your functions in the second script.

Consider removing the return false.

EDIT: Here's some more information on why it's generally bad practice to return false (unless you know exactly what you're doing and why)

http://firebreaksice.com/avoid-return-false-in-jquery-click-bindings/

• Ron: Thank you very much for the help. I have used " e.preventDefault(); " instead of "return false;" and everything working perfectly. ...