Question

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

Answer 1

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.