Question

在Ajax调用中获得结果后，我想在HTML页面上显示一个模态，其中包含Ajax调用返回的数据。我可以做到，但是麻烦的是，在通过此代码进行任何Ajax调用期间，我都有一个旋转的gif模式：

$(document).ready(function() {
    // Code to show spinning GIF for any Ajax call
    $body = $("body");
    $(document).on({
        ajaxStart: function() { $body.addClass("loading");    },
         ajaxStop: function() { $body.removeClass("loading"); }    
    });
});

我认为这会阻止我的showEntry模态，因为UI中什么也没有发生。从表单提交按钮调用Ajax调用，如下所示：

$('#formsearch').click(function() {
    var  dataSet;
    // Send Ajax request to get results of search entry
    $.ajax({
        type: "POST",
        url: "php/searchreceive.php",
        data:{"c_year": contestYear, "bCode":barCode, "e_number": entryNumber} 
    }).done(function(status) {
        status = status.trim();
        if(status === "InvalidSession"){
            // Redirect to logout page
            window.location.href='../common/php/logout.php';
        }
        if(status === "NoResults") {
            alert("No record found - please try again.");
        } else {
            dataSet = JSON.parse(status);
            //console.log(dataSet);
            // Set modal form field values & display it
            console.log('About to show modal "showEntry" ...');
            $('#showEntry-modal-form').toggleClass('is-visible');  
        }
    }); 
});

（请注意，在上面的代码中，我尚未遍历dataSet来获取返回的记录集以设置模式的输入元素值）。

我尝试将调用移至Ajax调用之外，但由于它是异步的，因此似乎不起作用。

CSS

    /* Start by setting display:none to make this hidden.
       Then we position it in relation to the viewport window
       with position:fixed. Width, height, top and left speak
       for themselves. Background we set to 80% white with
       our animation centered, and no-repeating */
