using jquery ajax to load info from database

Question

Problem

I tried using the following

// Start method 1

var grbData = $.ajax({
     type : "GET",
     url : "http://grb.sonoma.edu:81/getgrbs.php",
     data : "start=0&perPage=3"}).responseText;

$("#ajaxDiv").html(grbData);

// End method 1

// Start method 2

$.get("getgrbs.php", { start : 0, perPage : 3},
     function(data) {
        $("#tst").html(data);
     }, "html");

// End method 2

on this page: http://grb.sonoma.edu:81/paging.php to load data from a database. Method 1 only appears to work in IE8 but only after the page is refreshed. When the page is first loaded I get a "The data necessary to complete this operation is not yet available." error.

The reason I prefer Method 1 is because it gives me access to individual rows in the table. E.g. Each row has a class, "burst." I am using

$(".burst").click(function() {
     $(".burst").css("background-color", "");
     $(this).css("background-color", "yellow");
    });

to change the color of the selected row when clicked. This only appears to work with Method 1 and not method 2.

All of the above code in encapsulated in $(document).ready(). I have tried

$("#ajaxDiv").load("getgrbs.php", { start : 0, perPage : 3});

but I get results similar to Method 2.

How can I get the click function to work with Method 2 or get Method 1 to work on all browsers without refresh? Thanks for any help I can get for this.

I need to do this in ajax (tried ajax without jquery and no luck there either) since there will be other things on the page that will not change as the user pages through the data.

Addendum to solution (better solution in answer)

After successfully using "success" I noticed that the ability to click on row and have the bg color change was gone. So I did the following, which appears to work. Not sure it if is the best way.

var grbData = $.ajax({
 type : "GET",
 url : "http://grb.sonoma.edu:81/getgrbs.php",
 data : "start=0&perPage=3",
 dataType : 'html',
 success: function (data) {
   $("#ajaxDiv").replaceWith(data);
   startInteraction();
  }
});

function startInteraction() {
    $(".burst").click(function() {
     $(".burst").css("background-color", "");
     $(this).css("background-color", "yellow");
    });
}

Answer 1

You are most likely having problems because you are trying to access elements of the page before the HTML has been completely received (or parsed) by the browser. Ensure that you have waited for the page to finish loading before trying to modify the page. The first call to your ajax method should probably occur at the onload event, or be triggered by the onload event to happen at a later time.

Answer 2

If you want to use the first one, you should pass in a async:false.

var grbData = $.ajax({
    type : "GET",
    url : "http://grb.sonoma.edu:81/getgrbs.php",
    async: false,
    data : "start=0&perPage=3"}).responseText;

The $.ajax call is asychronous so the $.ajax call will give you that message you saw about data not being ready. This of course kind of defeats the purpose of AJAX since user interaction is blocked.

A better method might be:

var grbData = $.ajax({
    type : "GET",
    url : "http://grb.sonoma.edu:81/getgrbs.php",
    dataType: 'html',  // assuming your service returns HTML
    success: function(data) {
      $("#ajaxDiv").html(data);
    }
 });

Answer 3

Try:

var grbData = $.ajax({
        type : "GET",
        url : "http://grb.sonoma.edu:81/getgrbs.php",
        data : "start=0&perPage=3",
        success: function (html) {
            $("#ajaxDiv").html(html);
        }
});

The reason it isn't working is that it's trying to use your html before it's finished loading. The code is executing faster than the result is returned.

To keep your click event, you can use .live so it will fire the event for future elements added to the page, like you ajax code.

$(document).ready( function () {
    $(".burst").live('click',function() {
        $(".burst").css("background-color", "");
        $(this).css("background-color", "yellow");
    });
});