(^200) ❘ CHAPTER 7 AJAX
After the request is made, the following callback function is executed:
function()
{
$(this)
.show()
.prev()
.attr('src', arrow);
}
The callback function is executed within the context of the
element with the class name folder-
TreeBranchWrapper; this refers to that
TreeBranchWrapper; this refers to that
element. By default, all the
elements with the class
name folderTreeBranchWrapper are hidden by the inclusion of display: none in the style sheet; calling
jQuery’s show() method makes the
name folderTreeBranchWrapper are hidden by the inclusion of display: none in the style sheet; calling
jQuery’s show() method makes the
visible. Now all that’s left to do is to change the orientation
of the arrow from pointing right to pointing down to indicate that the folder is open, which is what
the second bit of code in the callback function does. It changes the image referenced in the src attri-
bute of the
of the arrow from pointing right to pointing down to indicate that the folder is open, which is what
the second bit of code in the callback function does. It changes the image referenced in the src attri-
bute of the
element’s preceding sibling, which is the ![]()
element housing the arrow.
That leaves what happens if the folder is already loaded:
}
else
{
$(this).next().toggle();
if ($(this).attr('src').indexOf('down') != -1)
{
arrow = 'tree/right.png';
}
$(this).attr('src', arrow);
}
If the folder already exists, you want to toggle the display of the folder on and off with each click of
the arrow. The call to $(this).next().toggle() does exactly that: If the
That leaves what happens if the folder is already loaded:
}
else
{
$(this).next().toggle();
if ($(this).attr('src').indexOf('down') != -1)
{
arrow = 'tree/right.png';
}
$(this).attr('src', arrow);
}
If the folder already exists, you want to toggle the display of the folder on and off with each click of
the arrow. The call to $(this).next().toggle() does exactly that: If the
element is visible, it’s
made invisible, and vice versa. The second bit of code toggles the orientation of the arrow by
toggling between the right.png and down.png images.
made invisible, and vice versa. The second bit of code toggles the orientation of the arrow by
toggling between the right.png and down.png images.
Dynamically Loading JavaScript
Another useful and innovative feature of jQuery is its capability to dynamically and asynchronously
load JavaScript documents using its AJAX API. As covered in Chapter 1, “Introduction to jQuery,”
it is a recommended best practice to split JavaScript development into smaller, easier-to-digest
modules that have narrowly focused tasks. Another technique that goes hand-in-hand with modu-
lar JavaScript development is loading the minimal required JavaScript at the initial page load and
dynamically loading additional JavaScript via AJAX as it is needed to save page load time and to
make applications more responsive.In addition to modular JavaScript development, another reason you may want to load JavaScript via
AJAX is to have JavaScript that changes dynamically, depending on user actions, or when you need
to load more-complex applications that vary depending on user input or context.