Сбросить одну функцию после завершения ajax

Question

У меня небольшая проблема, я пытаюсь создать встроенную систему редактирования с помощью jquery.Поэтому, когда пользователь нажимает на поле таблицы, innerhtml изменится на поле ввода с, конечно же, содержимым поля таблицы.По умолчанию это поле ввода сохраняется в mysql db, и 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);
});

});

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

<?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. То, что я сделал, было отменено связывание во время выполнения запроса, затем связывание снова: jsfiddle.net / eDJqL - aularon

Вам необходимо изменить код следующим образом.

$('#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

Я отменил привязку события по клику, а затем снова связал его после выполнения запроса AJAX, чтобы избавиться от следующего возможного сценария (также опубликованного как комментарий выше):

пользователь нажимает наизмените, измените данные на 555, запрос сделан, но еще не завершен, затем пользователь изменяет данные на 333, теперь этот запрос выполняется быстрее (сначала он был перенаправлен куда-то медленно или по какой-то причине получил свой пакет повторно), теперь пользователь будетсм. поле 333, в то время как на сервере это 555, потому что запрос 555 поступил после 333.

Вот результат (Вы увидите уродливое предупреждение, потому что тестна jsfiddle.com, поэтому он пойдет по маршруту ошибки ajax).

Answer 3

Наиболее распространенный способ сделать это - отключить ввод или установить флаг, который не позволяет пользователю сфокусироваться на нем / превратить его в поле редактирования. Для последнего вы можете использовать jQuery data

Полный / успешный обратный вызов Ajax-запроса снова снимает блокировку или флаг.