AJAX форма перезагрузки страницы при вызове preventDefault()

Question

У меня есть приложение Node/Express/Mongo, и я пытаюсь выполнить вызов AJAX, данные теперь сохраняются в порядке, но страница перезагружается, даже когда я пользователь preventDefault() в AJAX вызов. Почему это происходит?

var categoryButton = function(){ 
event.preventDefault(); 
$("#add_category_form").submit(function (event){ 
    event.preventDefault(); 

    $.ajax({      //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from. 
     url: $("add_category_form").attr("action"), 
     type: "POST", 
     dataType: json, 
     done: function (result) { 
      alert("successful"); 
      //console.log(result.categories); 
     }, 
     fail: function (fail){ 
      console.log(fail); 
     } 
    }); 
}); 
}; 

Вот HTML

<section id="event_categories_section" style="display:none;" class="col-md-6"> 
        <form id="add_category_form" onsubmit="categoryButton" method="POST" action="/user/categories/<%=user._id%>"> 
         <label for="input_category_name">Add a category for your Events</label> 
         <div class="input-group"> 
          <div class="input-group-btn"> 
           <input type="submit" id="add_category_button" value="Add Category!" class="btn btn-primary dropdown-toggle"></input> 
          </div> 
          <input class="form-control" id="input_category_name" name="user[category]" placeholder="Category Name" required type="text" minlength="2" data-id="<%= user._id %>"> 
         </div> 
        </form> 
        <hr> 
        <div class="col-md-6"> 
         <h3>List of Categories</h3> 
         <section class="well" id="list_category_section"> 
          <% user.categories.forEach(function(category){ %> 
          <p><%= category %></p> 
          <% }); %> 
         </section> 

        </div> 
       </section> 

Answer 1

Использование return false в конце вашей .submit() функции

возвращение ложным из обработчика событий JQuery фактически то же самое, как вызов как event.preventDefault и event.stopPropagation на переданном объекте jQuery.Event.

event.preventDefault() предотвратит появление события по умолчанию.

event.stopPropagation() предотвратит появление пузыря.

Answer 2

Обновить код и проверить

<section id="event_categories_section" style="display:none;" class="col-md-6"> 
        <form id="add_category_form" method="POST" action="/user/categories/<%=user._id%>"> 
         <label for="input_category_name">Add a category for your Events</label> 
         <div class="input-group"> 
          <div class="input-group-btn"> 
           <input type="submit" id="add_category_button" value="Add Category!" class="btn btn-primary dropdown-toggle"></input> 
          </div> 
          <input class="form-control" id="input_category_name" name="user[category]" placeholder="Category Name" required type="text" minlength="2" data-id="<%= user._id %>"> 
         </div> 
        </form> 
        <hr> 
        <div class="col-md-6"> 
         <h3>List of Categories</h3> 
         <section class="well" id="list_category_section"> 
          <% user.categories.forEach(function(category){ %> 
          <p><%= category %></p> 
          <% }); %> 
         </section> 

        </div> 
       </section> 

Ajax раздел: -

$(function() { 
$("#add_category_form").submit(function (event){ 
    event.preventDefault(); 

    $.ajax({      //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from. 
     url: $("add_category_form").attr("action"), 
     type: "POST", 
     dataType: json, 
     done: function (result) { 
      alert("successful"); 
      //console.log(result.categories); 
     }, 
     fail: function (fail){ 
      console.log(fail); 
     } 
    }); 
}); 
}); 

Answer 3

удалить onsubmit атрибут из формы и вызовите categoryButton () функция, когда документ готов, тогда ваше событие отправки свяжется с вашей формой и все будет работать правильно. Я только немного изменил ваш код, попробуйте его и поделитесь своими отзывами.

$(function() { 
    categoryButton(); 
    }) 
var categoryButton = function(){ 
$("#add_category_form").submit(function (event){ 
    event.preventDefault(); 

    $.ajax({      //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from. 
     url: $("add_category_form").attr("action"), 
     type: "POST", 
     dataType: json, 
     done: function (result) { 
      alert("successful"); 
      //console.log(result.categories); 
     }, 
     fail: function (fail){ 
      console.log(fail); 
     } 
    }); 
}); 
};