Partial Page Rendering Using Hidden IFrame

By Madhusudan Pagadala

Partial Page Rendering Solution

The solution provided using simple hidden iframe and JavaScript can be used as a generalized solution to all the Partial Page Rendering scenarios.

Below is the main html (Table 1.1), which will have two buttons one is to show a simple table which will be generated by the server, and another button to remove the table.

Table 1.1

This iframe tag is used as target to the Partial Page Rendering Request. The tag:

gives the user action to get the contents of a table from the server, in this solution sample html is provided to render the table, which supposed to be generated by the server. The tag:

gives the user to remove the table from the user interface. The JavaScript:

is used to get the contents from the server, the line:

sends the GET request to the server, and as a response iframe gets the HTML.

If the requirement insists to send a POST request for Partial Page rendering Response, that can be achieved by setting the html form element target attribute as the name of hidden iframe. The code for the post request looks like:

Partial Page Rendering Server Response

Table 1.2 shows the sample response from the server for Partial Page Rendering. This response has the JavaScript code to transfer the HTML from hidden iframe to main page.

Table 1.2

The tag:

encloses the content to transfer from hidden iframe to main page.

This is the content to show the table to user. The code:

is used for triggering the action to transfer the content.

This JavaScript function does the transferring of data from the hidden iframe to main page.

This part refers to tag div html id in main page and this part:

refers the HTML of the Partial Page Response.


Improve the user experience with Web pages that are richer, more responsive to user actions and behave like traditional client applications. Reduce full-page refreshes and avoid page flicker. Partial page rendering using iframe is a simple solution. For more information, write to Madhusudan Pagadala or call (805) 277-3768.







This article originally appeared on

Page 2 of 2

Previous Page
1 2

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date