Using jquery ajax to load information from database
Problem
I have 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
See this page: http://grb.sonoma.edu:81/paging.php to load data from the database. Method 1 only works in IE8 but only after page refresh. When the page is loaded, I get "Data required to complete this operation is not yet available." mistake.
The reason why I prefer method 1 is because it gives me access to individual rows in the table. For example. Each line has a "burst" class. I use
$(".burst").click(function() {
$(".burst").css("background-color", "");
$(this).css("background-color", "yellow");
});
to change the color of the selected row when clicked. This seems to only work with method 1, not method 2.
All of the above code is wrapped in $ (document) .ready (). I tried
$("#ajaxDiv").load("getgrbs.php", { start : 0, perPage : 3});
but I am getting results similar to method 2.
How can I get the click function to work with method 2, or get method 1 to work in all browsers without refreshing? Thanks for any help I can get for this.
I need to do this in ajax (tried ajax without jquery and no luck there) since there will be other things on the page that won't change like user pages through data.
Adding to solution (better solution in answer)
After using "success" successfully, I noticed that the ability to click on the line and change the bg color was gone. So I did the following which seems to work. Not sure if this 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");
});
}
source to share
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 doesn't work is because it tries to use your html before it finishes loading. The code runs faster than the result is returned.
To keep the click event alive, you can use .live to trigger the event for future elements added to the page, like your ajax code.
$(document).ready( function () {
$(".burst").live('click',function() {
$(".burst").css("background-color", "");
$(this).css("background-color", "yellow");
});
});
source to share
If you want to use the former, you must pass async:false
.
var grbData = $.ajax({
type : "GET",
url : "http://grb.sonoma.edu:81/getgrbs.php",
async: false,
data : "start=0&perPage=3"}).responseText;
The call $.ajax
is asynchronous, so the $ .ajax call will give you the message you saw that the data is not ready. This of course defeats the purpose of AJAX since user interaction is blocked.
The best way 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);
}
});
source to share
You are most likely in trouble because you are trying to access the elements of the page before the HTML is fully received (or parsed) by the browser. Make sure you wait for the page to finish loading before trying to change the page. The first call to your ajax method should probably happen on the onload event, or be triggered by the onload event, which will happen later.
source to share