[英]Open bootstrap modal from other modal
我在项目中使用bootstrap 4和AJAX。
在页面上有2个模型。 在第一个模态(id='#modal-lg')
我有一个必须打开第二个模态(id='#modal')
按钮。 当我单击该按钮时,它没有打开第二个模态。 它只是关闭第一个模态。 如何解决这个问题? 我在哪里弄错了?
template.html:
{# FIRST MODAL #}
<div class="modal fade" id="modal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button id="requirement-add-button" data-url="{% url 'project:requirement_add' %}">
{% trans 'Add New Requirement' %}
</button>
</div>
</div>
</div>
</div>
{# FIRST MODAL #}
{# SECOND MODAL #}
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
{# SECOND MODAL #}
JS:
$(function () {
var loadForm = function () {
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal").modal("show");
},
success: function (data) {
$("#modal .modal-content").html(data.html_requirement_form);
}
});
};
var saveForm = function () {
var form = $(this);
$.ajax({
url: form.attr("action"),
data: form.serialize(),
type: form.attr("method"),
dataType: 'json',
success: function (data) {
if (data.form_is_valid) {
$("#requirement-table tbody").html(data.html_requirement);
$("#modal").modal("hide");
}
else {
$("#modal .modal-content").html(data.html_requirement_form);
}
}
});
return false;
};
// CREATE
$("#requirement-add-button").click(loadForm);
$("#modal").on("submit", ".js-requirement-add-form", saveForm);
});
不确定服务器端脚本的结果(ajax结果)。 但是我做了一个概念验证示例,从第一个模态触发了第二个模态。 如下所示,它工作正常。
您是否检查过ajax数据的结果?
您是否尝试console.log
或调试data.html_requirement
和/或data.html_requirement_form
的结果?
$(function() { // open 1st modal on load $("#modal-lg").modal({ backdrop: "static "}); $("#openFirst").on("click", function(e) { $("#modal-lg").modal({ backdrop: "static "}); }); $("#requirement-add-button").on("click", function(e) { // hide 1st modal $("#modal-lg").modal('hide'); // show 2nd modal $("#modal .modal-body").html("SECOND MODAL CONTENT"); $("#modal").modal({ backdrop: "static "}); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <button id="openFirst" class="btn btn-primary">OpenFirst</button> {# FIRST MODAL #} <div class="modal fade" id="modal-lg"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <button id="requirement-add-button" data-url="{% url 'project:requirement_add' %}"> {% trans 'Add New Requirement' %} </button> </div> </div> </div> </div> {# FIRST MODAL #} {# SECOND MODAL #} <div class="modal fade" id="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> TEST 2nd MODAL HERE </div> </div> </div> </div> {# SECOND MODAL #}
编辑
添加了小提琴。 https://jsfiddle.net/sudarpochong/Lwdfourp/
var loadForm = function (e) {
var btn = $(this);
$.ajax({
type: 'post',
// url: btn.attr("data-url"),
url: '/echo/json/', // JSFIDDLE TEST URL
data: {
delay: 2,
json: JSON.stringify({
field1: "value1",
html_requirement_form: "<input name='test-input' />"
})
},
success: function (data) {
// hide 1st modal
$("#modal-lg").modal('hide');
// show 2nd modal and add result
$("#modal").modal('show');
$("#modal .modal-body").html(
"URL: " + btn.data("url") + "<br/>" +
"CONTENT : " + data.html_requirement_form
);
}
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.