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

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");
    });
});