Подключить Ajax.BeginForm, которого не было во время doc.ready?

У меня есть страница MVC, которая загружает Partial через Ajax.ActionLink, который работает, а затем загруженный Partial содержит форму с Ajax.BeginForm. Эта форма не подключается к ненавязчивому ajax, а вместо этого выполняет обновление страницы (я проверил это в сетевом журнале браузера, который показывает, что инициатором, когда я нажимаю «Отправить», является браузер, а не jquery).

Я считаю, что проблема заключается в том, что, поскольку форма не существовала при загрузке страницы (но позже добавлялась через Ajax.ActionLink), то ненавязчивый ajax не видел атрибуты data-ajax во вновь добавленной форме и подключить необходимые события. Я предполагаю, что это происходит только в document.ready, а формы ajax тогда не существовало.

Могу ли я что-нибудь сделать, чтобы сказать: "Привет, Ненавязчивый Ajax, пожалуйста, взгляните на мою страницу еще раз, когда у меня есть несколько новых элементов, помеченных с помощью data-ajax, и подключите их"?

Спасибо.

Глядя на ненавязчивый источник ajax, он имеет следующее:

$("form[data-ajax=true]").live("submit", function (evt) {
        var clickInfo = $(this).data(data_click) || [];
        evt.preventDefault();
...

Сгенерированный тег формы выглядит следующим образом:

<form action="/Path/Create" class="form-horizontal" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#ParentContainer" id="PathForm" method="post" novalidate="novalidate">

Насколько я могу судить, селектор события .live должен выбирать новую форму, когда она загружается на страницу. Однако форма находится внутри модального окна начальной загрузки, поэтому я не знаю, помешает ли это как-то всплыть событию.

Я даже могу запустить это в консоли Chrome:

 $("form[data-ajax=true]").live("submit", function (evt) {
            var clickInfo = $(this).data(data_click) || [];
            evt.preventDefault(); });

И он успешно возвращает элемент формы, но когда я нажимаю кнопку «Отправить», он все равно полностью обновляет страницу. Я бы ожидал, что он, по крайней мере, ничего не сделает, так как я подключил его к preventDefault.


jquery ajax asp.net-mvc unobtrusive-ajax
person AaronLS    schedule 07.11.2012    source источник
comment
Какую версию jQuery вы используете? .live устарел с версии 1.7   -  person Jamie R Rytlewski    schedule 08.11.2012
comment
1.8, ненавязчивый файл ajax является файлом MS, но без номера версии. Я попробовал эксперимент с .on, запустив его до того, как динамическая форма была добавлена ​​на страницу, и это все равно не помешало отправке формы обновить страницу, мы думаем, что причиной являются вложенные формы: $(document).on("submit", "form[data-ajax=true]", function (evt) { evt.preventDefault(); return false });   -  person AaronLS    schedule 08.11.2012
comment
можете ли вы поместить весь исходный код в jsfiddle или что-то в этом роде, чтобы я мог видеть, как выглядит весь код или близко к нему?   -  person Jamie R Rytlewski    schedule 08.11.2012

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы ответить на мой собственный вопрос о ненавязчивом ajax и динамически загружаемом контенте, все должно нормально работать из коробки. То, как он подключается к событиям с помощью .live (устарело, все еще работает в настоящее время), должен обнаруживать формы, динамически загружаемые на страницу. Таким образом, очевидно, что он не страдает той же проблемой, что и ненавязчивая проверка делает.

Наша проблема не была связана с этим. Мы использовали модальный бутстрап, который порождал модальный div внутри формы. Поскольку модальное окно затем загружало другую страницу, содержащую форму, мы поняли, что у нас есть форма внутри формы (хотя на самом деле это не выглядело так, поскольку другая форма была модальной).

Чтобы решить эту проблему, мы переместили объявление модального div в первой форме за пределы формы. У нас все еще может быть ссылка, которая ссылается на модальное окно, чтобы показать его, но внутренняя форма модального окна не будет вложена в первую форму.

Я считаю, что причина, по которой методы .live и .on не перехватили событие, заключалась в том, что они зависят от события, которое всплывает в документе, и оно всплывает только до внешней формы, которая не была формой ajax. , поэтому не соответствует селектору.

Другим решением было бы написать .on побольше, чтобы событие перехватывалось, когда оно поднималось до контейнера внутренней формы, вместо того, чтобы направлять его в документ, где событие сначала достигнет внешней формы.

$('#innerModalId').on("submit", "form[data-ajax=true]", function (evt) {
   evt.preventDefault(); 
   ...
   return false 
});

Однако, поскольку это было частью библиотеки, это не идеальное решение, поскольку мне пришлось бы повторять их код. Нам не удалось обновить ненавязчивый ajax: http://nuget.org/packages/jQuery.Ajax.Unobtrusive

Но я думаю, что у нас все еще была бы проблема, поскольку даже с .on она все еще не работала из-за нашей проблемы со структурой страницы.

person AaronLS    schedule 08.11.2012