Pop up and pop in like gmail chat

Pop up and pop in like gmail chat

My need is as follows

  1. I have 4 different page I am including the 4 page in one html using jquery.load()
  2. I want to popup any of this window or all some time(means I want those in different page) consider as I am doing marketing analysis and I am having 4 display machine, one page will contain data one will contain chart, another will have data etc...
  3. I want to pop out the data and put it in one screen and pop out the chart and put it in another screen.

I have did some work around and facing some problem, following are the code I will explain the problem after this code

My code is in stackoverflow 

Parent window code

<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> var iframeObj,iframeContent; function openPopUpIframe() { iframeObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"); iframeContent=$('#iframeContainer').detach(); $(iframeObj.document.body).html(iframeContent); console.log(iframeContent); iframeObj.onunload =function() { if(iframeObj) attachIframe(); } } function attachIframe() { iframeObj.close(); $( "#openButton" ).before(iframeContent); } $('document').ready(function(){ $("#iframeContainer").load("children.html"); }); </script> </head> <body> <div id="iframeContainer" data-role="page"> </div> <input type="button" value="Popup Iframe" id="openButton" onclick="openPopUpIframe()"/> </body> </html>

Childwindow code

<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> function test() { alert($('#testingvalue').val()); } </script> </head> <body> <input type="text" id="testingvalue"/> <input type="button" value="show text" onclick="test()"/> </body> </html>

problem is

I have loaded the child window in parent window I have given the functionality to pop-out the child window and succeeded in pop-out and pop-in. In child window I am having textbox and the show text button when a user click the show text button it will show the text which is typed in the textbox, the expected functionality is working when I click the show text button in parent window , its not working when I did popup and typed in textbox and clicked show text button then it is showing as undefined.

Another one problem is if we didn't click the show text button in parent window before we pop-out the function is not at all triggering.

Thanks in advance, any help is appreciated.