Question

我有一个小问题，我正在尝试用jquery创建一个内联编辑系统。因此，当用户点击表字段时，innerhtml将变为输入字段，其中包含表字段的内容。 Onblur此输入字段保存在mysql数据库中，innerhtml更改回新内容。我希望用户多次编辑同一文本。如果我使用.live('click',function(){});每次用户点击表字段时，都会添加输入，因此我将输入替换为输入，其中包含最后一个输入的值。非常讨厌，我使用.one函数解决了这个问题，但现在用户只能编辑一次每个表字段！有没有办法在ajax呼叫完成之前禁用直播事件？

Jquery

$(document).ready(function(){
var id = 0;
$('table.editable td').one('click', function(event) {      

    var content = $(this).html();
    id = $(this).parent().find('.id').val();
    var class = $(this).attr('class');

    $(this).html('<input type="text" id="editablefield" name="'+class+'" value="'+content+'"/>');

    $(this).unbind(event);   
});

$('#editablefield').live('blur', function() {
    var value = $(this).val();
    var name = $(this).attr('name');
    $.ajax({
        type: "POST",
        url: "modules/Events/ajax/saveField.php",
        data: "id="+id+"&val="+value+"&type="+name,
        success: function(data) {
            var data = data;
            alert(data);
        },
        error: function(request, status, error) {
            alert(request.responseText);
        }
    });

    $(this).parent().html(value);
});

});

THE FRONTEND

<?php
$query = "SELECT * FROM mod_events";
$result = mysql_query($query) or die(mysql_error());



echo "<table class='editable'>";

echo "<tr>";
echo "<th></th>";
echo "<th>Event</th>";
echo "<th></th>";
echo "<th></th>";
echo "<th></th>";
echo "<th>Capacity</th>";
echo "</tr>";

while($row = mysql_fetch_assoc($result)) {

    echo ("<tr>");
    echo ("<td>");
    echo ("<input type='hidden' value='".$row['event_id']."' class='id'>");
    echo ("</td>");   
    echo ("<td colspan='4' class='event_name'>");
    echo ($row['event_name']);
    echo ("</td>");
    echo ("<td class='event_capacity'>");
    echo ($row['event_capacity']);
    echo ("</td>");

    echo ("</tr>");

}

echo "</table>";
?>

和AJAX SCRIPT

<?php
require_once('../../../../config.php');
require_once("../../../../inc/dbconnect.php");

$id     = mysql_real_escape_string($_POST['id']);
$value  = mysql_real_escape_string($_POST['val']);
$field  = mysql_real_escape_string($_POST['type']);

$query =  "UPDATE mod_events SET ".$field." = '".$value."' WHERE event_id = ".$id;

echo mysql_query($query);


?>

希望你们能帮助我！

Answer 1

您可以检查此表格单元格中是否已有输入，如下所示：

$('table.editable td').click(function(event) {      
    if ($('input',this).length == 0) { //check if there is already an input?
        var content = $(this).html();
        id = $(this).parent().find('.id').val();
        var class = $(this).attr('class');

        $(this).html('<input type="text" id="editablefield" name="'+class+'" value="'+content+'"/>');

        // $(this).unbind(event); // this shouldn't be needed anymore.
    }
});

避免aularons评论所描述的问题：

但这可能会导致这种情况：用户点击进行编辑，将数据更改为555，发出请求但尚未完成，然后用户将数据更改为333，现在此请求变得更快（首先在某处缓慢路由或由于某种原因得到它重新发送的数据包），现在用户将在该字段中看到333，而在服务器上它是555，因为555请求在333之后到达。我做的是在请求运行时取消绑定，然后再次绑定：{ {3}} - jsfiddle.net/eDJqL

您需要更改以下代码。

$('#editablefield').live('blur', function() {
    var value = $(this).val();
    var name = $(this).attr('name');
    var cell = $(this).closest('td');
    cell.data('request-running', true); // set data to remember request is running
    $.ajax({
        type: "POST",
        url: "modules/Events/ajax/saveField.php",
        data: "id="+id+"&val="+value+"&type="+name,
        success: function(data) {
            cell.data('request-running', false); // mark finished ajax call
            var data = data;
            alert(data);
        },
        error: function(request, status, error) {
            cell.data('request-running', false); // mark finished ajax call
            alert(request.responseText);
        }
    });

    $(this).parent().html(value);
});

和

$('table.editable td').click(function(event) {      
    if ($('input',this).length == 0 || !$(this).data('request-running')) { //check if there is already an input? Or the old request is still runnig.
        var content = $(this).html();
        id = $(this).parent().find('.id').val();
        var class = $(this).attr('class');

        $(this).html('<input type="text" id="editablefield" name="'+class+'" value="'+content+'"/>');

        // $(this).unbind(event); // this shouldn't be needed anymore.
    }
});

Answer 2

最常见的方法是禁用输入，或设置一个标志，防止用户将注意力集中在/将其转换为编辑字段。对于后者，您可以使用jQuery data

Ajax请求的完成/成功回调会再次解除禁用或标记。

Answer 3

我在点击后解除了事件的绑定，然后在完成AJAX请求后再次绑定它，以摆脱以下可能的场景（也作为上面的评论发布）：

用户点击进行编辑，将数据更改为 555，提出请求但不是已完成，然后用户更改数据到333，现在这个请求去了更快（首先在某处路由缓慢或得到它的包重新发送某种原因），现在用户会看到 333在服务器上的字段中这是555，因为555请求到了在333之后。

这里是the result（你会看到丑陋的警报，因为测试是在jsfiddle.com上进行的，所以它会进入ajax错误路径）。

ajax完成后重置一个函数

3 个答案: