Home arrow JavaScript arrow Retrieving Blog Comments with Ajax and jQuery
JAVASCRIPT

Retrieving Blog Comments with Ajax and jQuery


In this final installment of our series on creating a blog application using jQuery and Ajax, you will learn how to lazy-load blog comments and associate them with their relevant post. You do not want to miss this exciting conclusion!

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
May 23, 2011
TABLE OF CONTENTS:
  1. · Retrieving Blog Comments with Ajax and jQuery
  2. · Fetching blog posts and comments from MySQL
  3. · Retreiving Data from MySQL via jQuery and Ajax

print this article
SEARCH DEVARTICLES

Retrieving Blog Comments with Ajax and jQuery
(Page 1 of 3 )

Being one of the most popular JavaScript libraries currently available, itís no surprise to see many cases of systematic abuse (or misuse) of the features that jQuery provides right out the box.

Whatís really important to point out here is that itís possible to take advantage of the functionality of jQuery (or any other JavaScript framework) and build interactive, highly-dynamic user interfaces without having to sacrifice their level of accessibility, thanks to the use of Progressive Enhancement.

To give concrete proof of my claim, in the prior articles to this series, I went through the development of a basic blog application, whose main focus was to display a few blog entries alongside their related comments, which were fetched from a couple of MySQL database tables. To be honest, the application (in its current state) is entirely functional, as itís capable of performing these tasks in pretty well.

With the applicationís base behavior already in place, thereís plenty of room to be bold and add a few handy improvements. The question here though is:: how? Well, considering that jQuery comes packaged with some nifty Ajax handling methods, in this final part of the series Iím going to use one of them to lazy-load the pertaining comments on the same web page (instead of a different tab, as in our previous article). Whatís more, once the comments are fetched from their associated table, theyíll be cached in the browser, reducing the number of trips to the database.

If you missed the previous parts in this series and want to learn more, please feel free to visit our JavaScript section at: http://www.devarticles.com/c/b/JavaScript/.

Summary time: A Brief Look at the Blog Appís Source Files

Prior to demonstrating how to enhance the default behavior of the blog program created in the previous installment of this series, Iíd like to spend a few moments reintroducing its source files, so you can take a deeper look at them and grasp their underlying logic.

First off, hereís the programís index file, which is responsible for including a blog post page controller and iterating over the corresponding posts via a simple PHP template. Check it out:

(index.php)

<?php

// include the blog page controller (application logic)
require_once 'blogposts_controller.php';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My sample blog</title>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>My sample blog</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="content">
        <?php foreach ($blogPosts as $blogPost):?>
            <div class="blogpost">
                <h2><?php echo $blogPost->title;?></h2>
                <h3>Posted by <?php echo $blogPost->author;?></h3>
                <p><?php echo $blogPost->content;?></p>
                <p><a href="comments.php?id=<?php echo $blogPost->id;?>">Comments for this post...</a>
                <div id="comment_container<?php echo $blogPost->id;?>"></div>
            </div>
        <?php endforeach;?>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>



(base.css)

body {
    padding: 0;
    margin: 0;
    background: #585858;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
h1 {
    font-size: 4em;
    color: #0080ff;
}
h2 {
    font-size: 1.8em;
    color: #E87400;
    margin: 0 0 10px 0;
}
h3 {
    font-size: 1.2em;
    color: #585858;
    margin: 0 0 15px 0;
}
p {
    margin: 0 0 15px 0;
    line-height: 18px;
}
a {
    color: #0080ff;
    outline: 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    background: #fff;
}
#header {
    padding: 20px 20px 10px 20px;
}
#content {
    padding: 20px;
}
#content .blogpost {
    padding: 20px;
    margin-bottom: 15px;
    background: #f8f8f8;
    border: 1px solid #eee;
}
#content .comment {
    padding: 20px;
    margin-bottom: 15px;
    background: #eee;
}
#content p.warning {
    color: #acacac;
}
#footer {
    padding: 0 20px 20px 20px;
}
#footer h2 {
    color: #808080;
}

The landing page of the blog program has been broken down in two different segments: the first one is pure application logic and its responsibility is to retrieve blog entries from the database. The second one deals directly with presentation logic and is tasked with displaying the entries via a ďforeachĒ PHP construct.  

Of course, itís also necessary to show the elements that compose the page controllers that talk directly to MySQL, either when fetching blog posts or when pulling out the related comments. Donít worry - theyíre listed below:


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials