Jul 31, 2012

Easy Inter-window Communications with jQuery

It may happen that you need to open a second browser window to help your web application perform some additional action that you don’t want to leave your current page to do. Sure, there are all kinds of “light box” and “modal div” pop-up solutions, but it might also be the case that you want the two windows to be able to continue to operate “independently,” but still have some level of interoperability. This article doesn’t discuss the pros or cons of either method, but does use this snippet of HTML to show how easy it is to do.

<html>
<head>
<title>Window Opener Chatter</title>
<style>
input[type=text] {
  width: 20em;
}
#haveParent,#haveChild,#chatArea {
  display: none;
}
#chatArea {
  border: thin solid grey;
  height: 15em;
  overflow: auto;
  width: 20em;
}
.childSays {
  color: green;
}
.parentSays {
  color: blue;
}
</style>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var child = null;
$(function() {

  $("#openAnother").click(function(e) {
    e.preventDefault();
    child = window.open(location.href);
    $("#openAnotherDiv").hide();
    $("#haveChild,#chatArea").show();

    $("#childChatter").submit(function(e) {
      e.preventDefault();
      var newP = "<span class='parentSays'>"
               + $("#childMessage").val()
               + "</span><br/>";
      $("#chatArea",child.document).append( newP );
      $("#chatArea").append( newP );
      $("#childMessage").val("").focus();
    });
  });

  if( window.opener ) {
    $("#haveParent,#chatArea").show();

    $("#parentChatter").submit(function(e) {
      e.preventDefault();
      var newP = "<span class='childSays'>"
               + $("#parentMessage").val()
               + "</span><br/>";
      $("#chatArea",window.opener.document).append( newP );
      $("#chatArea").append( newP );
      $("#parentMessage").val("").focus();
    });
  } 
});
</script>
</head>
<body>

<div id="openAnotherDiv">
  <a href="#openAnother" id="openAnother">Open Another Window</a>
</div>

<div id="haveChild">
  <span>I have a child!</span>
  <div>
    <form id="childChatter">
      <input type="text" id="childMessage">
      <input type="submit" value="Say">
    </form>
  </div>
</div>

<div id="haveParent">
  <span>I have a parent!</span>
  <div>
    <form id="parentChatter">
      <input type="text" id="parentMessage">
      <input type="submit" value="Say">
    </form>
  </div>
</div>

<div id="chatArea"></div>

</body>
</html>

The page opens with a only a simple link visible. A simple jQuery binding to the link’s click event will change it from jumping to a new URL (in this case a named anchor) to open a child window, and at the same time makes the chat form and display divs visible.

When that child window opens, it checks to see if it was opened by another window (as did the original window). The standard JavaScript value of window.opener is populated with a context handle to that parent. If this value is populated, the child window will open its chat form and display divs. The child window also has a link to open a new child as there is no reason a child window can’t also have children, although there i no default visibility to grandparents or grandchildren, though.

Filling in the chat form text box and clicking the “say” button will insert the message into that window’s chat box. It will also send the message to that windows child or parent (depending on the form used). There is no messaging to grandparent or grandchildren windows, although that would be pretty easy to do, too.

The simple example inserts the message into a div, but could be used for many other jQuery or JavaScript uses. Notice that the window hosting the event (the one in which the “say” button is clicked) is affecting the other window’s content. There could be other bindings as the jQuery context selector, which in one case is  $(“#chatArea”, child.document), is just another selector; as long as it’s found, you can do all of the jQuery goodness you need to do to it. Beware, though, that the scope of the script is tricky to juggle as you affect the other document’s DOM.

This example doesn’t watch for the closing of a child or parent, which could be done with messaging or binding events, so closing a window doesn’t change the view of its parent or child windows. It also doesn’t handle multiple children, although that should be simple enough by storing the child value differently, say in the form’s data, and changing the way the message text is grabbed from the form field, so it isn’t using an ID.

About the Author

Object Partners profile.

One thought on “Easy Inter-window Communications with jQuery

  1. Razzi says:

    Helped me a lot, thanks!!

  2. Ron says:

    That was awesome, thanks. I was looking for a tutorial that explained inter-window communication using jQuery and this example was clear and concise.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Blog Posts
Android Development for iOS Developers
Android development has greatly improved since the early days. Maybe you tried it out when Android development was done in Eclipse, emulators were slow and buggy, and Java was the required language. Things have changed […]
Add a custom object to your Liquibase diff
Adding a custom object to your liquibase diff is a pretty simple two step process. Create an implementation of DatabaseObject Create an implementation of SnapshotGenerator In my case I wanted to add tracking of Stored […]
Keeping Secrets Out of Terraform State
There are many instances where you will want to create resources via Terraform with secrets that you just don’t want anyone to see. These could be IAM credentials, certificates, RDS DB credentials, etc. One problem […]
Validating Terraform Plans using Open Policy Agent
When developing infrastructure as code using terraform, it can be difficult to test and validate changes without executing the code against a real environment. The feedback loop between writing a line of code and understanding […]