Question

我在项目中使用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);
});

Answer 1

不确定服务器端脚本（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 ); } }); };

从其他模态打开bootstrap模态

1 个答案: