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

Question

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

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

У меня есть простой PartialView с формой, диапазоном и двумя кнопками (NO (кнопка) & YES (submit)). Я использую 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.'); 
       } 
      }); 
     }); 

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

Thanks

Answer 1

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

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

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

Answer 2

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

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

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

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

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

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

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

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

Answer 3

Два вопроса.

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.'); 
       } 
      }); 
     }); 
});​​​​ 

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