Cannot nest a Javascript function within a function

Question

I have the following function setup:

function disableButtons(){
 $('div.test').block({
 message: '<h1>Processing</h1>',
 css: { border: '3px solid #a00' }
 });
 }

Now I have another function I would like to call that from:

function test(){
 //call function here 
 disableButtons();
}

If I put the exact information of function 1 into function 2, it works, but not if I call function 1 directly from function 2. Here is how I would like it to work:

function1 () {
//function statements
}
function2 () {
 function1();
}

It seems to me this should just "work" but I'm thinking something is wrong with my syntax, perhaps, because it is not working.

EDIT: Here is my actual code...

function disableButtons(){
 $('div.test').block({
 message: '<h1>Processing</h1>',
 css: { border: '3px solid #a00' }
 });
function selectEmployeeInfo(){
 disableButtons();
 document.forms[0].action="userGet.do";
 document.forms[0].submit();
 }

• Blender: Post your actual code.
• dihakz: Posting it in my original post, now.
• Klors: Where do you call test()?
• Nick: this should work. What happens when you debug it? I suspect there's an error somewhere cause it to fail. I'd look into the block function and the parameters in that. If you comment out the block function and add an alert on the disabledButtons, does the alert fire?
• XNargaHuntress: It looks like disableButtons is defined inside another function block? If so, you cannot call it directly (javascript functions are first-class functions).

Answer 1

I'm guessing you didn't provide all of your code, just the necessary bits; so I'm assuming that your disableButtons function is scoped, which means it's not a global function:

// Assuming missing bits of code, probably something similar to '$(function(){' 
 function disableButtons(){
 $('div.test').block({
 message: '<h1>Processing</h1>',
 css: { border: '3px solid #a00' }
 });
 }
}); // <-- Ending of scope?
function selectEmployeeInfo(){
 disableButtons(); // Undefined because of scope?
 document.forms[0].action="userGet.do";
 document.forms[0].submit();
}

Try moving the }); before the function disableButtons() or after the selectEmployeeInfo() definition, and see what happens :)

• dihakz: Thank you -- that was the exact problem I had.

Answer 2

You need the functionkeyword to declare functions:

function function1 () {
//function statements
}
function function2 () {
 function1();
}

Answer 3

Syntax error, you have too many brackets.

function disableButtons(){
 $('div.test').block({
 message: '<h1>Processing</h1>',
 css: { border: '3px solid #a00' }
 });
 }
function selectEmployeeInfo(){
 disableButtons();
 document.forms[0].action="userGet.do";
 document.forms[0].submit();
}

• dihakz: Thank you for this. The syntax error was in my copying it over here, since I had to strip out extraneous code that was irrelevant (and I forgot those brackets.)
• Klors: Aha. You can declare disableButtons outside of the containing brackets you had (presumably from a jQuery event or similar) and then simply put disableButtons(); into the jQuery event.
• dihakz: Thank you -- that is exactly the solution I needed. :)