How do I use a function through iframe?

I have a web page which has a form at the top and a table at the bottom. The form allows users to submit info and also upload an image, the form’s target is the iframe, which is set height=0 width=0. Reason I did this was to prevent the page from refreshing and going to the action page assigned. The table is just a few rows of different user data. When the user submits the data, I want to call an event to refresh the table with the new data.

Is there a way to refresh the table and the form after submission without moving to a new page? Is this doable using an iframe or should I try some other method? Right now the only idea I have is using iframe and it does prevent the page from moving to a new page after submit.

Answer

This is a good for AJAX techniques – you make a call to the server and it sends back an HTML fragment that gets loaded into the specified wrapper element in the current page.

While you can do all of this using standard JavaScript, most use libraries to deal with all of the cross-browser issues. The most popular is jQuery.

jQuery is written in JavaScript and extends its functionality to give you great shortcuts and enhanced features without writing a lot of code.

See: http://api.jquery.com/jQuery.ajax/

In your case, the Iframe would include a block of JavaScript, which would call the Ajax function in the parent page.

See: How to call function on parent page from iframe using jQuery?