ansaurus

Question

How Do I Use jQuery/JavaScript To Open A Popup Window/Tab (ASPX Login Page) & Then Pass Values To Opened Window/Tab On DOM Ready Event of Said Window/Tab.

Answer 1

A:

When you open a window with window.open, the new window gets a property called window.opener which references the parent window. So code in your child window can call functions in the parent window, for instance:

In Window A:

// Declared at global scope => ends up as property on `window`
function phoneHome(str) {
    alert(str);
}

In Window B (the child window):

$.ready(function() {
    if (window.opener && window.opener.phoneHome) {
        window.opener.phoneHome("Hi, Ma!");
    }
});

(Using $.ready in the child window requires that the child window have jQuery loaded.)

In the above all I've done is have the child window trigger a function in the parent window with a message, but of course the function call can carry any data you want it to.

T.J. Crowder 2010-04-29 14:04:25

Answer 2

A:

Hi TJ, thanks for your help, I have tried this code and I get no alert at all from the parent side, code is as follows:

[CLIENT/CALLING CODE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml"&gt; 
<head><title> 

</title> 
  <script src="jquery-1.4.2.js" type="text/javascript"></script> 

  <script type="text/javascript" language="javascript" > 
    function phoneHome(str) {
      alert(str);
    };
  </script> 

  <script type="text/javascript" language="javascript"> 
    $(document).ready(function () {
      $('a[rel="external"]').click(function () {
        window.open($(this).attr('href'), 'LoginPage');
        return false;
      });
    });  
  </script> 
</head> 
<body> 
  <form name="form1" method="post" action="Host.aspx" id="form1"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZB8MmxavqAJyjpTxMWlMQDN4W2SO" /> 
</div> 

  <div> 
    <a href="http://localhost:5741" rel="external" style="font-family: Arial, Helvetica, sans-serif; font-size: small">Load Login Page In New Tab</a> 
  </div> 
  </form> 
</body> 
</html>

[LOGIN PAGE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt; 
<head><title> 

</title> 
  <script src="jquery-1.4.2.js" type="text/javascript" language="javascript"></script> 
  <script type="text/javascript" language="javascript"> 
    $(document).ready(function () {
      if (window.opener && window.opener.phoneHome) {
        window.opener.phoneHome("Hi, Ma!");
      }
    });
  </script> 
</head> 
<body> 
  <form name="form1" method="post" action="login.aspx" id="form1"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIODY2MjY4OThkZO5CgVjG+viijXUCkTET5P4wU1Oq" /> 
</div> 

<div> 

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQKfpqTNAwKl1bK4CQK1qbSRCwKf+9KcDgKC3IeGDAVPLXdIKWWdDE6V2657BtYtdJfL" /> 
</div> 
  <div> 
    <input name="txtUsername" type="text" id="txtUsername" /><br /> 
    <input name="txtPassword" type="text" id="txtPassword" /><br /> 
    <input name="txtPIN" type="text" id="txtPIN" style="width:50px;" /><br /> 
    <input type="submit" name="btnLogin" value="Button" id="btnLogin" /> 
  </div> 
  </form> 
</body> 
</html>

Any ideas? TIA. Terry Robinson.

Terry Robinson 2010-04-29 15:36:43

update, this code works fine unless it is run in a cross-domain environment. I have since switched methods and now pass in encrypted query strings which works fine for our purposes.

Terry Robinson 2010-05-04 13:22:44

ansaurus

tags:

views:

answers:

How Do I Use jQuery/JavaScript To Open A Popup Window/Tab (ASPX Login Page) & Then Pass Values To Opened Window/Tab On DOM Ready Event of Said Window/Tab.

related questions