javascript - 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();