Calling a function defined inside jQuery ready from outside of it

Question

My aspx page:-

  <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  <script src="js/jquery-ui-1.8.2.custom.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function () {
      //lots of other code here....
      function showMessage(){
        $("#msgDiv").dialog({
                        modal: true,
                        buttons: {
                                  Ok: function() {
                                          $(this).dialog('close');
                                      }
                        },
                        resizable: true,
                        show: "explode",
                        position: "center",
                        closeOnEscape: true,
                        draggable: false
                      });
      }
    });
   </script>

Another aspx pop up page which is triggered from the above page

<script type="text/javascript">

    window.opener.document.getElementById("msgDiv").innerHTML = <%=MessageToShow%>; //works very well for me.
    window.opener.document.showMessage(); // I am unable to access it like this?
    window.close();

</script>

Basically I want to call showMessage() from the pop up window. I also have other logics to perform in both pages.

Answer 1

Declare your function like this inside the document ready:

$(document).ready(function() {

    window.showMessage = function() {
        //...
    };

});

Then you should be able to call it from the other document like this:

window.opener.showMessage();

And because it's in the global scope, you can call it from within the main document just by calling

showMessage();

Answer 2

As far as I know, what you want to do, can't be done. So, what exactly can we do?

I think the simpliest think would be to move showMessage outside of the ready function, and just call it from within.

Now, if it really must be defined within that function, make it a named function:

  function calledonready()
  {
      /// stuff
      function showMessage(){ 
      /// stuff
      }
   }

$(document).ready(calledonready);

window.opener.document.calledonready.showMessage();