Jquery не перехватывает отправку формы - Asp.net Mvc & Fancybox

Question

Я занимаюсь разработкой приложения, которое использует Jquery для перехвата моих отправлений формы, чтобы вместо этого сделать Ajax Submission. Все идет нормально! Все работает отлично. Если на клиенте не включен JS, приложение продолжает работать безупречно.

Что ж, сегодня я создал новую форму, но JQuery не перехватывает отправку. Это правда, что я немного изменился, но все же. Это должно работать.

У меня есть простой PartialView с формой, диапазоном и двумя кнопками (НЕТ (кнопка) и ДА (отправить)). Я использую RenderPartial («MyPartial») в DIV и плагин FancyBox для отображения его в качестве модального. В зависимости от того, по какой ссылке щелкнуть мышью, чтобы показать модальное окно, я изменяю действие (сообщить о спаме или удалить элемент) формы и диапазона с определенным сообщением. Как «модное» подтверждающее сообщение !!

Опять, пока все хорошо. Я изменяю действие формы, и оно работает (используя alert (form.attr (action)), я изменяю диапазон с нужным сообщением, и оно работает, но когда я нажимаю на кнопку, чтобы отправить форму (YES), она идет прямо и я делаю обычный запрос, а не запрос Ajax, и я хотел.

Это форма:

<form id="dialogForm" action="" method="post">
  <div class="form_item_button">
     <span id="dialogQuestion" style="color: Black;"></span>
     <button id="btDialogNo" type="button" value="button" class="btn">No</button>
     <button id="btDialogYes" type="submit" value="Submit" class="btn">Yes</button>
  </div>
</form>

И это скрипт для перехвата отправки формы:

    $(document).ready(function() {
         var theForm = $("#dialogForm");

         // I CHECK IF THE ACTION WAS SET PROPERLY
         // MY TESTS SHOW ME THAT THE ACTION IS OK!
         alert(alert(theForm).attr("action")); 

         theForm.submit(function(e) {
             e.preventDefault();

             $.ajax({
                 type: "POST",
                 data: theForm.serialize(),
                 url: theForm.attr("action"),
                 dataType: "json",
                 success: function(json) {
                     alert(json.Status);
                 },
                 error: function() {
                     alert('An error occurred while processing your request. Please try again.');
                 }
             });
         });

Есть идеи, ребята ??? Я потерял весь свой день, пытаясь это исправить !! (

Спасибо

Answer 1

Я заметил, что вы используете <button> вместо <input> для кнопки отправки.

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

    alert(e.attr("id"));

Если он ничего не возвращает, то проблема в том, что нажатие кнопки отправки вызывает событие, которое прослушивается, то есть форма отправляется.

Однако, если он возвращает идентификатор кнопки, а не форму, проблема, вероятно, заключается в том, что вы используете preventDefault на кнопке, а не на форме (или наоборот). Возможно, это можно исправить, просто используя return false и полностью избавившись от e.preventDefault().

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

Кстати, ajax вообще происходит, но вы также получаете отправку формы или вся функция игнорируется?

У меня была форма, которая отправляла бы, несмотря ни на что, если я не добавил что-то еще для функции validate, кроме функции validate. В конечном счете это было связано с неправильным событием, которое вызывается. Дополнительный объем работы, который я добавил, каким-то образом сделал это так, что событие, которое я прослушивал , в конечном итоге было захвачено.

Answer 2

Два вопроса.

1. Строка, которую вы используете для оповещения.
2. В вашем вызове ajax отсутствуют некоторые закрывающие скобки.это код ...

   $(document).ready(function() {
            var theForm = $("#dialogForm");
   
            // I CHECK IF THE ACTION WAS SET PROPERLY
            // MY TESTS SHOW ME THAT THE ACTION IS OK!
            alert(theForm.attr("action")); 
   
            theForm.submit(function(e) {
                e.preventDefault();
               alert('here');
                $.ajax({
                    type: "POST",
                    data: theForm.serialize(),
                    url: theForm.attr("action"),
                    dataType: "json",
                    success: function(json) {
                        alert(json.Status);
                    },
                    error: function() {
                        alert('An error occurred while processing your request. Please try again.');
                    }
                });
            });
   });​​​​
   

   Наслаждайтесь.

Answer 3

preventDefault() представляется устаревшим . Я не уверен из документации, был ли он удален, но это новый способ получить тот же эффект с обработчиком событий submit() :

 theForm.submit(function(e) {
  blah blah blah
  .............
  return false;
  }

Дайте мне знать, если это работает. Мне определенно любопытно.