Question

目前我有一个动作链接，其中OnBegin方法调用模式询问＆＃34;保存＆＃34;，＆＃34;不要保存＆＃34;或＆＃34;取消＆＃34;。我需要能够在继续之前等待用户选择。

例如：如果用户选择取消，则模态关闭，我返回false以停止ajax操作链接继续。

我知道确认的AjaxOption做了类似的事情，但是有一些问题：

样式与我网站的其余部分不匹配。
它只有取消或继续选项而没有保存选项

ActionLink的：

    @Ajax.ActionLink("Edit", "BrandCategoryModal", "BrandCategory", new AjaxOptions { UpdateTargetId = "DisplayModal", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", OnBegin = "CheckForChanges()"})

的javascript：

var hasChanged = false;
var catId = 0;
var form = document.getElementById("CheckForChanges");

form.addEventListener("input", function () {
    hasChanged = true;
    console.log("Change");
});

$('input[name=Active]').change(function () {
    if ($(this).is(':checked')) {
        hasChanged = true;
        console.log("Change");
    } else {
        hasChanged = true;
        console.log("Change");
    }
});
    function CheckForChanges() {
        if (hasChanged)
        {
            showModal('#SaveOrCancel');
      }
        showModal('#DisplayModal')
    }
    function showModal(modalId) { //Displays Modal
        $(modalId).modal('show');
    }

模态：

<div class="modal fade" id="SaveOrCancel" role="dialog">
    <div class="modal-dialog" style="width: 20%; margin-top: 5%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Before Continuing:</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Select Your option:</h4>
                    </div>
                    <div class="panel-body" style="text-align: center">
                        <button class="btn btn-success" type="button" style="margin:auto"><b>Save</b></button>
                        <button class="btn btn-danger" type="button" style="margin:auto"><b>Don't Save</b></button>
                        <button class="btn btn-info" type="button" data-dismiss="modal" style="margin:auto"><b>Cancel</b></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

更改您对XMLHttpRequest的ajax调用，让您在成功时处理事件，也让您决定何时继续等待：

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success ! <--- THERE IT IS
    var data = JSON.parse(this.response);
  } else {
    // Reached server, but it returned an error. Your call. You can retry
  }
};

request.onerror = function() {
  // connection error of some sort
};

request.send();

在继续使用ajax动作链接之前如何等待模态的响应？

1 个答案: