'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.

Solution 1:^[1]

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?

Solution 2:^[2]

the iframe has an onload event handler you can use, when the form is posted it invokes the event handler, which i called "posted", that updates the table.

    <script>
    function posted(str){
        var matches=str.match(/^.*\?data=(.*)$/);
        if(matches)
            document.getElementById("data").innerHTML+=matches[1]+"<br/>";
    }
    </script>
    <form method='get' action='nowhere.html' target='frame'>
        <input name='data'/>
    </form>
    <table width="100%" border=1>
        <tr><td id='data'></td></tr>
    </table>    

    <iframe style='display:none' name='frame' onload="posted(this.contentWindow.location.href)">
    </iframe>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Community
Solution 2	Charlie Frank

'How do I use a function through iframe?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]