1

I have a form in a modal iframe window that i create using fancybox. Once the user submits the form then upon success i want to close the modal window and update a div on the parent window with a 'Saved Successfully' message.

How do i do this? I know how to close the modal and refresh the parent window in fancybox. However what i do not understand is how to send the 'Saved Successfully' message to the parent window and update a div with this message so user can see.

I am open to using any notification plugin if that will help.

Thanks, Shakira

Kavin Mehta
  • 810
  • 10
  • 18

2 Answers2

2

First, we need to create a function in the parent window that allows us to make modifications. Do not encase this function in a $(document).ready(function(){ or a $(function){.

function updateParent(msg){  
  $('#divStatusUpdate').html(msg);  
}

Now we have a function which passes the paramter of 'msg' to the function. The function applies the contents of 'msg' to a div in the parent with an ID of divStatusUpdate.

Now we have an element that performs the event for us.

$("#element").on('click', function(){
  window.parent.updateParent('This is a message from the iFrame to the Parent Div.');
});

Simply create the div with an ID of 'divStatusUpdate', add the above scripting, change #element to the ID or Class you want to use.

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • Thanks for the quick response; if i do not encase the updateParent function in $() then will it be a problem to use $('#divStatusUpdate') inside of it? Also is there a specific reason why the updateParent should not be in side $(). Would be helpful to know this for me. – Kavin Mehta Mar 02 '12 at 06:29
  • No. As long as the jquery-1.7.1-min.js file is BEFORE your code, anything encased in jquery Syntax is parsed. As for why to not put it in $() is because that makes it a local scope. You want the function to be global scope. – Ohgodwhy Mar 02 '12 at 06:31
  • it's only work in the same domain right ? – lauwis Aug 04 '22 at 09:11
0

If problem is in changing top frame from iframe you can create function in top and call it from iframe

top.yourfunction();

or

parent.yourfunction();
Narek
  • 3,813
  • 4
  • 42
  • 58