Partial Page

Overview

The smoothness weblib is designed for Multi-Page Apps (MPA), but also provides some Single Page App (SPA) features as a hybrid app is often desired for best user experience. One of these SPA features is partial page loading. Anchors given the class dialog-opener result in the referenced content being opened in a dialog upon click, without doing a full page reload. However, this requires the response from the endpoint to be formatted in a particular way, so it only works if the page being requested supports this partial page format. The hint that a partial page is being requested is the URL parameter partial=Y. The expectation is that partial page loading is of an app's own pages, not external ones. External ones would need to follow the response format and Same Origin Policy restrictions would need to be overcome, but in theory external partial pages could work.

Partial Page Format

Generally each page in a smoothness app extends from a page template that provides the navigation and shared headers/footers. These templates can be designed to support partial pages for all pages that use them. From a simplistic view, a partial page generally is the same as the page would normally be, except the tab navigation and app header and footer is stripped off.

Smoothness Demo Example tag

The reason the format separates out CSS, JS, and HTML is such that these resources can be included in the parent page only once. If a partial page dialog is repeatedly opened and closed on a given parent page without a full page reload we need to avoid appending styles and scripts multiple times. Styles are idempotent (applying them multiple times has same result as if applied once - mostly anyways - order matters if specificity is the same...), but it's a waste to apply multiple times. JavaScript is not idempotent and applying them multiple times can break pages.

Namespaces

When creating pages that are intended to support being loaded as a partial page it is important to prefix CSS rules, HTML element IDs and classes, and JavaScript objects (functions, variables) with a unique name (perhaps the page name). Otherwise, collisions may occur in the parent page.

Other Considerations

There are some nuances to consider:

• To conditionally display content depending on whether the page is full or partial the server side Servlet/JSP can use param.partial='Y' to customize the view delivered in the response. For convenience the hide-in-dialog class can alternatively be assigned to an element to hide it via CSS (though smaller view size and quicker browser rendering is achieved if the URL parameter is used instead).
• Often a script that posts data needs to take a different refresh action depending on if partial page or not. Data table Create, Read, Update, Delete (CRUD) operations often require refreshing the view to show the change worked. In most cases a full page refresh is used as it's the simplest way to achieve this. In a partial page this isn't usually desired and instead just a refresh of the partial page is needed. A function is provided to do this.
• The jQuery Ready (onload) function is often used to initialize a page, but this won't work for a partial page as the timing is different and it won't be called each time the partial page is opened/closed if done repeatedly. To overcome this there is an event generated named partial-page-init that can be watched and responded to. However, the Ready function for typical page load use must be avoided in a partial page, so should be located in an script tag without a src or ID attribute (which are ignored in partial pages) or a src-script tag with class full-page-only.
• Links inside a partial page will perform a full page navigation unless they have the class dialog-opener, in which case the navigation will occur in the partial page (avoiding a full page load). In cases when links should result in opening in a partial page only if already in one the class partial-support should be used instead. This won't open a partial page dialog if not already in one, but will replace the current one, if already in one.