从其他模态打开引导模态

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
            );
          }
      });

  };