Почему не открывается модальное окно?

Question

[nurzhannogerbek]

Здравствуйте! Почему не открывается модальное окно?

На странице есть два модальных окна. Внутри первого модального окна (id='modal-lg') есть кнопка, которая должна была закрыть первый и открыть второе модальное окно, но при нажатии лишь закрывается первое модальное окно. Где мой косяк?

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-lg").modal('hide');
                $("#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;
    };

    // BUTTON
    $("#requirement-add-button").click(loadForm);
    $("#modal").on("submit", ".js-requirement-add-form", saveForm);
});

Answer 1

[Lumore]

Откройте консоль, может там найдется ошибка. Еще можно посмотреть Network, в той же панели разработчика.

Comments

[nurzhannogerbek]

Здравствуйте! Я открыл инструмент разработчика и в разделе веб-консоль нет никаких ошибок.

Есть лишь пару предупреждений такого рода: `Ошибка при парсинге значения «display». Потерянное объявление. bootstrap.min.css:6:102063`

К тому же заметил следующее:
1) При открытии первого модального окна:

GET XHR (url_adress) [HTTP/1.1 200 OK 17мс]

2) При нажатии на кнопку, которая находится внутри первого модального окна выводит:

POST XHR (url_adress) [HTTP/1.1 200 OK 23мс]

При этом нужно отметить, что url_adress одинаковые в обоих случаях. Что вы думаете по этому поводу и что вы думаете по поводу моего вышестоящего кода?

[Lumore]

По поводу кода:
1) Лучше скрывать все модалки, чтобы не париться с этим позже:
$(".modal").modal("hide");
2) Сначала вставляем данные, а потом показываем модалку, меняем местами строчки:

beforeSend: function () {
                $(".modal").modal('hide');
                $("#modal .modal-content").html(data.html_requirement_form);
            },
            success: function (data) {
                $("#modal").modal("show");
            }

3) Так же возможно вы жмете на кнопку, которая была загружена через AJAX и DOM ее не видит, меняем элемент клика:

$(document).on("click", "#requirement-add-button", loadForm);

А насчет GET и POST, то все правильно - вы загружаете форму через GET, а сабмитите через POST.

[nurzhannogerbek]

Lumore: Пробовал вами предложенные варианты, к сожалению не помогло. При нажатии на кнопку по прежнему закрывается первое модальное окно(id='modal-lg'), а второе не открывается (id='modal'). Можно ли как-то проверить 3 пункт?

[Lumore]

NogerbekNurzhan: Попробуйте создать две кнопки и выводить что-нибудь в консоль двумя разными способами: 1) $(el).click(function() { ... }); 2) $(document).on('click', el, function() { ... }); И при этом чтобы эти кнопки были загруженны через AJAX

[nurzhannogerbek]

Lumore: Получается содержимое первого модального окна, включая кнопку, загружается через AJAX. Я попробовал следующий код. В 1 варианте при нажатии срабатывает alert, но вот в консоль ничего не выводится. Во 2 варианте при нажатии кнопки не срабатывает ни alert, ни console.log. Запутался окончательно. Раз откликается на alert в первом варианте можно ли считать, что DOM видит кнопку, которая была загружена через AJAX или все же нет?! Видите ли вы выход из данной странной ситуации?

$(document).on("click","#requirement-add-button",function(){
        alert('Вы нажали кнопку!');
        console.log('Вы нажали кнопку!');
});

$("#requirement-add-button").click(function(){
        alert('Вы нажали кнопку!');
        console.log('Вы нажали кнопку!');
 });