jquery separate js files

Question

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.

Hi, thank you all for the your answers. The problem was the scope, like you all have mentioned. I've moved showMessageBox() from the $(document).ready() scope and that fixed the issue. Now I can't decide which answer to mark as the accepted answer, since all were equaly helpful. :) — Alex D, Sep 08 '09 at 13:08

score 3 · Accepted Answer · edited May 23 '17 at 11:48

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?

score 1 · Answer 2 · answered Sep 08 '09 at 12:35

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.

score 1 · Answer 3 · answered Sep 08 '09 at 12:36

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.

score 0 · Answer 4 · answered Sep 08 '09 at 12:39

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.

score 0 · Answer 5 · answered Sep 08 '09 at 12:42

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);
            }
        }
    });
});

score 0 · Answer 6 · answered Jan 09 '10 at 12:23

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) {...

`

jquery separate js files

6 Answers6