到达页面底部时，在站点中自动加载新的评级/启动系统数据

Question

I have a call to an autoload function in my index.php file to load more data when reach the bottom of the page. I also define here the style for my rating (stars):

<style>
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
var track_load = 0; //total loaded record group(s)
    var cityname = '<?=$city;?>';
var loading  = false; //to prevents multipal ajax loads
var total_groups = <?=$total_groups;?>; //total record group(s)
    var total_rows = <?=$get_total_rows;?>;

$('#results').load("autoload_process.php",     {'group_no':track_load,'nameofcity':cityname}, function() {track_load++;}); //load first group
$(window).scroll(function() { //detect page scroll

    if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
    {
        if(track_load <= total_groups && loading==false) //there's more data to load
        {
            loading = true; //prevent further ajax loading
            $('.animation_image').show(); //show loading image
            //load data from the server using a HTTP POST request
            $.post('autoload_process.php',{'group_no': track_load, 'nameofcity':cityname}, function(data){
                $("#results").append(data); //append received data into the element
                //hide loading image
                $('.animation_image').hide(); //hide loading image once data is received
                track_load++; //loaded group increment
                loading = false; 
            }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
                alert(thrownError); //alert with HTTP error
                $('.animation_image').hide(); //hide loading image
                loading = false;
            });
        }
    }
});
});
</script>

Then in my autoload_process.php I retrieve info from my data base and I print it. One of the info I retrieve and print is the rating. I also have in this file my script to print the rating.

<script type="text/javascript">
$(function() {
$('span.stars').stars();
});

$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
</script>

    $db = pg_connect("$db_host $db_name $db_username $db_password");
    $query = "SELECT * FROM table;
    $rating = $myrow[rating];
    echo '<span class="stars">'; 
    echo $rating;
    echo '</span>'; 

When the page is load for the first time everything works fine but the problem I have is that when I scroll all the way to the bottom and the page is reload with the new info the rating changes. It seams that everytime that a new set of data is loaded all the previous ratings are set to the value of the first item of all (Hotel 1 as per example)

Example: (let's say that I load 3 results at a time)

First Load:

Hotel 1 -->  Rating 5  (This is correct)    
Hotel 2 -->  Rating 4  (This is correct)    
Hotel 3 -->  Rating 3  (This is correct)

Now I get to the bottom of the page and the next info is loaded (second load):

Hotel 1 -->  Rating 5  (This is INCORRECT) filled with first value (Hotel1)    
Hotel 2 -->  Rating 5  (This is INCORRECT) filled with first value (Hotel1)    
Hotel 3 -->  Rating 5  (This is INCORRECT) filled with first value (Hotel1)    
Hotel 4 -->  Rating 2  (This is correct)    
Hotel 5 -->  Rating 1  (This is correct)    
Hotel 6 -->  Rating 3  (This is correct)

Now I get to the bottom of the page and the next info is loaded (third load):

Hotel 1 -->  Rating 5  (This is INCORRECT) filled with first value (Hotel1)    
Hotel 2 -->  Rating 5  (This is INCORRECT) filled with first value (Hotel1)    
Hotel 3 -->  Rating 5  (This is INCORRECT) filled with first value (Hotel1)    
Hotel 4 -->  Rating 5  (This is INCORRECT) filled with first value (Hotel1)    
Hotel 5 -->  Rating 5  (This is INCORRECT) filled with first value (Hotel1)    
Hotel 6 -->  Rating 5  (This is INCORRECT) filled with first value (Hotel1)    
Hotel 7 -->  Rating 3  (This is correct)    
Hotel 8 -->  Rating 2  (This is correct)    
Hotel 9 -->  Rating 1  (This is correct)

Any help would be appreciated

Answer 1

In your autoload script the $query seems to be partially missing? There's no LIMIT or OFFSET. For the offset might want to use the group_no (very odd name, did you ever hear of naming conventions?) that you request the data with.

A side-note, when you request data from the server you should use a GET request, only when you send data to the server you use POST. $.load does set a GET request but it's the $.post a few lines down that's wrong.