Selecting Elements Returned from jQuery Ajax Response Strings Explanation With An Example

The jQuery selection engine is readily adaptable and fast. It makes selections against DOM elements as well as in-memory memory markup strings. When you join this functionality with the ability to get the full HTML markup from pages throughout your site, you have most interesting ways to re-use content in your web application.

Abstract:

Consider an application which includes data on one page into another page. Reasons are vary to this approach, but common things include working with legacy or “black box” systems where you have no control over the server implementation or where you are working with static content. In the end both “black box” and static content circumstances afford you no opportunity to prepare data on the server into typical Ajax response messages (i.e., JSON or XML).

Here consider an example that works to fetch content fragments from static HTML files and display them on another page in the site. The Fig. 1 shows a static HTML page that contains movies list from multiple categories in the system.

Fig.1 Full Movies List Page

The Movies List page has all the films in the system, the home page will only display a subset of the movies to users.

Figure 2 displays how the home page gives only the Action films on the page.

Fig.2: The home page displaying only action films

To make this an Ajax call against the static HTML page is required. Once the response from the Ajax call is identified by the browser, then some part of the page is extracted from the full response by using jQuery selectors on the markup returned from the static page.

The response from the Ajax call includes, which includes the DOCTYPE element as well as the root HTML element of the document (i.e. the markup of the full HTML of the page). The jQuery selection engine requires that query targets must have a single root element not two root-level elements. This issue is resolved by manually adding a root element to the response string which is done by wrapping it in a logical container like a DIV element.

Code

The Movies List page code is in List 1 which shows how each category of movie is divided by a SECTION element with a corresponding ID value.

List 1: Movies List page (movieslist.html)


<h1>Movies List</h1>
<section>
<h2>Action</h2>
<ul>
<li>Die Hard</li>
<li>The Matrix</li>
<li>Raiders of the Lost Ark</li>
</ul>
</section><section>
<h2>Drama</h2>
<ul>
<li>A Few Good Men</li>
<li>The Shawshank Redemption</li>
<li>Legends of the Fall</li>
</ul>
</section>

The home page code is in List 2 which includes only a single structural element found in a DIV tag which acts as a shell for the content rendered on the page.

List 2: HOME page (home.html)

$(function () {
$.get('movieslist.html', function (response) {
var source = $('
<div>' + response + '</div>
');
$('#movieslist').html(source.find('#action-container').html());
});
});

By registering the jQuery load handler the JavaScript on this page starts. Once the page loads, a call to the $.get API finds the movieslist.html page. The response from this request is the full HTML markup of the movieslist.html page. The raw markup is not primarily select-able the string is overjoyed with a root DIV element and is then instantiated as a jQuery object, making it ready for processing by the selection engine.

To discover the desire part of HTML in the Movies page, the find API is used to query the descendants of the full markup and return only the elements needed for the home page. Once the data part is identified, it’s then feed into the innerHTML of the content host element by using the jQuery html function against the DIV with the ID of movies.

Finally, List 3 contains the common styles used in each page to apply some minimal styling to the pages.

List 3: Style Sheet (styles.css)

body, html
{
padding:4px;
margin:0px;
}

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}