Jquery function not defined

Question

I have a problem with loading this code. I am sure its something to do with noConflict but i cant seem to get it right.

$(document).ready(
 function spouseName() {
 if ($('#maritalstatus').val() == 'married') {
 $('#spousename').attr("disabled", false);
 } else {
 $('#spousename').val('');
 $('#spousename').attr("disabled", true);
 }
 }
);

by the way, it works on IE but not FF

• Shakir: there is textbox that should not be disabled but it still remains so and firebug says spouseName not defined.
• Shakir: Got the problem solved with another SO question function spouseName { $(document).ready( //Rest of the jquery function ): } Thanks for the answers

Answer 1

thanks for the info and answers, it seems this thread helped

Function not defined

firefox does not recognize the function name when it inside the jquery document.ready function. what i did was wrap it inside although it seems unconventional. I just removed the document ready and it works perfectly. seems chrome and FF dont recognize function names within this?

function spouseName() {
 if ($('#maritalstatus').val() == 'married') {
 $('#spousename').attr("disabled", false);
 } 
 else {
 $('#spousename').val('');
 $('#spousename').attr("disabled", true);
 }

}

• Pixelsmith: When using jQuery, it's not as vital to call a function inline from an element, like 'onChange'. Instead, jQuery allows you to assign a function to an element type. For instance, $('select').on('change', function(){...}); would serve the purpose of an inline 'onChange' function call.

Answer 2

The "jQuery not defined" error happens if you have not included jQuery or may imported beneath your JavaScript.

It should be like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script type="text/javascript" src="myjsfile.js"> </script>

myjsfile.js should be like this:

$(document).ready(function(){
 every function inside this
});

Answer 3

You forgot the function() after ready()

should be:

$(document).ready(function() {
 function spouseName() { // your code }
 function anotherFunction() { }
});

Answer 4

Your question is not very clear. Are you using $.noConflict? If so there is an example in the documentation:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $.noConflict();
 jQuery(document).ready(function($) {
 if ($('#maritalstatus').val() == 'married') {
 $('#spousename').attr("disabled", false);
 }
 else {
 $('#spousename').val('');
 $('#spousename').attr("disabled", true);
 }
 });
 // Code that uses other library's $ can follow here.
</script>

But in all cases make sure that you have properly referenced the jquery script itself before attempting to use it.

Answer 5

In some cases, jQuery can't find a function because of scope issues. You could define the function as below and important subject is to set the function scope to global:

jQuery(document).ready(function($) { 
 function sample() { console.log('blah blah'); } 
 window.sample = sample; //export function sample to the globals.
})

or shorter form as below:

(function($) { 
 function sample() { console.log('blah blah'); } 
 window.sample = sample; //export function sample to the globals.
})(jQuery)

Hope this help.