更新并显示最新的记录（在DB）后AJAX通过PHP更新的价值 [英] Updating and displaying the most recent record (in DB) after AJAX updates the value through PHP

问题描述

所以我设置PHP的网站如Flickr，但这些照片堪称。所以我建立的评价体系AJAX，这样，当用户点击星标打分照片，照片上的星星反映新的等级计算。 （照片的等级是由10位明星是黄色或空白表示）。

So I am setting up a PHP site like Flickr, except these photos can be rated. So I am setting up the rating system in AJAX so that when the user clicks on a star to rate the photo, the stars on the photo reflect the new rating computed. (photo's rating is depicted by 10 stars that are either yellow or blank).

星星反应，他们应该如何当你将鼠标放置到他们，他们点亮了到你的光标指向。当你点击一个明星，相应的值记录在photo_rating表和照片的表进行更新。然后，新计算等级是通过明星的体现。

The stars react how they should when you mouseover them they light up up to where your cursor is pointing. When you click a star, the corresponding value is logged in photo_rating table and updated in photo table. Then the newly computed rating is reflected through the stars.

更新的这pretty的多少都可以归结为这一呼吁没有返回正确的评价，但仍然给回原来的评级照时的页面加载。而不是已经通过AJAX（即使在DB的值已经改变）保存在数据库中，新的评价

UPDATE It pretty much all boils down to this call not returning the correct rating, it is still giving back the original rating for the photo when the page loaded. And not the new rating that has been saved in the DB through AJAX (even though the value in the DB has been changed)

onmouseout="stars_current_rating(<?php echo Photograph::find_by_id($_GET['id'])->rating;?>);"

这里的问题是：点击之后，明星们用正确的新计算等级更新。但是，当我的鼠标又回到了星星，然后鼠标移出。该星级回到原来的等级，他们在当用户第一次加载页面。这样被反射的评价是从数据库被拉扯的页面加载时。不是现在居住在照片表的收视率列的值。

HERE is the problem: After clicking, the stars are updated with the correct newly computed rating. But when I mouse back over the stars, then mouse out. The stars rating go back to the original rating they were at when the user first loaded the page. So the rating that is being reflected is what was pulled from the db when the page loaded. Not the value that is now residing in the ratings column of the photo table.

本来我是用$光电>评级，但我想既然我用AJAX的价值没有得到重新计算。于是我切换的onmouseout调用照片:: find_by_id（$ _ GET ['身份证']） - >评级;这应该通过检查它的id数据库并获取电流的额定值初始化一个新的对象。但是，即使这似乎并不能给我更新后的值。

Originally I was using $photo->rating but I figured since I used AJAX that value wasn't getting computed again. So then I switched the onmouseout to call Photograph::find_by_id($_GET['id'])->rating; which should be instantiating a new object by checking the database from its id and getting the current rating. But even this doesn't seem to be giving me the updated value.

我已经使用萤火虫，firePHP和我做的分析，看看到底是什么值被传递到这些方法时，我点击鼠标超过他们。由于某些原因，新的评价只被从DB拉出，用户投票的新值显示之后。但是，当你将鼠标放在明星，他们回去，他们什么，当你在页面加载后的任何时间。反正我有可以得到更新的价值体现在code以下，而无需刷新整个页面？如果我刷新页面，然后它的工作原理，但整个点是要做到这一切，通过AJAX使整个页面没有被重新加载...

I have used firebug, firePHP and am doing the profiling to see exactly what values are being passed into these methods when I click and mouse over them. For some reason the new rating is only being pulled from the DB, right after the user votes the new value is shown. But any time after when you mouse over the stars they go back to what they were when you loaded the page. Is there anyway I can get that updated value to be reflected in the code below without refreshing the entire page? If I refresh the page then it works, but the whole point was to do it all through AJAX so the whole page didn't have to be reloaded...

这是怎么了电话被设定在页面上。

This is how the calls are set up on the page.

        <div id="rating" class="rating">
        <?php 
            for($i=1; $i<11; $i++){
        ?>
        <a id="rating_star<?php echo $i ?>" href="#" onmouseover="decide_rating(<?php echo $i ?>);" 
        onmouseout="stars_current_rating(<?php echo Photograph::find_by_id($_GET['id'])->rating;?>);" 
        onmousedown="set_rating(<?php echo $photo->id.", ".$i ?>);">
        <img id="star<?php echo $i ?>" class="rating_star" src=
        <?php 
            // keeps stars always set at rating for photo when not being rated
            if($photo->rating >= $i){ 
                echo "images/assets/rating_star.png";
            } else {
                echo "images/assets/rating_star_off.png";
            }
        ?>
        />
        </a>
        <?php } ?>

    </div>

下面是包含使用上述onmouseactions 3（我知道我的ratings.js文件decide_rating和stars_current_rating是一样的code，它们是不同的，当我使他们设置了不同的页面，其中的逻辑是不同的，但更新不工作，所以我又回到了这个简单的例子）

Here is my ratings.js file that contains the 3 used above for onmouseactions (I understand that decide_rating and stars_current_rating is the same code, they were different when I had them set up for a different page, where the logic was different, but the updating wasn't working so I went back to this simpler example)

    // Makes stars light up, up to where you have your cursor pointing
// pass in current rating of star hovered over 
function decide_rating( r ){
    for(var i=1; i<=10; i++){
        var star = document.getElementById("star"+i);
        if(i<=r){
            star.src = "images/assets/rating_star.png";
        } else {
            star.src = "images/assets/rating_star_off.png";
        }
    }
    return false;
}

// defaults the stars to light up with the current rating
function stars_current_rating(r){
    for(var i=1; i<=10; i++){
        var star = document.getElementById("star"+i);
        if(i<=r){
            star.src = "images/assets/rating_star.png";
        } else {
            star.src = "images/assets/rating_star_off.png";
        }
    }
    return false;
}

function set_rating(pid, rating){

    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            // no message to be displayed
            //document.getElementById("message").innerHTML=xmlhttp.responseText;

            // for this to work ratings.js must be before this file when linked to
            // set_ratings is echoing the $photo->rating for the calling pid 
            // as the xmlhttp.responseText
            stars_current_rating(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET","../includes/set_rating.php?pid="+pid+"&rating="+rating,true);
    xmlhttp.send();
}

我有这样的设置了2个表在我的数据库。一个是photo_rating它具有USER_ID，photo_id和评级。照片表还具有用于其电流额定值的柱（其被计算为相应的行中photo_rating的平均值）。

I have this set up with 2 tables in my database. One is photo_rating which has the user_id, photo_id, and rating. The photo table also has a column for its current rating (which is computed as the average of the corresponding rows in photo_rating).

下面的是，AJAX调用该set_rating.php文件

Below is the set_rating.php file that the AJAX is calling

<?php
// This file is called by the ratings.js function set_rating
// echo output is used by to update the current rating of the 
// photo after it has been saved in the database

require_once('initialize.php');
// create new photo rating and set up attributes

if(isset($session->user_id)){
    $pr = new PhotoRating( $_GET['pid'], $session->user_id, $_GET['rating']);
} else {
    $pr = new PhotoRating( $_GET['pid'], NULL, $_GET['rating']);
}

// save the rating in photo_ratings table
// and the rating in the photograph table
$pr->save_rating_update_photo();

echo Photograph::find_by_id($_GET['pid'])->rating;  
?>

和这些是被称为内PhotoRating的功能

And these are the functions that are being called within PhotoRating

    // saves the current photo_rating into the database
// Then calls update photo rating up update the 
// rating in the photo database table
function save_rating_update_photo(){
    if($this->save()){
        // Success
        $message = "entry saved in photo_rating";
        //$session->message("{$photo->filename} was uploaded");     
    } else {
        // Failure
        $message = join("<br />", $this->errors);
    }

    $this->update_photo_rating();
}

function update_photo_rating(){
    $photo = Photograph::find_by_id($this->p_id);
    $newRating = ($this->rating + self::sum_all_ratings($this->p_id))/($this->count_all()+1);

    $photo->rating = $newRating%10;

    if($photo->save()){
        // Success

    } else {
        // Failure
        $message = join("<br />", $photo->errors);
    }
}

任何有识之士将AP preciated，我一直在敲打我的脑袋在桌子上，因为我开始昨天测试了这一点晚。我明白我可以重新载入页面，但我觉得这样的否定有这一切发生通过AJAX的效率。

Any insight would be appreciated, I have been banging my head on the desk since I started testing this out late yesterday. I understand I can just reload the page, but I feel like that negates the efficiency of having this all happen through AJAX.

推荐答案

在短暂地看着你的问题/问题，并检查您的直播现场的来源，这是我会怎么做：

After briefly looking at your question/issue and checking the source of your live site, here's what I'd do:

在ratings.js，在顶部添加：

In ratings.js, at the top, add:

// Global variable to hold the current rating
var star_rating = 0;

修改 stars_current_rating（R）到

// defaults the stars to light up with the current rating
function stars_current_rating(){ // no "r"
    for(var i=1; i<=10; i++){
        var star = document.getElementById("star"+i);
        if(i<=star_rating){ // !!!
            star.src = "images/assets/rating_star.png";
        } else {
            star.src = "images/assets/rating_star_off.png";
        }
    }
    return false;
}

在 set_rating（PID，评价），改变当前行48到这样的：

In set_rating(pid, rating), change current row 48 into this:

star_rating = xmlhttp.responseText;
stars_current_rating();

在 photo.php ，每个 A ，修改的onmouseout 到

onmouseout="stars_current_rating();"

之所以你没有得到你所期望的结果是评级的价值是很难codeD插入的onmouseout 函数调用。有在JavaScript中，与XMLHTTP响应变化的变量是至关重要的。

The reason why you don't get the result you expect is that the value of the rating is hard coded into the onmouseout function call. Having a variable in javascript that changes with the xmlhttp response is crucial.

对于这项工作时，页面加载，以及，使该设置 star_rating 正常（通过脚本部分photo.php ＆LT ;? PHP的echo照片:: find_by_id（$ _ GET ['身份证']） - ＆GT;评级;＆GT; ）

For this to work when page loads as well, make a script part in photo.php that sets the star_rating properly (via <?php echo Photograph::find_by_id($_GET['id'])->rating;?>)

希望这有助于！

这篇关于更新并显示最新的记录（在DB）后AJAX通过PHP更新的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！