jquery can do this? popup window for value

Question

I used JavaScript to open a new window(child) when user clicks on button from parent window.

On new window(child), I have textbox and button, I need to get the value of the textbox and pass to parent window when user clicks on button, while closing the child window, I need the updated value inserted into parent window (without refreshing parent window) so I can display my value to some hidden field/ label of the parent window , how can I do that?

1- parent window has button, clicked child window opened 2- child window has textbox and button, when button clicked, child will do a post to server to update database, then pass the value of textbox to parent window without refreshing parent window, and close child window.

How can I do that? Is it can be done with simple JavaScript? If I do it using jquery, will I have more benefit? Could anyone advice how can I do it?

Answer 1

Absolutely: you're looking for the JS native* opener property (discussion here), no jquery required (though it may be wrapped for you there).

Windows opening and closing is a pretty non-2.0 way of doing things though, would you not rather have a lightbox or similar in-page HTML based dialog? jQuery dialog would certainly be the way forward for that.

* well, universally supported if not standards defined

Answer 2

I would suggest using the jQuery dialog widget instead of an actual, new window. This will make it easier to access the new value as it's in the same window's DOM. Just have the callback from the button that closes the window extract the value from the DOM element contained in the dialog and copy it to the target DOM element on the form.

$('#popupDialog').dialog({
     modal: true,
     autoOpen: false,
     buttons: {
          'Cancel': function() {
                       $(this).dialog('close');
                    },
          'Accept': function() {
                       $('#mainForm input#target').val( $(this).find('#widgetName').val() );
                       $(this).dialog('close');
                    }
});

$('#popupButton').click( function() {
   $('#popuDialog').dialog('open');
});


<div id="popupDialog" title="Input a new widget name">
  <p>
     <label for="widgetName">Please input a new widget name:</label>
     <input type="text" id="widgetName" />
  </p>
</div>