Refresh DIV on modal window close event

JavaScript
1

I’ve searched high and low through this forum and thus far I don’t see an answer. And, I think I beginning to lose my mind. :nanaman:

Could be I’m just missing it as I am NOT a programmer.
I am a visual designer that can usually install pre written code without to much
difficulty. And, indeed I have installed FancyBox and have it working well
except for one small problem which I desperately need help with.

I am working with a dynamically generated page written in ColdFusion.
Three divs on the page contain FancyBox links that open editing screens.
Once editing is complete and the user closes the FancyBox modal the changes
need to be reflected on the parent page.

Right, so I was able to find a solution that refreshes the entire page

‘onClosed’: function() {
parent.location.reload(true); }
});

to refresh the entire parent page. But, that causes a browser prompt
that is confusing to users and a bit of over kill as I really only
need the information edited to refresh.

How, oh how can I get just a single div to refresh “onClosed” as
apposed to the entire page???

2

I should probably start with pointing out that a bit of JS programming would be needed to get this to work.

The function you’re calling for the onClose event is something that would only need to be called if you were opening a proper popup window, not a modal dialog, as the “parent” part would reference the parent window of the currently opened browser window.

I’m just going to set a sample scenario here with the following assumptions:

  • You’re using AJAX to save the results
  • You have jQuery included somewhere (because I’m lazy :P)

Sample HTML:

<div id="someFieldset">
  <p id="someField">This is the field value</p>
  <p id="anotherField">This is another value</p>
  <p><a href="/edit.php" id="editSomeFieldSet">Edit</a></p>
</div>

So let’s say you’ve bound an event handler to the edit link that pops up the Fancybox dialog to edit the fields in that particular div, once you save those values you could also update the div on the page with the new data.

Let’s say the user updated both “someField” and “anotherField”, you could add some code similar to this


function updateField(fieldID, newValue){
  $("#"+fieldID).html(newValue);
}

So somewhere among your code that saves the changed values you can then call updateField(“someField”, “This is the new value for this field”).

Hope this has been of some help :slight_smile: