Question

我有一个视图，在按钮单击时打开以显示数据库结果。我想在返回结果时禁用该按钮，然后在填充该部分后启用它。但是，它会禁用然后在视图填写之前启用按钮，并且人们会多次单击该按钮 - 这会导致该部分多次切换进/出。以下是我使用的代码：

$('#ViewComments').click(function () {
$("#ViewComments").prop("disabled", true); // Disable View Comments button after click
var tr = $('tr');
$("#CommentResults").find(tr).remove();
$("#InsertComment").focus();
var parcel_id = $('#ParcelId').val();
$.ajax({
    url: "classes/get-comments.php?parcel_id=" + parcel_id,
    type: "GET",
    dataType: "json",
    async : false,
    error: function (SMLHttpRequest, textStatus, errorThrown) {
        alert("An error has occurred making the request: " + errorThrown);
    },
    success: function (comments) {
        for (var i = 0; i < comments.length; i++) {
            var tr = $('<tbody></tbody>');
            if (comments[i].comment == null || comments[i].comment == "") {
                tr.append("<tr><td><span class='comment1'>Entered By: " + comments[i].name + "</span></td><td style=\"text-align:left; width:25%;\"><span class='comment1'>" + comments[i].date_created + "</span></td></tr><tr><td colspan=\"2\"><span style=\"font-style:italic;\">No comment entered.</span></td></tr>");
            } else {
                tr.append("<tr><td><span class='comment1'>Entered By: <span class='comment2'>" + comments[i].name + "</span></span></td><td style=\"text-align:left; width:75%\"><span class='comment1'>" + comments[i].date_created + "</span></td></tr><tr><td colspan=\"2\">" + comments[i].comment + "</td></tr>");
            } 
            $('#CommentResults').append(tr);
        }
        $('#Comments').slideToggle('slow');
    }
    });//end ajax call
//});
$("#ViewComments").prop("disabled", false); // re-enable View Comments button 
}); //end view comments click function

感谢任何帮助或想法。 Thx提前。

Answer 1

你应该移动 $("#ViewComments").prop("disabled", false); // re-enable View Comments button成功和错误回调。否则，只要启动AJAX请求，按钮就会重新启用，而不是在完成时。在这里，我们对您的代码进行了更新：

$('#ViewComments').click(function () {
$("#ViewComments").prop("disabled", true); // Disable View Comments button after click
var tr = $('tr');
$("#CommentResults").find(tr).remove();
$("#InsertComment").focus();
var parcel_id = $('#ParcelId').val();
$.ajax({
    url: "classes/get-comments.php?parcel_id=" + parcel_id,
    type: "GET",
    dataType: "json",
    async : false,
    error: function (SMLHttpRequest, textStatus, errorThrown) {
        alert("An error has occurred making the request: " + errorThrown);
         $("#ViewComments").prop("disabled", false); // re-enable View Comments button 
    },
    success: function (comments) {
        for (var i = 0; i < comments.length; i++) {
            var tr = $('<tbody></tbody>');
            if (comments[i].comment == null || comments[i].comment == "") {
                tr.append("<tr><td><span class='comment1'>Entered By: " + comments[i].name + "</span></td><td style=\"text-align:left; width:25%;\"><span class='comment1'>" + comments[i].date_created + "</span></td></tr><tr><td colspan=\"2\"><span style=\"font-style:italic;\">No comment entered.</span></td></tr>");
            } else {
                tr.append("<tr><td><span class='comment1'>Entered By: <span class='comment2'>" + comments[i].name + "</span></span></td><td style=\"text-align:left; width:75%\"><span class='comment1'>" + comments[i].date_created + "</span></td></tr><tr><td colspan=\"2\">" + comments[i].comment + "</td></tr>");
            } 
            $('#CommentResults').append(tr);
        }
        $('#Comments').slideToggle('slow');
        $("#ViewComments").prop("disabled", false); // re-enable View Comments button 
    }
    });//end ajax call
//});
}); //end view comments click function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ViewComments">View comments</button>
<button id="InsertComment">View comments</button>
<div>ParcelID: <input id="ParcelId" value="5" type="Number /></div>
<div id="Comments">
     <div id="CommentResults"></div>
</div>

需要jquery等待ajax但异步：false isn不工作

1 个答案: