Open bootstrap modal from other modal

Question

I use bootstrap 4 and AJAX in my project.

In page with 2 models. Inside first modal (id='#modal-lg') I have button which must to open second modal (id='#modal') . When I click that button it didnt open second modal. It just close first modal. How to fix this problem? Where I did mistake?

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

Not sure what's the result of your server-side script (ajax result). But I made a sample proof-of-concept to trigger second modal from first modal. As shown below, it's working fine.

Have you checked the result of your ajax data?
Did you try to console.log or debug the result of data.html_requirement and/or 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 #} 

---

Edit

Added fiddle. 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
            );
          }
      });

  };