Loading HTML Snippets from the Server (^) ❘ 199
.next(). this references the element, and next() causes the next sibling element to be selected,
which is the
element. Then the load() method is chained directly to that selection. By chaining
the load() method to the selection, you’re telling jQuery where you want the HTML snippet to be
inserted in the DOM.
The load() method otherwise works similarly to the other AJAX request methods that jQuery
provides: You specify the URL of the document you want to request in the fi rst argument. You can
include an optional second argument that includes data that you want to send to the server via a GET
request, and the third parameter is a callback function that is executed upon success of the request.
Both providing data to send to the server and specifying a callback function are optional—if you
like, you can simply call the load() method with only a URL, and that will work just fi ne as well.
The server responds with a snippet of HTML that is loaded directly into the document. The follow-
ing is what the HTML snippet being loaded looks like:
The preceding is the HTML snippet that is loaded upon clicking the arrow for the /Users folder. I’ve
prepared HTML snippets for each of the top-level folders. In the source code download for this book,
each of these is named using a numeric directory id. For example, /Applications has the id 5175, /Library
has the id 5198, and so on. Each of these numeric ids is embedded in the data-id attribute of the
element with class name folderTreeDirectory that is present in the structure for each folder. Upon
requesting the folder contents, the embedded numeric id is extracted with the following:
$(this).prev().data('id')
The preceding starts out at the![]()
element, where the click originated, which is the $(this) portion of
the code. Then you navigate to the preceding sibling with the prev() method and access its id attribute
with data('id'). That’s used to construct the fi lename of the HTML snippet to be loaded, which again
wouldn’t normally be requested as a static HTML fi le—for this kind of thing, you want a server-side
script to do the heavy lifting. Each HTML snippet is located in a subfolder called Example 7-4.
[http://www.it-ebooks.info](http://www.it-ebooks.info)
the load() method to the selection, you’re telling jQuery where you want the HTML snippet to be
inserted in the DOM.
The load() method otherwise works similarly to the other AJAX request methods that jQuery
provides: You specify the URL of the document you want to request in the fi rst argument. You can
include an optional second argument that includes data that you want to send to the server via a GET
request, and the third parameter is a callback function that is executed upon success of the request.
Both providing data to send to the server and specifying a callback function are optional—if you
like, you can simply call the load() method with only a URL, and that will work just fi ne as well.
The server responds with a snippet of HTML that is loaded directly into the document. The follow-
ing is what the HTML snippet being loaded looks like:
Shared
class="folderTreeHasChildren" data-id="31491s" alt="+"
title="Click to expand." />
johnappleseed
class="folderTreeHasChildren" data-id="698482s" alt="+"
title="Click to expand." />
The preceding is the HTML snippet that is loaded upon clicking the arrow for the /Users folder. I’ve
prepared HTML snippets for each of the top-level folders. In the source code download for this book,
each of these is named using a numeric directory id. For example, /Applications has the id 5175, /Library
has the id 5198, and so on. Each of these numeric ids is embedded in the data-id attribute of the
element with class name folderTreeDirectory that is present in the structure for each folder. Upon
requesting the folder contents, the embedded numeric id is extracted with the following:
$(this).prev().data('id')
The preceding starts out at the
the code. Then you navigate to the preceding sibling with the prev() method and access its id attribute
with data('id'). That’s used to construct the fi lename of the HTML snippet to be loaded, which again
wouldn’t normally be requested as a static HTML fi le—for this kind of thing, you want a server-side
script to do the heavy lifting. Each HTML snippet is located in a subfolder called Example 7-4.
[http://www.it-ebooks.info](http://www.it-ebooks.info)