SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Refresh DIV on modal window close event

    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.

    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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code HTML4Strict:
    <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

    Code JavaScript:
    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 :-)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •