Я использую AJAX для рендеринга частей JavaScript с использованием Ruby on Rails 5.3. Как я могу ссылаться на элемент, в котором он был отрендерен, используя javascript / jquery, когда рендеринг завершен?
У меня есть различные части формы, которые отображаются в одном элементе, хранящемся в нижнем колонтитуле Ранее я ссылался на некоторый javascript в нижней части моего партиала формы, который инициализирует модальное.
Теперь я хочу иметь два разных типа модалов с возможностью одновременного открытия обоих. С созданием второй модальной обертки мне теперь нужно разобраться, как я могу инициализировать правильный модал (я могу открыть модал в модале, и поэтому должен избегать повторной инициализации уже открытого модала).
Любая помощь будет отличной! Спасибо всем.
Я отображаю партиалы с помощью следующего кода: они выполняются отдельно как разные запросы.
$('#modal_partial_normal').html('<%= escape_javascript(render('form1')) %>');
$('#modal_partial_footer').html('<%= escape_javascript(render('form2')) %>');
JS, который инициализирует модалы , следует документации, приведенной в Materialise here .
$("#modal_partial_footer").modal("open");
И HTML:
<div id="form_modal_wrap">
<div id="modal_partial_footer" class="modal bottom-sheet modal-fixed-footer">
... partial rendered here ...
</div>
<div id="modal_partial_normal" class="modal modal-fixed-footer">
... partial rendered here ...
</div>
</div>
JS работает для одного модального типа, но в настоящее время я визуализирую каждый модал как модальный тип «нижнего колонтитула», поэтому я просто запускаю его после любого рендеринга модальной части. Я хотел бы иметь возможность отображать некоторые как нижние колонтитулы, а другие как обычные модалы. Мне нужно открыть обычный модал из модального колонтитула.
попытки решения
Я пытаюсь разобраться, когда модал отображается, и инициализировать правильный тип - то есть нижний колонтитул или обычный тип.
Проверка успешного завершения AJAX-запроса срабатывает только один раз, когда я бы этого хотел, но я не могу сказать, в каком элементе он был обработан.
$('a[data-remote="true"]').on("ajax:success", function(evt, xhr, settings){
console.log("AJAX request successful");
});
Распознавание изменений в дереве DOM не работает, так как оно запускается слишком часто, и инициализация завершается неудачно, хотя и позволяет мне определить, какой элемент частично отображался в нем.
$("footer").on('DOMSubtreeModified', "*[id^='modal_partial']", function() { ... });