Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.9k views
in Technique[技术] by (71.8m points)

using jquery ajax to load info from database

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");
    });
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...