Fail-proof AJAX

Question

I'm working on a page using AJAX that will get an entire .php page when the navigation button is clicked. I have that set up and working right. But this is my first time using AJAX, so I'm not sure what the best practices are and what I can do to prevent failures and display error messages.

 $(document).ready(function() {
//set your initial page when website loads
$("#content-container").load("content/corporate.php");
// content container load content based on nav tab clicked
$("#nav-tabs-list li").click(function() {
 var page = $("a", this).attr("href"); // get the url of the tab clicked
 $("#content-container").load("content/" + page); // load content
 return false;
});
// sidebar container load content
$("#sidebar-container #sidebar-content-container").load("content/sidebar-content/poll-faq.php"); // set your sidebar initial tab
$("#sidebar-container #sidebar-tabs-container a").click(function() {
 var page = $(this).attr("href"); //get the url of the tab clicked
 $("#sidebar-container #sidebar-content-container").load("content/sidebar-content/" + page); //load content
 return false;
});
});

Answer 1

There isn't too much wrong. Your containers (#sidebar-container and #sidebar-content-container) really shouldn't need to be accessed by Ids, but more-so classes. For those types of DOM elements, utilize classes.

• 200_success: It's not obvious from the jQuery documentation, but return false suppresses both the default action and event bubbling.
• Alex L: Well thank you for pointing that out to me! I appreciate it!

Answer 2

I am puzzled by the way you add a content/ or content/sidebar-content/ prefix to the href attributes to form the URL to load. Why don't you render the page such that the href already contain the correct URL to load?

You don't need to comment every line of code. Just one comment per "paragraph" of code is sufficient.

Also, fix your indentation.

Answer 3

Sometimes you don't need to write comments when your code is clear enough. For example, you have :

// content container load content based on nav tab clicked
$("#nav-tabs-list li").click(function() {
 var page = $("a", this).attr("href"); // get the url of the tab clicked
 $("#content-container").load("content/" + page); // load content
 return false;
});

Just by reading the line $("#content-container").load("content/" + page); I can understand that you are loading the content. You don't need to repeat yourself in a comment. Comment should help understand the code, not repeat it.

Also note that comments can be "dangerous", there is no guarantee that when the code change you will update the comment. Be sure that the comments add value.