jquery separate js files
<p>I have 2 separate js files:</p>

<pre><code>
    //first.js
    $(document).ready(function(){

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

  showMessageBox("test"); 
        });
    });
</code></pre>

<p>and the second</p>

<pre><code>
$(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);
           }
   }
  });


});

</code></pre>  

<p>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.</p>

<p>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.</p>

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

<p>Any help would be appreciated.</p>

<p>Thanks.</p>
