Partial Page Rendering Using Hidden IFrame


Web pages typically support a variety of actions, such as entering and submitting form data and navigating to different pages. Many web pages also support another type of action, which is to allow the user to make modifications to the contents of the web page itself without actually navigating to a different page. Some examples of such actions include.
Clicking on a link could update an image on the same page. For example, an automobile configuration application might update an image of a car as the user chooses different options, such as the preferred color.

Selecting an item from a choice box might result in modifications to other fields on the same page. For example, selecting a car make might update the set of available car models that are displayed.
Clicking a link or selecting an item from a choice could be used to scroll to a new page of data in a table. Clicking a button in a table might add a new row to the table.

All of these actions are similar in that they result in the same page being re-rendered in a slightly different state. Ideally, these changes should be implemented as seemlessly as possible, so that the user does not experience a loss of context which could distract from the task at hand.
Partial page rendering can be implemented with very simple solution using a hidden IFrame and minimal JavaScript. Any part of the page can be partially rendered with using a div or table tags in HTML.

Page Elements That May Change During PPR:

oRe-Render Data: The same fields are redrawn but their data is updated. Examples include the Refresh Data action button, or recalculate totals in a table.

oRe-render Dependent Fields: Fields may be added, removed, or change sequence, and data may be updated. Examples include the Country choice list, which may display different address fields, and toggling between Simple and Advanced Search.

oHide/Show Content: Both fields and data toggle in and out of view.

Page Elements That Do Not Change During PPR:

Some page elements are always associated with a page, regardless of the content displayed on the page.

As a general rule of thumb, elements above the page title (except message boxes) remain constant and do not change position, whereas elements in footer constant but may move up or down the page to accommodate changes to page content. The following elements never change when PPR is initiated:

o Branding

o Global buttons

o Tabs, Horizontal Navigation, SubTabs

o Locator elements: Breadcrumbs, Train, Next/Back embed code generator

o Quick links

o Page titles (first level header)

o Page footer

o Separator lines between the Tabs and Page Title

In most cases the following elements will also not change, other than moving up or down the page to accommodate changed elements. Nevertheless, in certain cases actions on the page may require them to be redrawn:

o Side Navigation, unless it contains a Hide/Show control.

o Subtabs

o Contextual information

o Page-level action/navigation buttons

o Page-level Instruction text

o Page-level Page stamps

o Page-level Key Notation

In all above scenarios this solution can be used to achieve the good performance and user interaction of the web pages.

Leave a Comment

Your email address will not be published. Required fields are marked *