Как подать заявку с помощью AJAX и с дополнительными полями

Question

Пусть у меня есть простая форма, как показано ниже

<%= form_for(@category) do |f| %> 
    <% if @category.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@category.errors.count, "error") %> prohibited this category from being saved:</h2> 

     <ul> 
     <% @category.errors.full_messages.each do |message| %> 
     <li><%= message %></li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 

    <div class="field"> 
    <%= f.label :name %><br> 
    <%= f.text_field :name %> 
    </div> 
    <div class="field"> 
    <%= f.label :enabled %><br> 
    <%= f.check_box :enabled %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %> 

Я хочу представить эту форму с помощью Ajax запроса. Идентификатор моей формы: new_category. Поэтому я попробовал что-то вроде этого

<script type="text/javascript"> 
    $("#new_category").click(function() { 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: '/categories', 
     dataType: "json", 
     success: function (result) { 
     return false 
     }, 
     error: function() { 
     window.alert("Something went wrong! Please try again"); 
     } 
    }); 
    }); 
</script> 

Это не отправляет мою форму. Я думаю, что чего-то не хватает. Кроме того, перед отправкой формы я хочу заменить содержимое поля имени фиксированной строкой «Это строка примера». И нужно отправить некоторые другие фиксированные данные, такие как "user_id" => current_user.id, "user_name" => current_user.name

Эти два поля user_id и user_name не в таблице категории. Так что у меня есть белый список в контроллере? Если да, то как я могу делать что?

Answer 1

во-первых, я не нахожу #new_category ID на вашей форме, делает рельсы добавить автоматически т.е. рамки конкретнее? во-вторых, и самое главное, вы не посылаете параметр данных в ваших настройках АЯКС.

Как и предполагалось другими, необходимо отправить данные как часть вашего запроса ajax. Поэтому вы можете добавить данные:

к запросу ajax. Попробуйте:

$("#new_category").serialize() 

Таким образом, ваш запрос будет:

<script type="text/javascript"> $("#new_category").click(function() { 
$.ajax({ 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: '/categories', 
    dataType: "json", 
    data: $("#new_category").serialize() 
    success: function (result) { 
    return false 
    }, 
    error: function() { 
    window.alert("Something went wrong! Please try again"); 
    } 
}); 

});

Answer 2

Добавить класс или идентификатор в форме и представить кнопку, как: -

<%= form_for(@category), id: "category_form" do |f| %> 
    <%= f.submit "Submit", class: "add_category" %> 
<% end %> 

Если вы использовали разработки и current_user присутствует, то вы можете отправить дополнительные Params со значениями формы, как: -

<script type="text/javascript"> 
    $(document).on('click', '.add_category', function(event) { 
     event.preventDefault(); 
     var user_id = "<%= current_user.id %>" 
     var username = "<%= current_user.username %>" 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: '/categories', 
      dataType: "json", 
      data: $("#category_form").serialze + "&user_id="+user_id+"&username="+username 
     }); 
    }); 
</script>