问题描述:

I have 2 separate js files:

//first.js

$(document).ready(function(){

$("#someButton").click(function(event){

showMessageBox("test");

});

});

and the second

$(document).ready(function(){

alert('csdfsdf');

function showMessageBox(msg) {

alert("something");

$('#messageBox').text(msg);

$('#messageBox').dialog('open');

}

$("#messageBox").dialog({

bgiframe: true,

autoOpen: false,

height: 200,

width: 300,

modal: true,

buttons: {

'Ok': function() {

$(this).dialog('close');

window.location.reload(true);

}

}

});

});

The showMessage() function in the second file I would like to use it in others jquery-style js files, like in the first one. The problem is that I get an error saying that showMessage() is undefined when I try to use it.

This is happening with every other function I call which is in a separate jquery-style file. If showMessage() function is not inside $(document).ready(function(){.....}); then it is called, but then it's unusable with jquery.

I also make sure that the file that contains showMessage() function is loaded before the file which calls it.

Any help would be appreciated.

Thanks.

网友答案:

From what I can see, you're using the wrong function name in your call, the declared function is showMessageBox and you're calling showMessage. Also, you need to declare the function outside of the document.ready block, so it is available in the global context.

A function declared from one document.ready block cannot be accessed from other document.ready blocks, I've performed that test before. See this answer:

Can you have multiple $(document).ready(function(){ ... }); sections?

网友答案:

You are defining the ShowMessageBox() function inside the document ready method in the 2nd file. Moving the declaration outside of the ready method should allow you access to it. In addition you are calling ShowMessage() but have defined a ShowMessageBox() method.

网友答案:

You are defining showMessage inside the second document.ready function and therefore it only has scope in that function (well, that's not strictly true, but it definitely doesn't have scope in the other document.ready function).

The solution is to move it to a scope which both functions can access. The easiest way to achieve this is to place it outside the other functions which gives it global scope.

Getting the name right (showMessage vs showMessageBox) often helps too.

网友答案:

Try reorganizing how your functions work. You could have a first "util.js" file like (outsite and without the document.ready function) :

function showMessageBox(msg,msgBox) {
  alert("something");
  $(msgBox).text(msg);
  $(msgBox).dialog('open');
}

And then, on the files you need it:

  //first.js
$(document).ready(function(){

 $("#someButton").click(function(event){

    showMessage("test","#messageBox"); 
    });
});

I'd say because you are loading that function after the document has loaded, there is an order of precedence problem for calling it on the first file while it hasn't been loaded yet to memory (even if you put that file first). Putting it out the document.ready() function allows you to define it as soon as it's read by the browser and onto a globalesque scope.

网友答案:

Try the following code. Basically, put in the main scope your showMessage function and use it anywhere. You were defining showMessage inside $(document).ready() function scope, making it unsuable from outside.

//first.js
function showMessage(msg) {
    $('#messageBox').text(msg);
    $('#messageBox').dialog('open');
}


$(document).ready(function(){
    $("#someButton").click(function(event){
        showMessage("test"); 
    });
});

$(document).ready(function(){
    $("#messageBox").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 200,
        width: 300,
        modal: true,
        buttons: {
            'Ok': function() {
                $(this).dialog('close');
                window.location.reload(true);
            }
        }
    });
});
网友答案:

I just came through Google to this still unsolved issue to post the solution:

If you have 2 different ready-blocks and you want to call a function placed in a different ready-block then just define the called function a little bit more global.

This can be done by using window.YourFunctioName=function(){...}.

In your case the solution is to define messagebox more global: ` $(document).ready(function(){

  window.showMessageBox=function(msg) {...

`

相关阅读:
Top