Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Create a JavaScript Initialization File
CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY
Your app is following progressive enhancement guidelines, so all scripts will be housed in an external file
called init.js. It will reside in the public js folder (/public/assets/js/init.js), and it will contain all of
the custom jQuery code for your app.
Include the Initialization File in the Application
Before any of your scripts will be available to your app, you will need to include the initialization file in
the application. Your app will use jQuery syntax, so the initialization file needs to be included after the
script that loads the jQuery library in footer.inc.php.
You include the file in your app by inserting the following bold code into footer.inc.php:
google.load("jquery", "1");
Ensuring the Document Is Ready Before Script Execution
After creating init.js, use the document.ready shortcut from jQuery to ensure that no scripts execute
before the document is actually ready to be manipulated. Insert the following code into init.js:
// Makes sure the document is ready before executing scripts
jQuery(function($){
// A quick check to make sure the script loaded properly
console.log("init.js was loaded successfully.");
});
Save this file and load http://localhost/ in your browser with the Firebug console open. After the
file is loaded, you should see the following result appear in the console:
init.js was loaded successfully.
Creating a New Stylesheet for Elements Created by jQuery
To ensure the elements created with jQuery look right when you start building them, you’re going to
jump a bit ahead here and create a new CSS file to store styling information for the elements you’ll create
with the jQuery scripts you’re about to write.
237