其他模態的開放引導模態

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

  };