Question

我有以下代码：

 var menuButtonClick = {
        onReady: function () {
            $(document).on('click', '.menu-button', function () {
                menuButtonClick.clickedButton($(this).html());
            });
        },

        clickedButton: function (val) {
            switch (val) {
                    case 'CheckModelBank':
                        modelBankHandler.get();
                        break;
                }
        }
    }

    var modelBankHandler = (function () {
    var get = function () {

        var selectedCellData = handsonTable.selectedCellData.get();
        var webGrid = handsonTable.WebGrid.get();

        $.ajax({
            type: 'POST',
            url: "http://localhost:56292/api/Data/CheckModelBank",
            data: { "": selectedCellData },
            success: function (response) {
                if (response != null) {
                    serverResult = JSON.parse(response);

                    printModelBank(serverResult, webGrid);

                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if (textStatus == "error") {
                    modalHandler.printErrorModal();
                }
            }
        });
    }

    var printModelBank = function (serverResult, webGrid) {
       ///
    }

    return {
        get: get
    }

})();


    var fileHandler = {
        onReady: function () {
            var documentType = "";

            $('.upload-file').click(function () {
                $('[data-remodal-id=documentModal]').remodal().open();
            });

            $('.document-option').click(function () {
                //Need to get the type of document the user is going to work with so we can parse the document correctly to the webgrid
                documentType = $(this).html();
                $('#fileUpload').click();
            });

            $('#fileUpload').change(function () {
                fileHandler.upload(documentType);
            });

            $('.save-to-excell').click(fileHandler.saveDocument);
        },

        upload: function (documentType) {
            var formData = new FormData();
            var totalFiles = document.getElementById("fileUpload").files.length;

            for (var i = 0; i < totalFiles; i++) {
                var file = document.getElementById("fileUpload").files[i];
                formData.append("fileUpload", file);
            }

            $.ajax({
                type: 'post',
                url: 'http://localhost:59973/Home/Upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    jsonData = JSON.parse(response.data);
                    if (jsonData != null) {
                        if (documentType == "Infolog") {
                            fileHandler.printDocument(jsonData); //This is used for pickinglist and infolog
                        } else {
                            var webGrid = handsonTable.WebGrid.get();
                            webGrid.loadData(jsonData);
                        }
                    }
                },
                error: function (error) {
                    if (textStatus == "error") {
                        modalHandler.printErrorModal();
                    }
                }
            });
        },
    }

    $(document).ready(function () {

        handsonTable.init();

        menuButtonClick.onReady();
        fileHandler.onReady();
        buttonClicks.onReady();

    }).ajaxStart(function () {
            $('[data-remodal-id=modalAjax]').remodal().open();
        }).ajaxStop(function () {
            $('[data-remodal-id=modalAjax]').remodal().close();
        });

当我上传文件（fileHandler）时，模式在ajaxStart期间显示并在ajaxStop上关闭。但是，如果我单击菜单中的一个按钮（menuButtonclick）触发我的modelBankHandler函数，则模式在ajaxstart期间显示，但不会在ajaxStop上关闭。

为什么呢？在我的modelBankHandler中按预期检索所有数据，那么为什么模态不会关闭？

Answer 1

如果您在浏览器中按下了F12并查看了控制台，那么您可能会在那里发现错误。 This video可能会帮助您找出问题所在的基本问题。

我认为$newlist可能会抛出错误，如果成功或错误函数抛出错误，那么jQuery崩溃并且不执行printModelBank处理程序：

ajaxStop

你可以通过成功和错误作为承诺处理程序来解决这个问题，承诺处理程序中的错误不应该使jQuery崩溃（但确实如此）：

$(document)
.ajaxStart(function () {
  console.log("open model");
}).ajaxStop(function () {
  console.log("close model");
});
$.ajax({
  type: 'GET',
  url: "/none",
  data: {},
  success: function (response) {
    console.log("success");
    throw new Error("now stop won't execute");
  },
  error: function (jqXHR, textStatus, errorThrown) {
    console.log("error");
    throw new Error("now stop won't execute");
  }
});

你可以尝试原生承诺（jQuery仍然没有得到正确的承诺）并且在处理程序中不会因错误而崩溃：

$(document)
.ajaxStart(function () {
  console.log("open model");
}).ajaxStop(function () {
  console.log("close model");
});
$.ajax({
  type: 'GET',
  url: "/none",
  data: {}
})
.then(
  response => {
    console.log("success");
    throw new Error("now stop won't execute");
  },
  (jqXHR, textStatus, errorThrown) => {
    console.log("error");
    throw new Error("now stop won't execute");
  }
);

IE不支持native promises因此您需要polyfill或尝试使用ES2016

关闭ajaxStop中的模态

1 个答案: