Правильно перезагрузите и переформатируйте всплывающее окно Bootstrap после загрузки данных с помощью ajax. ⇐ CSS

[Anonymous]

Прежде всего позвольте мне заявить, что существует множество статей, посвященных простой загрузке данных вызова Ajax во всплывающее окно Bootstrap 4.0; этот вопрос касается немного другой темы.
Проблема, с которой я столкнулся при использовании моего всплывающего окна, заключается в том, что после его загрузки элемент появляется в необычном положении на странице, как показано ниже:



Вместо того, чтобы загружать над значком заметки, всплывающее окно появляется ниже и начинает выходить за пределы экрана (в нем должно быть семь записей). Причина, по-видимому, заключается в том, что когда всплывающее окно изначально отображается как контейнер представления, ни один из внутренних данных/html еще не загружен - и как только эти данные загружаются, всплывающее окно отображает его. не приспосабливая себя. Я нашел трюк для настройки контейнерного представления: просто прокручивайте страницу, что по сути обновляет само всплывающее окно.
Код для кнопки заметки и всплывающего окна< /code> контейнер выглядит следующим образом:

Код: Выделить всё

$(function () {
$('[data-toggle="popover"]').on('inserted.bs.popover', function (evt) {
getViewNoteModal($(evt.target));
});
});
function getViewNoteModal(caller) {
var $caller = $(caller);
var $noteContainer = $('#editNotes');
// The $caller is used to retrieve parameters.
...
$.ajax({
// GetNoteViewer is a C# method that returns the view that goes into #editNotes.
url: "@Url.Action("GetNoteViewer")",
method: "GET",
data: {
// parameters...
},
success: function (data) {
$noteContainer.html(data);
}
});
}

...

[/i]

Кажется, наиболее логичным было бы вручную удалить всплывающее окно и быстро показать его через $('[data- toggle="popover"]').popover('show'); внутри блока успеха функции Ajax. Проблема с этим подходом заключается в том, что удаление всплывающего окна также удаляет данные внутри него - и простое «показ» его без удаления приводит к бесконечному циклу обратных вызовов для всплывающего окна.
На данный момент я очень близок к тому, чтобы всплывающее окно отображалось так, как должно, поскольку все функции внутри него работают отлично, а форматирование представления внутри также отформатирован как задумано. Единственная проблема теперь — заставить всплывающее окно появиться в правильном месте с первого раза без необходимости прибегать к каким-либо ухищрениям, чтобы установить его в правильное положение.

Подробнее здесь: https://stackoverflow.com/questions/787 ... -with-ajax