jQuery AJAX $_POST on document.ready?

Question

I'm about a week into learning PHP, jQuery and AJAX and am picking up quickly. I'm building a new video website with a comment system that I need a little help on. The site shows a list of video thumbnails, and when the user clicks the thumbnail, jquery automatically changes the html on that page to show the correct video:

    $(".thumbnailcontainer img").click(function() {

 var yt_vid = $(this).attr("id");

 $("#youtube").fadeOut(300, function() {
  //$("#content").append('<img src="img/design/icons/loading.gif" alt="Currently Loading" id="loading" class="loading" />');
  $("#youtube").replaceWith('<object id="youtube" type="application/x-shockwave-flash" style="width:640px; height:385px; display:none;" data="http://www.youtube.com/v/' + yt_vid + '&hl=en_US&fs=1&hd=1"><param name="movie" value="http://www.youtube.com/v/' + yt_vid + '&hl=en_US&fs=1&hd=1" /><param wmode="transparent"><\/param><\/object>');
  /*$("#loading").fadeOut(500, function() {
   $(this).remove();
  });*/

  $('#youtube').fadeIn(1000);
 });

(I temporarily commented out the loading icon because im'm trying to figure out how to display it on top of the youtube video instead of being pushed down underneath it... if you can answer this question, bonuspoints for you.)

Anyway, depending on which video is showing, I need for the comments associated with that video to display underneath. I wanted the comments to change dynamically onclick as well, so I created this code:

    //Send POST data to PHP script to switch to correct comments
//Select Thumbnail's second parent's ID attr on click
 var commentsID = $(this).parents("div:eq(1)").attr("id");

 $.ajax({
  url: 'php/comments.inc.php',
  type: 'POST',
  data: 'commentsID=' + commentsID,
  success: function(html) {
    $('#comments').html(html);
    $("#db").attr("value", '' + commentsID + '');
  }
 });
});

This essentially grabs the MySQL table name from the thumbnail's id attribute, posts it to a script which returns the correct comments, and sets a hidden form value which will tell the form which table to post the comments to.

In order to determine the most recently added video and return the correct comments, my thought was to send an ajax post with the first thumbnail's table identifier on the document's load to a script and have the returned comments appended and form hidden value set via ajax.

My question is- is the above practice a bad idea? That is to say, to me, it seems inefficient to make so many post requests to switch to the proper comments - isn't this something that is resource intensive? Also, is it safe to have my database table names readily visible in the id attribute of my thumbnails in order for my script to tell which database to connect to?

Thanks for all your help and any suggestions along the way. This is my first post here and it seems like a very useful website.

Answer 1

Having a single, or even a couple ajax requests on page-load might actually speed up your loading time just a little bit due to its asynchronous nature. It's fairly common for people to make a few ajax requests on load, and its a technique that make page loads feel faster.

You might consider returning a more standardized data type back, though. If you sent back the content and meta data from the comments in a json string, you could build the comments yourself and save a significant amount of transfer (all just repeated html tags).

Another trick employed by several websites is to hinge the loading of the comments to the viewport area. If the comments can't be seen (if they are below the fold), then there isn't much reason to load them. Then when/if the user scrolls down, you can make the request at that point.

As far as bonus points for the flash video, you'll want to look into a parameter known as wmode and set it to transparent. You also might consider using a standardized swf injection tool like swfobject (or it's jquery plugin version) to add these videos to the page.

Answer 2

Doh, I can't post comments so I'll post it here.

Dave, you might want to use the loading.gif for when loading the comments. The script that displays the YouTube video will run instantly without any delay since it's just injection HTML onto the page. The actual loading of the video is independent of your page.

As for the loading.gif pushing down the video, you'll need to do a CSS position:absolute; with a z-index higher than 1 on that image. This will take the image of out context from the flow of the page and allow it to overlay the video. You can center position the image by using the top and left CSS properties. Make sure your image and video are instead a container that has position:relative;.