Secrets to Selecting Elements Returned from jQuery Ajax Response Strings

This article demonstrates how to efficiently reuse content within a web application by leveraging jQuery's selection engine to extract specific HTML fragments from static pages via AJAX calls. This technique is particularly useful when dealing with legacy systems or static content where server-side data preparation isn't feasible.

Key Concepts:

jQuery's selection engine offers flexibility, working with both DOM elements and in-memory markup strings. When fetching a static HTML page using AJAX, the entire page's markup (including the DOCTYPE and root HTML element) is returned. To make this selectable with jQuery, it needs to be wrapped in a single root element (e.g., a <div>). The jQuery <code>find() method then allows for precise extraction of the desired HTML fragment.

Scenario:

Imagine an application with a "Movies" page listing films across various categories (Figure 1). The homepage, however, only needs to display a subset of these movies, for example, only the Action films (Figure 2).

Implementation:

The "Movies" page (Listing 1) logically groups movie categories within <section></section> elements, each with a unique ID.

Listing 1: Movies page (movies.html)

<h1 id="Movies">Movies</h1>

<section id="action-container">
  <h2 id="Action">Action</h2>
  <ul>
    <li>Die Hard</li>
    <li>The Matrix</li>
    <li>Raiders of the Lost Ark</li>
  </ul>
</section>

<section id="drama-container">
  <h2 id="Drama">Drama</h2>
  <ul>
    <li>A Few Good Men</li>
    <li>The Shawshank Redemption</li>
    <li>Legends of the Fall</li>
  </ul>
</section>

The homepage (Listing 2) uses jQuery to fetch movies.html via AJAX. The response is wrapped in a <div>, and the <code>find() method extracts the "Action" movie section.

Listing 2: Home page (index.html)

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

A simple stylesheet (Listing 3) provides basic styling.

Listing 3: Style Sheet (styles.css)

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

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

Conclusion:

This approach, while niche, proves valuable when selectively rendering content from existing pages without server-side modifications. The key is wrapping the AJAX response in a single root element and using jQuery's find() for targeted content extraction.

Frequently Asked Questions:

(The original FAQ section is retained, but rephrased for clarity and conciseness.)

• jQuery AJAX Response Strings: These are data (often HTML) returned by the server after an AJAX request. jQuery's $.ajax() handles the request and processing of the response.

• Selecting Elements from AJAX Responses: Use $(responseString) to create a jQuery object from the response, then use methods like .find() to select elements within that object.

• Full HTML Page Responses: A full HTML page response to a POST request usually indicates a server-side error. Check the status code (should be 200 for success) and response text for debugging.

• Retrieving HTML Portions with jQuery: The .load() method is efficient for loading specific sections of an HTML document. Use a selector after a space in the URL (e.g., $(‘#result’).load(‘ajax/test.html #container’)).

• Converting jQuery Objects to Strings: The .html() method converts a jQuery object representing HTML elements into a string containing their HTML content.