AJAX / PHP投票系统：内容没有更新的第一次点击 [英] AJAX / PHP voting system: Content not updating on first click

问题描述

测试环境： Windows 8中使用的工具 XAMMP 。 PHP和MySQL是最新的。

TESTING ENVIRONMENT: Windows 8 using the tool XAMMP. PHP and Mysql are up to date.

我的知识：启动

问：我不能立即后第一次点击获取更新的内容，只是之后的第二，它可以成为pretty的讨厌考虑到我有2种按钮，我的小票系统。是的，我说了很多话不是很多：） 是什么原因这个predicament，我该如何解决这个问题？

QUESTION: I can't get the updated content immediately after the first click, only after the second, which can become pretty nasty considering I have two kind of buttons for my little voting system. Yes, I said a lot not alot : ) What is the cause for this predicament and how can I fix this?

我的尝试：经过我的开发人员工具网​​络分析和我得到的每次点击正确的值状态200。当使用我的Firefox DOM Inspector视图我看到了一些不寻常的：在第一次点击仅 #votes 标记橙色可能表示，该公司已经受到了影响。但是，只有在同这两个按钮的div， #votes和#progress 第二次尝试，得到橙色标出，除了与更新的值。所以，我希望它在第二次点击，但不是第一个。然后，我刷新我的网页，并尝试别的东西。我点击坏，这时候第二次点击降落在好与坏的更新值在DOM。看来，如果整个流程被分割并且不会同时发生这就是为什么我推测：

WHAT I TRIED: Checked my developer tools network analysis and I get a status 200 with the correct value for every click. When using my firefox DOM inspector view I saw something unusual: upon the first click only #votes is marked in orange probably denoting that it has been affected. However, only on the second attempt on the same button both divs, #votes and #progress, get marked orange in addition with the updated values. So I expect it does on second click but not on the first one. Then I refreshed my page and tried something else. I clicked on "bad" and this time the second click landed on "good" with bad updating the value in the DOM. It seems as if the entire process is split and does not happen simultaneously which is why I speculate that:

1. 点击1：将数据发送到PHP 的
。
2. 点击2：从PHP获取数据，并在DOM显示它的

1. Click 1: Sends data to php.
2. Click 2: Gets the data from php and displays it on the DOM.

C本身的PHP $ C $与我的数据库和HTML（如果设置为提交）一起工作完全正常，所以我不认为有什么错在服务器端。到数据库的连接设置。我会很好地工作。没有错误。

The PHP code itself in conjunction with my database and HTML (if set to submit) works perfectly fine so I dont assume there is anything wrong on the server side. Connection to the database is set. My sessions work perfectly. No errors.

我的控制台显示0 JavaScript错误。

My console shows 0 javascript errors.

测试1：的 我评论了我的整个PHP code和建立一个测试变量，一个简单的字符串在我的code改值低于相应。为了我的惊喜，就单击它立即采取数据并显示我的测试变量的内容。

Test 1 : I commented out my entire php code and set up a testing variable with a simple string and changed the values in my code below accordingly. To my suprise, on clicking it immediately took the data and display the content of my testing variable.

测试2 :: 的 我删除了PHP的codeS由两个div标签，你会见下文。他们作为显示当前值的任何AJAX发生之前的占位符。我删除了这些，我得到的第一个点击更新作为容器是第一个空。虽然，在第二次点击之间，好的和坏的切换碰巧又是一个烂摊子。

Test 2 :: I removed the php codes from the two div tags which you will see below. They act as placeholders that show the current value before any AJAX happens. I removed those and I get an update on first click as the container was first empty. Although, on second click and toggling between good and bad happened to be a mess again.

测试2 :: 的配售jQuery和在头文档我的AJAX脚本没有做无论是工作（只是为了安全起见）。在此之前它是在＆LT; /身体GT; 标记

Test 2 :: Placing jquery and my AJAX script in the head of the document did not do the job either (just to be on the safe side). Prior it was before the </body> tag

• 我通过我的名为回调参数访问返回的JSON对象数据然后通过jQuery的插入HTML和CSS到各自的div容器。

• I access the returned json object through my callback parameter named data which then inserts html and css via jquery into the respective div containers.

转换jQuery的下方纯JavaScript，但没有积极的变化，可以观察到。的

的JavaScript / AJAX

function vote(type) {
    $.get('php/core/voting_system_function.php', {vote:type}, function(data) {
    $('#votes').html(data.votes_sum);
    $('#progress').css('width', data.progress);
    }, 'json');
}

---

---

HTML

---

---

HTML

• 的按钮onclick事件数据馈送到在我投票的功能参数，然后将其发送到 {投票：类型} ，然后到我的PHP文件。这让我做一些检查，看看是否点击要么是'好'或'坏'和substract或相应我的数据库添加数据。的

• The buttons onclick event feeds the data on to the parameter within my vote functions which then sends it to {vote:type} and then to my php file. This allows me to do several checks to see if the click was either 'good' or 'bad' and substract or add data accordingly in my database.

#votes 和 #progress

<div id="quality_meter">
    <div id="progress" style="width:<?php echo $progress ?>"></div>
</div>
<div id='votes'><?php echo $votes_sum ?></div>

---

---

• 应用于数据库的连接是正确的，可读的通过需要。的

  ---

  ---

  • The connection to the database is correct and readable through a require.

    这个脚本假定用户实际登录的，因为他们不能以其他方式访问的页面。正如你可以看到我正在使用两个会话变量。的

    正如你所看到的，我做检查，看看哪个按钮被点击，并查询相应。的

    的code中的最后一位通过关联数组与你所看到的变量存储的数据返回一个JSON对象，它是 votes_sum 和进度。我用 json_en code 返回我的价值的JSON再presentation。的

    The last bit of the code returns a json object through an associative array with the data stored by the variables you see there which is votes_sum and progress. I use json_encode to return the json representation of my value.

    推荐答案

    当你说你没有得到，直到第二次点击的响应，你的意思是在票votes_sum DIV没有更新了最新的票？

    When you say you're not getting the response until the second click, do you mean the "votes_sum" in the votes div isn't updating with the latest votes?

    这样做的原因是，你计算 $ vot​​es_sum 值调用 voting_system前（）函数是更新的投票，再经过 voting_system（）您移动 $ vot​​es_sum - 持平 - 以 $输出阵列。

    The reason for this is that you calculate the $votes_sum value before you call the voting_system() function which is what updates the votes count, then after voting_system() you move the $votes_sum - unchanged - to the $output array.

    这篇关于AJAX / PHP投票系统：内容没有更新的第一次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！