“Replacing webpage contents without doing a full page reload”.
We think that shouldn’t always be necessary, especially when building an HTML prototype.
We’ve been using an alternative approach to AJAX that we dubbed “scattering” (named after the process where particles deviate from their straight trajectory) and we’ve made it open source a few years back. It saves you a great deal of time when quickly mashing up your ideas in HTML so it’s a perfect match for Quplo. If prototyping HTML is your thing, be sure to give Scatter a try.
Here’s how it works
This example shows a simple sign-in link:
<div id="user-panel"> <a href="/sign-in" rel="scatter">Sign in</a> </div>
Notice the rel=”scatter” attribute? It makes the URL of the link be retrieved in the background. Any HTML contents that gets sent back will be checked to have matching id attributes on the current page. Positive matches will be replaced. Simple as that.
So all we need to do is send down some new HTML at the “/sign-in” URL:
<div id="user-panel"> You are signed in! </div>
The above example retrieves a new div with id “user-panel”. It already exists, so the entire div is overwritten with the new one. Now because Quplo is URL based, here’s a full example of how to go about it in Quplo:
Scattering can be applied to hyperlinks and forms (either GET or POST). Just adding rel=”scatter” will send all form values to the server like regular forms do, but after processing it the server can send down new HTML to be scattered on the page. The HTML that gets sent back is not limited to only one element though, you can send down as many as you want and only the top-level elements that have matching ids on the current page get replaced.
Where to start
Scatter is added to the Quplo Goodies page, but you can always grab a copy at google code. Include the script, and make sure you do an initial call to “Scatter.scanPage()”. Adding it to the body’s load event will do. Then add rel=”scatter” to any link or form that you want to have scattered, and make sure their URLs send down new HTML.
Still want to code?
Scatter may be small (only 1k minified and gzipped), but it has a very intuitive public API for embedding the scattering-process in full blown apps. Check it out on google code.
Leave a reply
You must be logged in to post a comment.