views:

2404

answers:

2

How can I accomplish the following using jQuery: Open a popup window that returns a value to the parent window when a link in the child window is clicked, close the child window, and then have the parent automatically submit a form based on the value returned?

I realize that the jQuery Dialog is a popular solution, but I require a popup window because the window's contents need to be navigable, and I want to avoid using an iframe in the jQuery Dialog.

The popup window is going to be used to collect more than one value, ultimately to be returned as a delimited string to the parent, but this data collection needs to occur prior to the submission of the parent window's form. If there were a standard design pattern for an "Entity Picker", this would be it.

This needs to work in IE8, FF3.6, Safari 4, and Chrome 5.

Thanks, Mark

+3  A: 

In your newly opened browser window you could try something like

$("#mylink").click(function(){ 
        value = /* get some value */
        window.opener.$("#myform .somehiddenfield").val(value); 
        window.opener.$("#myform").submit();
        window.close(); 
}); 

DISCLAIMER: I haven't tested this in any browser.

Rune
Thanks for the reply, but "get some value" is a bit vague to me. What if that value came from the application's session state, for example? How would I assign that in your example?
Mark Richman
Then you would render it like this: value = '<%= Session["mykey"] %>'. But if the value comes from session state, why would you need to pass it between windows? I had expected that you would get it from some input field (textbox) in the child window. Then it would be value = $('input.sometextbox').val();
Rune
I edited my original question to clarify. The popup window is used to browse the system to collect various entity references, and then pass them back to the parent as a delimited string. You can think of this as analogous to a shopping cart, where the selected items are stored in session state.
Mark Richman
+1  A: 

Here is my solution:

var parent = $(parent.document.body);
$(parent).find('input#valStore').val(theVal);
$(parent).find('form#myForm').submit();
window.close();
iman1003