HTML and CSS Reference
In-Depth Information
Paging with Single-Page Ajax
Creating a mobile application with single-page Ajax requires a little bit more
thought and effort. Ajax allows content to be dynamically pulled in from a file or
page outside of the current web page that the user is on. This can make an
application a little bit more scalable, as you do not have to house several pages
on a single page. Instead, you pull them in as and when you need them. The
benefit of this is that you can use CSS3 to apply animations as the user moves
between pages. Listing 4-4 shows the very basics of what is required to load an
HTML page via Ajax.
Listing 4-4.
Loading HTML Using Ajax
<div id="container">
<div id="card">
<h1>Page 1</h1>
<a href="index2.html" data-method="xhr">Page 2</a>
</div>
</div>
<script>
/**
* This method will bind find all links within the div with the ID of
* container. The query will also only match those links with the data-method
* attribute with a value of xhr.
* i.e., <a href="index2.html" data-method="xhr">Page 2</a>
*/
function bindLinks(){
/**
* This will call forEach within the context of the query
* selector. If you're familiar with jQuery, it's the equivelant to
* $('#container a[data-method="xhr"]).each(...);
*/
[].forEach.call(document.querySelectorAll('#container a[data-method="
xhr"]'), function(el){
/**
* For every matched element, this anonymous method will be
* called. The forEach method callback accepts the returned
* object as a parameter. In this case, it will be the
* matched element now set to el.
*/
/**
* Here you add an event listener to the object. There are
* several touch event listeners such as touchend, touchcancel,
