Callback Function not Working: Jquery .load()

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

• drummer392: perhaps I should remove the function from the .load should work

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.

• Gaute Løken: Not sure why you're sending that php code as a parameter though. Shouldn't you specify an ID in your request, and have the server find the correct page for it or something like that?
• Gaute Løken: Ok. Do you know where it breaks? Does your request ever fire at all? Does it reach the server? Does it come back to the client, but fails there? Try adding success and error handlers and see what they give you. Use the chrome/ff dev. tools to see what's going on both in the console and with networking.
• Gaute Løken: Does this mean that your fallr hide is hiding a dialog containing the #hidden tag? If so, when the load callback kicks in the dialog will at best be hidden, and at worst have been destroyed. If that's the case that would be consistent with the error message, I believe.
• Gaute Løken: Could you update your question with what you currently have please? Also, if this is helpfull, please vote me up. :) Thanks.
• drummer392: There's your up vote! And I updated my question with current code. Thanks for the help!

Answer 2

You have a functinception there:

parent.$.fallr('hide', function(){
 function(){

• drummer392: what do you mean. Should I define the function elsewhere and then just call the function like you have it here?