Модальное окно Bootstrap, автоматически получающее содержимое AJAX

Я пытаюсь создать модальное окно начальной загрузки, содержащее результат запроса AJAX.

мой код начальной загрузки выглядит следующим образом

{{--Bootstrap modal--}}
<div id = "exampleModal" class = "modal" tabindex = "-1" role = "dialog">
    <div class = "modal-dialog" role = "document">
        <div class = "modal-content">
            <div class = "modal-header">
                <h5 class = "modal-title">Electronic mail title</h5>
                <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
                    <span aria-hidden = "true">&times;</span>
                </button>
            </div>
            <div class = "modal-body">
                <p>Electronic mail body text goes here.</p>
            </div>
            <div class = "modal-footer">
                <button type = "button" class = "btn btn-primary">Save changes</button>
                <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>

Также есть кнопка, поскольку вы можете видеть, что ее атрибут HREF выполняет вызов маршрута, который предназначен для вызова через AJAX.

<a href = "api/myroute/someID" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModal">Preview Reminder</a>

Я написал внутренний код, который возвращает контент из api / myroute / someID

Пока что внешний код - это образец кода, скопированный / вставленный из документации начальной загрузки, а внутренний код - мой собственный.

Следующим шагом является написание некоторого Javascript, который принимает содержимое вызова AJAX в api / myroute / someID и помещает его в модальное окно.

Проблема в том, что хотя я еще НЕ НАПИСАЛ ЭТОТ КОД Контент, возвращаемый по этому маршруту, автоматически помещается в модальное окно.

Однако это работает правильно только один раз. Открытие второго модального окна и установка другого «someID» в конце маршрута (чтобы он возвращал другие данные) приводит к появлению модального окна, содержащего результат первого вызова AJAX.

У меня 2 вопроса.

1) Как это работает? 2) Как заставить его обновлять содержимое модального окна при каждом его открытии

извините, я использую bootstrap 3

megaman 26.04.2018 12:35

URL-адрес загружает данные в модальное окно с помощью remote вариант. Этого нет в Bootstrap 4.

Zim 26.04.2018 12:39

хорошо, почему каждый раз, когда я открываю модальное окно с помощью другой кнопки (с другим атрибутом href), он показывает только контент, который был загружен при первом открытии модального окна, как мне обновлять контент каждый раз, когда он открывается?

megaman 26.04.2018 12:43

о, я вижу: «Если предоставлен удаленный URL-адрес, контент будет загружен один раз с помощью метода загрузки jQuery», ну, это очень легко сделать, чтобы что-то работало с отметкой!

megaman 26.04.2018 12:45

«Обновлять модальное окно каждый раз» - это, по сути, повторяющийся вопрос. Поищите другие сообщения о "загрузочном модальном jquery ajax".

Zim 26.04.2018 13:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
41
1

Ответы 1

Модальные окна Bootstrap 3 имеют функцию, при которой, если открывающий элемент имеет атрибут href, модальное окно заполняется ответом на HTTP-запрос, который делает атрибут href.

Эта функция была удалена из начальной загрузки 4. Это работает только один раз для одного и того же окна модели.

Другие вопросы по теме