.modalLoading {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    text-align: center;
    /*background: rgba( 255, 255, 255, .8 ) */
    background: rgba( 248, 248, 248, .8 ) 
                /*url('http://i.stack.imgur.com/FhHRx.gif') */
                url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
                50% 50% 
                no-repeat;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modalLoading {
    overflow: hidden;   
}
/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modalLoading {
    display: block;
}
/**
 * Modal window (process entry as paid))
 */
.modal {
    position: absolute;
    z-index: 10000; 
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
}
.modal.is-visible {
    visibility: visible;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 0%, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s;
    z-index: -201;
}
.modal.is-visible .modal-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    z-index: 9999;
}
.modal-wrapper {
    position: absolute;
    top: 6em;
    left: 50%;
    width: 30em;
    margin-left: -16em;
    background-color: #fff;
    box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
    font-family: 'Roboto', sans-serif;
    font-size:small;
    z-index: -200;
}
.modal-transition {
    transition: all 0.3s 0.12s;
    /*transform: translateY(-10%);*/  /* transition fade In from top */
    opacity: 0;
}
.modal.is-visible .modal-transition {
    transform: translateY(0);
    opacity: 1;
    z-index: 99999;
}
.modal-header, .modal-content {
    padding: 1em;
}
.modal-header {
    position: relative;
    background-color: #fff;
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
    border-bottom: 1px solid #e8e8e8;
}
.modal-close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.modal-close:hover {
    background: #00d9ff;
}
.modal-heading {
    font-size: 1.125em;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.modal-content > *:first-child {
    margin-top: 0;
}
.modal-content > *:last-child {
    margin-bottom: 0;
}
.modal-form {
    margin-bottom: 15px;
    margin-bottom: 20px;
}
.modal-form .form-group {
    width: 45%;
    display: inline-block;
    float: left;
    padding: 0 2.5%;
}
.modal-form .form-group1 {
    width: 95%;
    display: block;
    padding: 0 3%;
}
.modal-form .form-group label {
    display: block;
    font-weight: bold;
}
.modal-form .form-group1 label {
    display: block;
    font-weight: bold;
}
.modal-form .form-control {
    line-height: 2;
    padding: 5px;
    margin: 5px 0;
    width: 100%;
    border-radius: 3px;
    border: none;
}
.modal-form .form-control2 {
    line-height: 2;
    padding: 5px;
    margin: 5px 0;
    width: 100%;
    display: block;
    border-radius: 3px;
    border: none;
}
.modal-form .form-control3 {
    line-height: 2;
    padding: 5px 8px;
    margin: 5px 0;
    width: 102%;
    display: block;
    border-radius: 3px;
    border: none;
}
.modal-form .form-control::placeholder {
    font-family: 'Roboto', sans-serif;
    font-size:small;
}
.save-btn, .cancel-btn {
    border: 0;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: normal;
    border-radius: 5px;
    cursor: pointer;
}
.save-btn {
    background: #1391dd;
    color: #fff;
    margin-right: 10px;
}
.cancel-btn {
    background: #fff;
    color: #000;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Extended|Oxygen+Mono|Roboto" rel="stylesheet">
    <title>Contest Entry Form</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="robots" content="noindex,nofollow"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="showEntry-modal-form" class="modal">
        <div class="modal-overlay modal-toggle-showEntry"></div>
        <div class="modal-wrapper modal-transition">
            <a class="modal-close modal-toggle-showEntry" href="javascript:void(0)">&times;</a>

            <div class="modal-body">
                <div class="modal-content">

                    <form id="showEntryForm" name="showEntryForm">

                        <div class="modal-form">

                            <input type="hidden" id="showEntryID" name="showEntryID" value="">                        

                            <div class="form-group">
                                <label>First name</label>
                                <input class="form-control" type="text" id="first_name" name="first_name" maxlength="30" disabled value="">
                            </div>
                            <div class="form-group">
                                <label>Last name</label>                            
                                <input class="form-control" type="text" id="last_name" name="last_name" maxlength="30" disabled value="">
                            </div>
                            <div class="form-group">
                                <label>Mobile phone</label>
                                <input class="form-control" type="tel" id="phone" name="phone" disabled value="">
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input class="form-control" type="email" id="email" name="email" maxlength="100" disabled value="">
                            </div>
                            <div class="form-group1">
                                <label>Title or name of entry</label>
                                <textarea rows="2" id="model_name" name="model_name" class="form-control2" maxlength="100" disabled></textarea>
                            </div>
                            <div class="form-group1">
                                <label for="remarks">Remarks</label>
                                <textarea rows="4" id="remarks" name="remarks" class="form-control2" maxlength="100" disabled></textarea>
                            </div>


                            <div class="form-group1">

                                <div align="center">
                                    <p style="margin-top:10px">Is model SECURED to base?
                                        <input id="securedRadioYes" class="radiobtn" name="securedToBase" type="radio" value="Yes">Yes
                                        <input id="securedRadioNo" class="radiobtn" name="securedToBase" type="radio" value="No">No
                                    </p>                                    
                                </div>                            

                                <label for="category">Category</label>
                                <select class="form-control3" id="category" name="category" size="1" disabled></select>

                            </div>
                            <div class="form-group1" style="margin-top:30px">
                                <input type="submit" id="save" name="save" class="save-btn" value="Save"> 
                                <button class="cancel-btn modal-toggle-showEntry">Cancel</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>

        </div>
    </div>        

    <div class="modalLoading"></div>
</body>
</html>

修改在完成了Sigma建议的代码更改之后，我仍然看不到模式，但我知道Ajax调用成功并返回了JSON信息。

编辑2 添加了更多显示Bootstrap css / js的HTML

编辑3 绝对是导致问题的Bootstrap链接。如果我注释掉Bookstrap链接，它将起作用；如果我取消注释，就不会。

Answer 1

我把你的问题变成了可行的提琴。在我的示例中，我使用http://jsonplaceholder.typicode.com作为虚拟后端服务器。以下小提琴有效，但是我不得不在几点上进行更改（type从'POST'更改为'GET'，dataType更改为'json'）。希望它可以帮助您找出页面中错误的位置。

$body=$('body');
$(document).on({
   ajaxStart: function() { $body.addClass("loading");    },
   ajaxStop:  function() { $body.removeClass("loading"); }    
});

$('#formsearch').click(function() {
    // Send Ajax request to get results of search entry
    $.ajax({type:"GET",url:"http://jsonplaceholder.typicode.com/users/5",dataType:"json"})
     .done(function(d) {
         let n=d.name.split(' ');d.first_name=n[0];d.last_name=n[1];
         $('#showEntryForm input').each((i,e)=>{if(d[e.id])e.value=d[e.id]}); // put data into form elements
         
         $('#showEntry-modal-form').toggleClass('is-visible');  
    }); 
});

/* Start by setting display:none to make this hidden.
       Then we position it in relation to the viewport window
       with position:fixed. Width, height, top and left speak
       for themselves. Background we set to 80% white with
       our animation centered, and no-repeating */
.modalLoading {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    text-align: center;
    /*background: rgba( 255, 255, 255, .8 ) */
    background: rgba( 248, 248, 248, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif')
                /* url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>') */
                50% 50% 
                no-repeat;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modalLoading {
    overflow: hidden;   
}
/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modalLoading {
    display: block;
}
/**
 * Modal window (process entry as paid))
 */
.modal {
    position: absolute;
    z-index: 10000; 
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
}
.modal.is-visible {
    visibility: visible;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 0%, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s;
    z-index: -201;
}
.modal.is-visible .modal-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    z-index: 9999;
}
.modal-wrapper {
    position: absolute;
    top: 6em;
    left: 50%;
    width: 30em;
    margin-left: -16em;
    background-color: #fff;
    box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
    font-family: 'Roboto', sans-serif;
    font-size:small;
    z-index: -200;
}
.modal-transition {
    transition: all 0.3s 0.12s;
    /*transform: translateY(-10%);*/  /* transition fade In from top */
    opacity: 0;
}
.modal.is-visible .modal-transition {
    transform: translateY(0);
    opacity: 1;
    z-index: 99999;
}
.modal-header, .modal-content {
    padding: 1em;
}
.modal-header {
    position: relative;
    background-color: #fff;
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
    border-bottom: 1px solid #e8e8e8;
}
.modal-close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.modal-close:hover {
    background: #00d9ff;
}
.modal-heading {
    font-size: 1.125em;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.modal-content > *:first-child {
    margin-top: 0;
}
.modal-content > *:last-child {
    margin-bottom: 0;
}
.modal-form {
    margin-bottom: 15px;
    margin-bottom: 20px;
}
.modal-form .form-group {
    width: 45%;
    display: inline-block;
    float: left;
    padding: 0 2.5%;
}
.modal-form .form-group1 {
    width: 95%;
    display: block;
    padding: 0 3%;
}
.modal-form .form-group label {
    display: block;
    font-weight: bold;
}
.modal-form .form-group1 label {
    display: block;
    font-weight: bold;
}
.modal-form .form-control {
    line-height: 2;
    padding: 5px;
    margin: 5px 0;
    width: 100%;
    border-radius: 3px;
    border: none;
}
.modal-form .form-control2 {
    line-height: 2;
    padding: 5px;
    margin: 5px 0;
    width: 100%;
    display: block;
    border-radius: 3px;
    border: none;
}
.modal-form .form-control3 {
    line-height: 2;
    padding: 5px 8px;
    margin: 5px 0;
    width: 102%;
    display: block;
    border-radius: 3px;
    border: none;
}
.modal-form .form-control::placeholder {
    font-family: 'Roboto', sans-serif;
    font-size:small;
}
.save-btn, .cancel-btn {
    border: 0;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: normal;
    border-radius: 5px;
    cursor: pointer;
}
.save-btn {
    background: #1391dd;
    color: #fff;
    margin-right: 10px;
}
.cancel-btn {
    background: #fff;
    color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modalLoading"></div>
<div id="showEntry-modal-form" class="modal">
    <div class="modal-overlay modal-toggle-showEntry"></div>
    <div class="modal-wrapper modal-transition">
        <a class="modal-close modal-toggle-showEntry" href="javascript:void(0)">&times;</a>

        <div class="modal-body">
            <div class="modal-content">

                <form id="showEntryForm" name="showEntryForm">

                    <div class="modal-form">

                        <input type="hidden" id="showEntryID" name="showEntryID" value="">                        

                        <div class="form-group">
                            <label>First name</label>
                            <input class="form-control" type="text" id="first_name" name="first_name" maxlength="30" disabled value="">
                        </div>
                        <div class="form-group">
                            <label>Last name</label>                            
                            <input class="form-control" type="text" id="last_name" name="last_name" maxlength="30" disabled value="">
                        </div>
                        <div class="form-group">
                            <label>Mobile phone</label>
                            <input class="form-control" type="tel" id="phone" name="phone" disabled value="">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input class="form-control" type="email" id="email" name="email" maxlength="100" disabled value="">
                        </div>
                        <div class="form-group1">
                            <label>Title or name of entry</label>
                            <textarea rows="2" id="model_name" name="model_name" class="form-control2" maxlength="100" disabled></textarea>
                        </div>
                        <div class="form-group1">
                            <label for="remarks">Remarks</label>
                            <textarea rows="4" id="remarks" name="remarks" class="form-control2" maxlength="100" disabled></textarea>
                        </div>


                        <div class="form-group1">

                            <div align="center">
                                <p style="margin-top:10px">Is model SECURED to base?
                                    <input id="securedRadioYes" class="radiobtn" name="securedToBase" type="radio" value="Yes">Yes
                                    <input id="securedRadioNo" class="radiobtn" name="securedToBase" type="radio" value="No">No
                                </p>                                    
                            </div>                            

                            <label for="category">Category</label>
                            <select class="form-control3" id="category" name="category" size="1" disabled></select>

                        </div>
                        <div class="form-group1" style="margin-top:30px">
                            <input type="submit" id="save" name="save" class="save-btn" value="Save"> 
                            <button class="cancel-btn modal-toggle-showEntry">Cancel</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>

    </div>
</div>        
<input type="button" value="search" id="formsearch">

在成功的Ajax调用问题上显示模式

1 个答案: