Question

EDIT: I am having an issue with reloading a div on a parent page using jquery from an Iframe Modal Box.

What’s on the parent page? – Just a div called “#hidden” that loads a separate php page called “getcontent.php”

What’s on the Iframe modal box? – Just a form. On form submit it goes to a submission page where I do all my updating inside the database. After all of that updating is complete, then my function for closing the modal box and refreshing the div comes in inside the iframe

Here’s my code:

$(document).ready(function() {
    $('#hidden').load('getcontent.php');
    parent.$.fallr('hide', function(){
    });
});

I expect this code to a)refresh the div #hidden on the parent page and b)close my modal box. So far closing the modal box works perfectly! Refreshing the div does not

Answer 1

Within your callback function you create another function, but you don’t do anything with it. It gets created and thrown away. If you remove the inner-most function I guess it’ll work loads better for you:

parent.$.fallr('hide', function(){
     $('#hidden').load(
         'admin/getcontent.php', 
         { pageID : "<? echo $_REQUEST['pageID']; ?>" }
     );
});

Possibly also failing cause of the query string. Not sure if it’ll be able to encode that properly. It should do so if you place it in the data-parameter however. See above.

So, now that we’ve gotten a much clearer explanation, and gotten rid of the extra function and query string (the latter of which was probably working fine anyhow), we can move forward.

With the current code you’re asking the #hidden div on the dialog to load content. But there is no #hidden div on the dialog, it’s on the parent. Prefixing with parent. would fix that, but we also have another issue. We’re telling the dialog to refresh the div as soon as the dialog loads. That’s not what we want. We want it to refresh when we’re closing the dialog, right? So moving it into the fallr callback should fix that. And that should run in the context of the parent, so no parent. prefix required.

$(document).ready(function() {
    parent.$.fallr('hide', function(){
        $('#hidden').load('getcontent.php');
    });
});

But that’s more or less what we had earlier that was causing the problem with the context not existing any more.

So, to me the problem is that you’re trying to do things with the parent from the child. In my opinion, the parent should be the one doing things. So when the dialog is ready to be closed it should call a function on the parent that will close the dialog and update itself:

//From an event on the dialog
parent.closeDialogAndRefresh();

//On the parent define it
function closeDialogAndRefresh() {
    $.fallr('hide');
    $('#hidden').load('getcontent.php');
}

If that doesn’t work. Try starting a timer that will call closeDialogAndRefresh after 50ms or something like that.

The real problem here I think is that you’re using IFrames instead of floating divs from some decent UI-framework. Hope you’ll get where you’re going though.