Show sourcecode

<?php
// ===========================================================================================
//
// index.php
//
// Description: Home page for the site.
//
//
// Author: Mikael Roos
//


// -------------------------------------------------------------------------------------------
//
// Error handling on/off
//
error_reporting(E_ALL | E_STRICT);
$debug = "";
$debugEnable = FALSE;  // TRUE to enable debugging, FALSE to not print out debug information


// -------------------------------------------------------------------------------------------
//
// Take care of GET variables
//
//$getId = (empty($_GET['id']) ? "" : $_GET['id']);


// -------------------------------------------------------------------------------------------
//
// The content of the page
//
$html = <<<EOD
<div class="revisionhistory">
<p>Revision history:<br>
2010-09-27: (B) Corrected auto-numbering using counters.<br>
2010-02-04: (A) First revision.</p>
<p>Author: Mikael Roos, mos@bth.se</p>
</div>

<article class=numbered>
<h1>Getting to know jQuery</h1>
<p>
This tutorial is used in the course dbwebb2. More information available on the course-blog (swedish).
</p>
<p class="intendent"><a href="http://db-o-webb.blogspot.com/">http://db-o-webb.blogspot.com/</a></p>
</dl>

<h2>Going through the tutorial "How jQuery works"</h2>
<p>
Do it on your own and use below examples as reference. View the sourcecode to see how its done.
The tutorial is available at:
</p>
<p class="intendent">
<a href="http://docs.jquery.com/How_jQuery_Works" target="_blank">http://docs.jquery.com/How_jQuery_Works</a>
</p>

<h3>Lets do it</h3>
<p><a href="1.php" target="_blank">Step 1: jQuery: The Basics</a></p>
<p>
Do not forget to download the minified version of jQuery.
</p>
<p><a href="2.php" target="_blank">Step 2: Launching Code on Document Ready</a></p>
<p><a href="3.php" target="_blank">Step 3: Complete example</a></p>
<p><a href="4.php" target="_blank">Step 4: Adding and Removing a CSS Class</a></p>
<p><a href="5.php" target="_blank">Step 5: Callback and Functions</a></p>
<p>
The last step was not so straight forward, but I made it work. I had to do some changes 
to the code. This is really a AJAX request. Cool. Now we know AJAX...
</p>

<h2 class="number">A closer look at the jQuery AJAX API</h2>
<h3 class="number">A synchronous AJAX request</h3>
<p>
The tutorial has ended, but lets check out this AJAX a bit more. In the last exemple there was a 
link to the jQuery API for AJAX. Lets check it out. Just quickly go through the functions/methods
to see what they can do.
</p>
<p class="intendent"><a href="http://api.jquery.com/category/ajax/" target="_blank">http://api.jquery.com/category/ajax/</a></p>
<p>
Lets take a closer look at the function $.get(), or jQuery.get() as its also called. Read its
manual page to get an example of jQuery documentation of its API.
</p>
<p class="intendent"><a href="http://api.jquery.com/jQuery.get/" target="_blank">http://api.jquery.com/jQuery.get/</a></p>
<p>
I tested the last example on the page. It's a real nice and small example on using get and 
defining the callback in the same lines of code.
<code>
</code>
<p>
<p><a href="6.php" target="_blank">Step 6: AJAX example using $.get()</a></p>
<p>
I also decided to "upgrade" to the latest version of jQuery (1.4.1 as we speak). 
</p>

<h2 class="number">Taking care of the result, manipulating through DOM</h2>
<h3 class="number">Display the result from a AJAX request</h3>
<p>
It would be nice to display the results from an AJAX request. Lets try to display the content 
of the page retrieved. Lets display it as part of the current page by replacing the html-content of a DOM object.
</p>
<p><a href="7.php" target="_blank">Step 7: Updating current document with results from Ajax request</a></p>
<p>
Use the following pages as reference when finding out how the example works.
</p>

<h4 class="number">Setting the content of a DOM object</h4>
<p>
How to set the html-content of a DOM object in current page.
</p>
<p class="intendent"><a target="_blank" href="http://api.jquery.com/html/">http://api.jquery.com/html/</a></p>

<div class="code">
<strong>$(".result").html(</strong>data.replace(/&lt;/g, "&amp;lt;").replace(/&gt;/g, "&amp;gt;"));<br>
...<br>
&lt;pre <strong>class="result"</strong>>No result yet.&lt;/pre&gt;<br>
</div>

<h4 class="number">Use event object to get href</h4>
<p>
How to get the link (href) from the event object.
</p>
<p class="intendent">
<a target="_blank" href="http://api.jquery.com/category/events/event-object/">http://api.jquery.com/category/events/event-object/</a><br>
<a target="_blank" href="http://api.jquery.com/event.target/">http://api.jquery.com/event.target/</a><br>
<a target="_blank" href="http://www.whatwg.org/specs/web-apps/current-work/#the-a-element">http://www.whatwg.org/specs/web-apps/current-work/#the-a-element</a>
</p>

<div class="code">
$.get(<strong>event.target.href</strong>, function(data){
</div>

<h4 class="number">Use regular expression to strip html</h4>
<p>
How to replace all occurences of &lt; and &gt; with &amp;lt; and &amp;gt; using the JavaScript function String.replace().
</p>
<p class="intendent"><a target="_blank" href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String/replace">https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String/replace</a></p>

<div class="code">
$(".result").html(data.<strong>replace(/&lt;/g, "&amp;lt;").replace(/&gt;/g, "&amp;gt;")</strong>);
</div>

<h2 class="number">Summary</h2>
<p>
To be able to get the full ability out of the jQuery library, one must be able to navigate through
JavaScript Core, jQuery library and DOM.
</p>
<p>
There might be a simpler way, and that would be to try out the 
existing examples and tutorials on the jQuery site. Doing so one can slowly learn these concepts and still be 
able to quickly use the power of JavaScript on a website. But, remember I told you, try to learn JavaScript and DOM 
from the bottom. 
</p>
<p>
Enjoy.
</p>
<p>&nbsp;</p>

</article>

EOD;


// -------------------------------------------------------------------------------------------
//
// Create and print out the html-page
//
$title         = "Testing jQuery";
require_once('page.php');


?>