0

当我根据状态码返回的值进行 ajax 调用以验证 URL 时，我正在使用引导模式来显示加载消息。一旦用户单击按钮，应该会显示加载器消息，并在后面的 jQuery ajax 调用中进行。

显示 Bootstrap 模态，但稍有延迟，我希望它立即显示 Bootstrap 模态加载器消息。

我正在使用 Bootstrap、骨干网、jQuery。这基本上是一个使用网络技术开发的混合移动应用程序。

这就是我正在做的，

BootStrap 模态代码，基本上是隐藏的（我通过 javascript 打开模态）

<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" aria-hidden="true" data-backdrop="static" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog modal-lg vertical-align-center">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="gifLoad"><img id="loading-image" src="img/ajax-loader.gif" alt="Loading..." /> </div><div id="dataLoad"><p>Please wait..!!!</p></div>
                </div>
            </div>
        </div>
    </div>
</div>

按钮点击事件是通过主干触发的

   openPage: function () {  
        $('.modal').modal('show');         // Opening the bootstrap model on button click    
        var networkState = navigator.connection.type;
        if (networkState === Connection.NONE) {
            // Check the phone has internet connection or not to proceed further.
            var loaderView = SafetyLoaderView();
            loaderView.render();
            loaderView.appendMessage('Internet Connection seems to be offline');
            loaderView.show();
        }
        else {  
            var textValue = $('#inputValue').val();             // Get the entered value of the input box

            if (textValue === null || textValue === "") {
                $('.modal').modal('hide');
                // If the input box is empty then change the color of the border of thr input box.
                this.$el.find('#inputText').addClass('has-error');
            }
            else {

                var serverUrl = "https://www."+ value1 + value2  + "google.com";              // Forming the URL based on the values entered by the user.
                var status = this.validateURL(serverUrl);           // Calling the validateURL method to validate the URL.

                if (status === 200) {
                    $('.modal').modal('hide');
                    // If status code is equal to 200 opening the next screen of the application
                    var url = "page2.html";

                    window.location = url;
                }
                else if (status === -1) {
                    $('.modal').modal('hide');
                    var loaderView = new SafetyLoaderView();         // Handling the status code other than 200,400,404 and 500.
                    loaderView.render();                             // Displaying standard message to the remaining status code.
                    loaderView.appendMessage('The Request could not be completed');
                    loaderView.show();
                }
            }
        }
    },

验证 URL 方法，它也是主干视图的一部分：

validateURL: function (url) {
        var stat = -1;         // Validating the URL. Based on the status code returned, appropriate error message is displayed.
        // New status code can be added to handle the message.

 //------------------------------------------------------------------------

        // ----------- I feel due to ajax call done here its giving me a delay to load modal
        // Instead I want instanly, if I use alert box that is displayed immediately  

//------------------------------------------------------------------


        $.ajax(url, {
            async: false,
            statusCode: {
                200: function (response) {
                    stat = 200;
                },
                400: function (response) {
                    $('.modal').modal('hide');     // Hiding the modal
                    var loaderView = new SafetyLoaderView();
                    loaderView.render();
                    loaderView.appendMessage('The Request could not be understood');
                    loaderView.show();
                    stat = 400;
                },
                404: function (response) {
                    $('.modal').modal('hide');         // Hiding the modal
                    var loaderView = new SafetyLoaderView();
                    loaderView.render();
                    loaderView.appendMessage('Requested URL not found');
                    loaderView.show();
                    stat = 404;
                },
                500: function (response) {
                    $('.modal').modal('hide');        // Hiding the modal
                    var loaderView = new SafetyLoaderView();
                    loaderView.render();
                    loaderView.appendMessage('Internal server error');
                    loaderView.show();
                    stat = 201;
                },
            },
        });
        return stat;
    },

如果我不调用 validateURL 方法，那么 Bootstrap 模式会立即加载。

我的问题是如何在 ajax 调用期间显示这个加载器模式。？

4

0 回答 0