Javascript / JQuery: refresh tab in parent

Question

Hello,

I have a (parent) window containing JQuery tabs:

 <div id="tabs"> 
      <ul class="tabHeader"> 
           <li><a href="?ctrl=doSomething" title="#tabs-something">
                  Awesome function</a></li> 
           <li><a href="?ctrl=showSettings" title="#tabs-showSettings">
                  Settings</a></li> 
      </ul>
 </div>

Within #tabs-showSettings, I require in certain cases a new window, which I open using the following code:

window.open('?control=showSetting&server='+server,
    'serverSettings','width=400');

That works fine. But within this window, I require a function to submit the entered data (works correctly), refresh the div within the parent (fails) and close the child window (works). That's what I tried:

// #1: the following would refresh the div within the child ;(
parent.$('div#tabs-showSettings').load('?control=showSettings');
// #2: the following doesn't seem to have any effect
window.opener.$('div#tabs-showSettings').load('?control=showSettings');

Please tell me what I'm doing wrong. Many, many thanks!

Solution:

$("div#tabs-showSettings", window.opener.document).load(
    "?control=showSettings", function(){
    window.close();
});

Answer 1

Try parent as the context:

$("div#tables-showSettings", window.opener.document)
  .load("?control=showSettings");

Update:

Some of the comments following suggested the need to have the window close after the updates are done - that should be handled in the callback:

$("div#tables-showSettings", window.opener.document)
  .load("?control=showSettings", function() { window.close(); });