Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 11 ■ Using Third-Party JavaScript
You use toggle() to show and hide the code examples; however, unlike what you did with the last script, you
store the original text of the link in a property called old when you show the code and replace the link text with “Hide
Code”. You then invoke the function parseCode() with the link as a parameter when you show the code. When you
hide the code, you restore the original link text by setting the link text back to the value stored in the old parameter
before hiding the PRE element with jQuery’s hide() method.
jqueryTestAjax.js (continued)
function parseCode(o){
if(!o.nextSibling.hascode){
$.get (o.href,
function(code){
This function tests whether the PRE element following the link (which is its next sibling) has a property called
hascode, which you will set once the code has been loaded for the first time. This is necessary to avoid the script
loading the code every time the user clicks the link—instead, loading it only once. You then use the $.get()method
with the link’s href attribute value and an anonymous function as parameters. This effectively sends an request
that loads the linked document and invokes the function once the document has been loaded. You send a parameter
called code, which contains the content of the document that was loaded via XHR.
jqueryTestAjax.js (continued)
code=code.replace( /&/mg, '&' );
code=code.replace( //mg, '>' );
code=code.replace( /\"/mg, '"' );
code=code.replace( /\r?\n/g, '' );
code=code.replace( //g, '' );
code=code.replace( / /g, ' ' );
o.nextSibling.innerHTML = ''+code+'';
o.nextSibling.hascode = true;
You then use regular expressions to replace all ampersands, tag brackets, and quotation marks with their
numbered HTML entities, line breaks with , and spaces with their HTML entity before adding the result inside a
CODE element as the innerHTML property of the PRE element. You set the hascode property to true to ensure that the
next time the user clicks the link to show the code, the $.get() construct is skipped.
jqueryTestAjax.js (continued)
}
);
}
$(o.nextSibling).show();
}
}
)
All that is left to do is show the PRE element using jQuery’s show() method. Notice that you need to do that
outside $.get() the construct to make sure the code gets shown the second and subsequent times the user chooses to
show the code.
328
www.it-ebooks.info