The response from this request is the full HTML markup of the movies.html page (including DOCTYPE). Once the page loads, a call to the $.get API fetches the movies.html page. The JavaScript on this page begins by registering the jQuery load handler. Listing 1: Movies page (movies.html) Movies
Dfind div elements by id js jquery movie#
The code for the movies page is available in Listing 1 which shows how each category of movie is logically contained by a SECTION element with a corresponding ID value. 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. A response with two root-level elements is not immediately select-able as the jQuery selection engine requires that query targets must have a single root element. The response from the Ajax call includes the markup of the full HTML of the page, which includes the DOCTYPE element as well as the root HTML element of the document. The jQuery selection engine is flexible enough to work on DOM elements as well as selecting against an in-memory string of markup – but there’s a catch. Once the response from the Ajax call is recognized by the browser, then a fragment of the page is extracted from the full response by using jQuery selectors on the markup returned from the static page. In order to make this scenario work, an Ajax call against the static HTML page is required. Figure 2 shows how the home page renders only the Action films on the page.įigure 2: The home page displaying only action films. While the Movies page has all the films in the system, the home page will only display a subset of the movies to users. The Figure 1 displays a static HTML page that lists movies from multiple categories in the system. The example demonstrated in this article works to fetch content fragments from static HTML files and display them on another page in the site. 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). Reasons for an approach like this vary, but common scenarios 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.
When you couple this functionality with the ability to get the full HTML markup from pages throughout your site, you can come up with some interesting ways to re-use content in your web application.Ĭonsider an application which includes content on one page that you want to display on another page. The jQuery selection engine is fast and flexible and allows you to make selections against DOM elements as well as in-memory memory markup strings.