javascript x-editable 的成功回调不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22590621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Success callback of x-editable is not working
提问by rednivlat
I have been able to successfully implement x-editable to create new user and subsequently post changes to the DB. Everything is working fine in this regard.
我已经能够成功地实现 x-editable 来创建新用户并随后将更改发布到数据库。在这方面一切正常。
I wanted to use the numeric entry of a field and do some arithmetic operations on it and display the result in a different div.
我想使用字段的数字条目并对其进行一些算术运算并将结果显示在不同的 div 中。
I created this fiddle: http://jsfiddle.net/Mdcfh/
我创建了这个小提琴：http: //jsfiddle.net/Mdcfh/
which displays my setup. This fiddle works fine, but when I implement exactly the same in my code, nothing happens in the call back.
显示我的设置。这个小提琴工作正常，但是当我在我的代码中实现完全相同时，回调中没有任何反应。
I am appending the relevant portions of my code below:
我在下面附加我的代码的相关部分：
HTML
HTML
<div id="msg_units" style="display:none">Saved!</div>
<table class="table table-condensed table-hover">
<thead>
<tr>
<td class="text-left hide800"><strong>Name</strong></td>
<td class="text-center"><strong>Price</strong></td>
<td class="text-center"><strong>Quantity</strong></td>
<td class="text-right"><strong>Totals</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left hide800"><?php echo $_REQUEST['title']?></td>
<td class="text-center"><i class="fa fa-inr"></i><strong><span class="price" id="unit_cost"><?php echo $_REQUEST['cost']?></span></strong></td>
<td class="text-center"><a href="#" class="myeditable qty" id="num_units" data-type="text" data-pk="3" data-name="num_units" data-title="How many are going?"></a></td>
<td class="text-right"><i class="fa fa-inr"></i><strong><a href="#" id="exp_total"></a> </strong></td>
</tr></tbody></table>
JS
JS
//editables
$('#num_units').editable({
url: 'post.php',
ajaxOptions: { dataType: 'json' },
display: function(value, response) {
return false; //disable this method
},
success: function(response, newValue) {
var current_pk = $(this).data('pk');
$('#exp_total').html(3*7200);
$('#msg_units').text(current_pk).show();
if (response && response.units) {
$('#msg_units').text(response.units*5).show();
}
}
});
POST.PHP
POST.PHP
$result = mysql_query('update mytable set '.mysql_escape_string($name).'="'.mysql_escape_string($value).'" where id = "'.mysql_escape_string($pk).'"');
$yes[] = array(
'success' => 'true',
'msg' => 'update success for',
'value' => $value
);
if ($result != false) {
// echo json_encode($yes);
echo '{"units": "3"}';
// echo '{"success": "true"}';
} else {
$no[] = array(
'success' => 'false',
'msg' => 'update failed for' .mysql_escape_string($name),
'value' => $value
);
echo json_encode($no);
}
The post.php code is working, all my editables are updating successfully. But I have not been able to make the success callback work at all. None of the statements written in the success callback work (they work in the browser console though).
post.php 代码正在运行，我所有的可编辑内容都已成功更新。但是我根本无法使成功回调起作用。在成功回调中编写的所有语句都不起作用（尽管它们在浏览器控制台中起作用）。
Here's another fiddle which uses the real code. The fiddle: http://jsfiddle.net/8meZ8/1/
这是另一个使用真实代码的小提琴。小提琴：http: //jsfiddle.net/8meZ8/1/
I am fairly new to this, I am sure there is some obvious omission. Any help will be greatly appreciated! Thanks in advance!!
我对此很陌生，我相信有一些明显的遗漏。任何帮助将不胜感激！提前致谢！！
UPDATE for @brutallord
更新@brutallord
I use this in my post.php for generating response:
我在我的 post.php 中使用它来生成响应：
$yes[] = array(
'success' => 'true',
'msg' => 'update success for',
'value' => $value
);
if ($result != false) {
echo json_encode($yes);
//echo '{"units": 3}';
// echo '{"success": "true"}';
} else {
$no[] = array(
'success' => 'false',
'msg' => 'update failed for' .mysql_escape_string($name),
'value' => $value
);
echo json_encode($no);
}
I will like to highlight that, submitting a new user works fine. In which case, I am posting to a different file newuser.php which sends a response as given below:
我想强调一点，提交新用户工作正常。在这种情况下，我将发布到一个不同的文件 newuser.php，它会发送如下所示的响应：
if ($result != false) {
echo '{"id": '. mysql_insert_id() .'}';
} else {
echo "Error:" . $maxid . $_POST['buyer_email'] . $_POST['buyer_contact_no'] . $_POST['buyer_full_name'];
}
The success callback function for newuser works like a charm with the above response.
newuser 的成功回调函数就像上述响应的魅力一样。
采纳答案by rednivlat
I figured out the solution:
我想出了解决方案：
It was a plain error of Javascript code flow. Editables seems to be particularly finicky about it. Moved the code blocks (editable declarations) in proper sequence (in the expected sequence of their run) and everything started working like a charm.
这是 Javascript 代码流的一个明显错误。可编辑似乎对它特别挑剔。以适当的顺序（按照其运行的预期顺序）移动代码块（可编辑声明），一切都开始像魅力一样工作。
A particular case needs highlighting - If editable is initiated earlier in the code like so,
特殊情况需要突出显示 - 如果像这样在代码中更早地启动了可编辑，
$(selector).editable({
url: 'post.php',
})
Make sure that the validation/success/error code is just below it, to avoid code flow issues like I faced. Ideally would suggest, skipping separate initialization. Just declare globals in the beginning and then use editables below.
确保验证/成功/错误代码就在它的下方，以避免像我遇到的代码流问题。理想情况下会建议，跳过单独的初始化。只需在开始时声明全局变量，然后使用下面的可编辑对象。
Thanks everyone for responding.
谢谢大家的回复。
回答by brutallord
Seems to be so, that success callback uses answer from server as JSON, but may be you have not send that:
似乎是这样，成功回调使用来自服务器的回答作为 JSON，但可能您还没有发送：
header('Content-type:application/json')
?
?
回答by Ahmad Halah
<?php
$yes = array('success' => true,'msg'=>'Done');
$no = array('success' => false,'msg'=>'no');
header('Content-type:application/json');
echo json_encode($yes);
And js code
和js代码
$('tr #name,tr #job').editable({
type:'text',
ajaxOptions: { dataType: 'json' },
url: 'editable-request/update-trainee.php',
display: function(value, response) {
return false; //disable this method
},
success: function(response, newValue) {
if(!response.success) {
return response.msg;
}else{
alert(response.msg);
} });
That is working for me
这对我有用
