CODEWITHSUNDEEP
phpjavascriptjquerymysqlajax
XoR
XoR

Reputation: 132

Tracking and Manipualting the contents via Jquery Ajax on database update

I am querying the database to retrieve contents via Jquery Ajax, and by using SetInterval function it queries the database for new contents every 1 min. My question is How can i keep track of New contents ? For ex: If database has new contents, I want to Add highlight Class to it. How can that be done ?

the Jquery code for Retrieving contents

    $(document).ready(hot_listings());
    setInterval( "hot_listings();", 10000 );

    var ajax_load = "<img class='loading' src='images/indicator.gif' alt='loading...' />";
    function hot_listings() {
            $.ajax({
                url: "hot_listing.php",
                cache: false,
                success: function(msg) {
                   $("#hot_properties").html(msg);
                }
           });
    }

Well, i am including the Php too .. 

    <?php
    include("includes/initialize.php"); 
    // hot properties, featured
        $per_page = 3;
        global $database;
        $listings = Listings::hot_listings();
        //while ($listing = $database->fetch_array($listings)) {
         foreach ($listings as $listing ) {
            $listing_id         = $listing->listing_id; //initialize listing_id to fetch datas from other table
            $photo              = Photos::find_by_id($listing_id); //initialize table photo
            $comment            = Comments::find_by_id($listing_id);
            $comment_count      = Comments::count_by_id($listing_id);
            $photo_count        = Photos::count_by_id($listing_id);

            //echo $listing['listing_id'];

     ?>

    <li><span class="imageholder">
        <a href="content.php?id=<?php echo $listing->listing_id; ?>"><img class="listingimageSmall" src="<?php if (!empty($photo->name)) { echo 'uploads/thumbs/'.$photo->name; } else { echo 'images/no-thumb-100.jpg'; } ?>" width="66" height="66" ></a>
    </span>
        <h3><a href="content.php?id=<?php echo $listing->listing_id; ?>"><?php echo ucfirst($listing->title) . ' in ' . ucfirst($listing->city) ; ?></a></h3>
        <p class="description">
        <span class="price">Rs <?php echo $listing->price;  ?></span> 

        <span class="media"> <img src="images/icon_img.jpg" alt="Images" width="13" height="12" /> <?php echo $photo_count;?> Images  &nbsp;<img src="images/comments.png" alt="Images" width="13" height="12" />  <?php echo $comment_count; ?> comments &nbsp;</span>
        </p>
    <div class="clear">&nbsp;</div>
     </li>
    <?php } // end of foreach

    ?>

Upvotes: 1

Views: 183

Answers (2)

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230531

Answer

I recommend that you change your PHP part to emit JSON data about listings.

This can be accomplished through the use of the PHP function json_encode(). You can read more about json_encode() at http://php.net/manual/en/function.json-encode.php.

Then on the client you'll be able to do this:

$.ajax({
     url: "hot_listing.php",
     cache: false,
     success: function(data) {
       last_received_listings = data;
       build_html_in('#hot_properties', data);
     }
});

In an ajax callback you memorize data that you just received and then build HTML markup out of it.

Since you know what listings you already saw, when you get new listings you'll be able to identify new ones.

       var new_listings = detect_new_listings(data, last_received_listings);
       last_received_listings = data;
       build_html_in('#hot_properties');

       highlight_listings(new_listings); // set a CSS class on a div or whatever

More details

Possible implementation of detect_new_listings

function detect_new_listings(original, new) {
  var result = [];
  for(var i = 0; i < original.length; i++) {
    var found = false;

    // find similar listing in new
    for(var j = 0; j < new.length; j++) {
      if(original[i].listing_id == new[j].listing_id) {
        found = true;
        break;
      }
    }

    if(!found) {
      result.push(original[i]);
    }
  }
  return result;
}

Upvotes: 4

Martin Dandanell
Martin Dandanell

Reputation: 851

You could put all listings inside an array in JS and then compare that with the newly fetched list from the PHP file or you could simply check on a date column containing the date for when the row was added and then through PHP; if row is earlier than 1 minute - go ahead and put a class on the HTML element.

Upvotes: 0

Related Questions