Question

使用javascript创建模态正文的内容我注意到结果并不总是相同。有时模态体是空的，有些时候是预期的。功能如下：

function newServiceModal() {
$("#newServicesModal-bd").html("");
$("#newServiceModalHiddenId").val("");
$("#newServiceModal-title").html("New Service - body not created yet ");
var modalbody = "";
var div = document.createElement('div');
//var provideroptions = {
//    providerid:providerid
//}
$.ajax({
    type: 'post',
    url: baseSiteURL + 'home/ReturnProviders', //supposed to return all available providers
    //data: options
}).done(function (data) {
    $("#newServiceModal-title").html("New Service - body was created");
    modalbody = modalbody.concat(" <div class='col-md-4'> <p>Provider</p><select id='newproviderSelect' class='form-control'>");
    for (i = 0; i < data.length; i++) {
        if (i==0)
            modalbody = modalbody.concat(" <option value=" + data[i].id + " selected>Type: " + data[i].providerType + "</option>");
        else
            modalbody = modalbody.concat(" <option value=" + data[i].id + ">Type: " + data[i].providerType + "</option>");
    }
    modalbody = modalbody.concat('</select></div>');
    div.innerHTML = modalbody;
    document.getElementById('editServicesModal-bd').appendChild(div);
    $("#newServiceModal-title").html("New Service - body was created");
})

//var customeroptions = {
//    customerid: customerid
//}
$.ajax({
    type: 'post',
    url: baseSiteURL + 'home/ReturnCustomers', //supposed to return all available customers
    //data: options
}).done(function (data) {
    modalbody = modalbody.concat(" <div class='col-md-4'> <p>Customer</p><select id='newcustomerSelect' class='form-control'>");
    for (i = 0; i < data.length; i++) {
        if (i==0)
            modalbody = modalbody.concat(" <option value=" + data[i].id + " selected>" + data[i].company + "</option>");
        else
            modalbody = modalbody.concat(" <option value=" + data[i].id + ">" + data[i].company + "</option>");
    }
    modalbody = modalbody.concat('</select></div>');
    div.innerHTML = modalbody;
    document.getElementById('editServicesModal-bd').appendChild(div);
})

//var applicationroptions = {
//    applicationid: applicationid
//}
$.ajax({
    type: 'post',
    url: baseSiteURL + 'home/ReturnApplications', //supposed to return all available applications
    //data: options
}).done(function (data) {
    modalbody = modalbody.concat(" <div class='col-md-4'> <p>Application</p><select id='newapplicationSelect' class='form-control'>");
    for (i = 0; i < data.length; i++) {
        if (i==0)
            modalbody = modalbody.concat(" <option value=" + data[i].id + " selected>" + data[i].name + "</option>");
        else
            modalbody = modalbody.concat(" <option value=" + data[i].id + ">" + data[i].name + "</option>");
    }
    modalbody = modalbody.concat('</select></div>');
    div.innerHTML = modalbody;
    document.getElementById('newServicesModal-bd').appendChild(div);
})
$("#newServiceModal").modal('show');

}

模态html是这样的：

<div id="newServiceModal" class="modal fade local-modal" role="dialog" aria-hidden="true" position="fixed">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <section id="newService">
            @using (Html.BeginForm("Services", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="newServiceModal-title">original title</h4>
                </div>
                <div id="newServiceModalHiddenId"></div>
                <div class="modal-body row" id="newServicesModal-bd" style='margin-right:20px; margin-left:20px;'>
                    @* bootstrap.min.css applies here this rule : .row{margin-right:-15px;margin-left:-15px} *@
                    @* services.js puts content here *@
                </div>
                <div class="modal-footer">
                    <div class="col-md-6 pull-left">
                        <button id="savebtn" type="button" class="btn btn-primary ladda-button" data-style="expand-right" data-size="l" onclick="saveNewService()"><span class="ladda-label">Save</span></button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Close</button>
                    </div>
                    @*<div class="col-md-6">
                            <button type="button" class="btn btn-danger" onclick="deleteUser()">Delete</button>
                        </div>*@
                </div>
            }
        </section>
    </div>
</div>

功能的第一行

$（ “＃newServicesModal-BD”）的HTML（ “”）;

正在清空模态体（没有将先前的内容与即将创建的内容连接起来）。我想我的问题与此有关，因为模态的10倍中的9次是按预期创建的，但有时候它的身体是空的，这使我怀疑身体内容根本没有创建或

$（ “＃newServicesModal-BD”）的HTML（ “”）;

在创建正文内容后执行

。要验证内容是否已创建，我有这个

$（“＃newServiceModal-title”）。html（“新服务 - 尚未创建的身体”）;

在我清空模态的主体后，我把它放在

$（“＃newServiceModal-title”）。html（“新服务 - 身体已创建”）;

当我创建了一些内容时。

我会看到标题总是“新服务 - 身体被创造”所以我认为可以安全地假设身体确实被创造了。我读到了关于起伏和范围，我不认为认为他们与此事有关，但无论如何我都能找到这种不一致行为的任何理由。如果任何人可以指出为什么会发生这种情况我会很感激。感谢您阅读本文。

解决方案（？）

我调查了一点，我想做更多的评论，也许我会更好地澄清问题。函数newServiceModal（）正在对不同的其他函数进行3次调用。 ReturnProviders，ReturnCustomers和ReturnApplications（在我的HomeController类中）他们正在调用实际从数据库中检索数据的函数。我发现只有在没有使用此顺序调用它们（ReturnProviders，ReturnCustomers和ReturnApplications）时才会出现问题。在我向他解释问题并且用谷歌搜索完成后，他需要5分钟时间，一位经验丰富的程序员向我展示了他们没有按照他们在函数中编写的顺序调用它们的原因。我刚刚添加了

async：false

在我的ajax请求中，现在结果按照预期的顺序出现。有人指出我的方法不正确，我应该为我需要的所有数据而不是3进行一次ajax调用。所以我会尽快发布正确的解决方案。谢谢大家的时间和帮助。

我设法通过拨打一个ajax来解决问题，我认为解决方案与我的问题无关，如果有人有兴趣给我发电子邮件以提供更多信息。就我原来的问题而言，答案是ajax请求正在执行，因为它们是在函数中编写的，但有时结果不会以相同的顺序返回，除非将其添加到ajax调用中

async：false

在这篇文章中找到了解决方案 How do I make jQuery wait for an Ajax call to finish before it returns?

Answer 1

就像@ManoDestra在评论中所说，你不应该执行引用或操作DOM元素的函数，直到加载之后。最好将newServiceModal()代码放在body的末尾，或者在window.onload事件或$(function(){ ... })包装中运行。

JavaScript函数是否始终以相同的方式执行？

1 个答案: