22.2 The Javascript
Now I’m a PHP developer, so my Javascript skills aren’t going to blow anyones minds in this
chapter. If you can find a better way to perform these actions (and there are many alternatives)
then go ahead and try them, I’m sure you can do better!
First let’s create a new file called script.js and put it in public/js along with the latest version
of jQuery which in my case is simply called jquery.js. Let’s edit our main template to add
references to these files using the HTML::script() method.
1 <!-- application/views/template.php -->
2 <!DOCTYPE HTML>
3 <html>
4 <head>
5 <meta charset="UTF-8">
6 <title>My Ajax Page</title>
7 </head>
8 <body>
9 <div id="content">
10 <p>Hello and welcome to the site!</p>
11 </div>12 <a href="#" id="load-content">Load Content</a>
13
14 <!-- javascript files -->
15 <script type="text/javascript">var BASE = "<?php echo URL::base(); ?>";\
16 </script>
17 <?php echo HTML::script('js/jquery.js'); ?>
18 <?php echo HTML::script('js/script.js'); ?>
19 </body>
20 </html>
As you can see, I have referenced my Javascript files before the closing tag, so that the HTTP
requests to load them don’t block the page loading. This is a good practice to stick to. Let’s get
started and add some Javascript to our public/js/script.js file.
We also create a new BASE variable so that Javascript is aware of the base URL to our application,
we will need this later to create request URLs.
1 // public/js/script.js
2 jQuery(document).ready(function($) {
3 // perform javascript only when the document
4 // has been fully loaded
5 });
Here we are using the jQuery() object to get a handle on the current document, and adding a
ready() event with a closure to hold our code. By waiting for the document object to be ready()
we can be sure that all DOM objects have loaded, and that the jQuery library has been loaded.
You may see other examples written like this..
1 // public/js/script.js
2 $(document).ready(function() {
3 // perform javascript only when the document
4 // has been fully loaded
5 });
This is fine, but could lead to problems if other Javascript libraries chose to use the $ object at a
later date. My method uses the jQuery class, and hands the inner closure a $ which is reassigned
to the jQuery object. This prevents any collisions.
Let’s get started on creating a click event for our content loader link, there are many ways to do
this with jQuery, I am going to use the .click() method. Here we go..
1 // public/js/script.js
2 $(document).ready(function() {
3
4 $('#load-content').click(function(e) {
