Отправить форму в rails 3 способом ajax (с помощью jQuery)

Я новичок в rails и jQuery. У меня есть две отдельные формы на одной странице, и я хочу отправить их отдельно в ajax-способе (с помощью jQuery). Вот как далеко я зашел. Кто-то может добавить или исправить этот код, чтобы заставить его работать. Я использую Rails 3.1 и jQuery 1.6. Заранее спасибо.

приложение.js

$(".savebutton").click(function() { 
    $('form').submit(function() {
         $(this).serialize();
    });
});

первая форма:

<%=form_for :users do |f| %>
  <fieldset>
    <legend>Basic details</legend>
    <%= f.label :school %>
    <%= f.text_field :school,:size=>"45",:class=>"round",:id=>"school" %><br/>      
  </fieldset>
  <p><%= button_to "save and continue",{:class=>"savebutton"} %></p>
<%end%>

второй форме:

<%=form_for :courses do |c| %>
  <fieldset>
    <legend>Your current classes</legend>
    <label>class:</label><%= c.text_field :subject,:size=>"45",:class=>"round" %><br/>
  </fieldset>
  <p><%= button_to "save and continue",{:class=>"savebutton"} %></p>
<%end%>

SchoolController

class SchoolController < ApplicationController
  respond_to :json
  def create
    @school = current_user.posts.build(params[:school].merge(:user => current_user))
    if @school.save
      respond_with @school
    else
      respond_with @school.errors, :status => :unprocessable_entity
    end
  end
end

CourseController находится в та же форма, что и SchoolController

6 75
ruby-on-rails-3 jquery ajax

6 ответов:

вы хотите:

  1. остановите нормальное поведение submit.
  2. отправить его через ajax на сервер.
  3. получить ответ и изменить соответствующим образом.

код ниже должен сделать это:

$('form').submit(function() {  
    var valuesToSubmit = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr('action'), //sumbits it to the given url of the form
        data: valuesToSubmit,
        dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
    }).success(function(json){
        console.log("success", json);
    });
    return false; // prevents normal behaviour
});
105

Если вы используете :remote => true в ваших формах вы можете отправить их с помощью JavaScript с помощью

$('form#myForm').trigger('submit.rails');
57

предпочтительный способ в рельсы 3, чтобы сделать AJAX для отправки формы, чтобы использовать рельсы-зто.

в основном вы позволяете Rails-ujs делать AJAX-отправку для вас (и вам не нужно будет писать какой-либо JS-код). Затем вы просто пишете JS-код для захвата события ответа (или других событий) и делаете свое дело.

вот код:

во-первых, используйте remote на form_for поэтому форма будет отправляться через ajax by по умолчанию:

form_for :users, remote:true do |f|

затем, когда вы хотите выполнить какое-либо действие на основе состояния ответа ajax (например, успешный ответ), напишите логику javscript следующим образом:

$('#your_form').on('ajax:success', function(event, data, status, xhr) {
  // Do your thing, data will be the response
});

здесь несколько событий который вы можете подключить.

33

чтобы отправить форму через AJAX, вы можете просто пройти :remote => true до form_for помощником. По умолчанию rails 3.0.x использует прототип JS lib, но вы можете изменить его на jquery с помощью jquery-rails gem (который является значением по умолчанию для rails 3.1). bundle install и затем rails g jquery:install для замены файлов прототипов на jquery.

после этого вам просто нужно будет обработать обратный вызов. Взгляните на этой видеоуроки

13

это очень важно в вашем запросе с ajax остановить beahavior по умолчанию, отправить remote: true в вашем form_for 

<%= form_for :session, url: sessions_path, remote: true, html: { class: "form-signin" } do |f| %>

<% end %>

в вашем ajax

$(".form-signin").on("submit", function(e) {
    $.ajax({
        url: $(this).attr('action'),
        data: $(this).serialize(),
        type: "POST",
        dataType: "json",
        success: function(response) {
            console.log(response)
        },
        error: function(xhr, textStatus, errorThrown) {}
    });
    e.preventDefault(); //THIS IS VERY IMPORTANT
});
2

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

Сначала добавьте плагин формы jQuery в каталог javascript активов: http://malsup.github.io/jquery.form.js

теперь переопределите метод отправки для вашей формы. Например, вы могли бы сделать что-то вроде этого:

= form_for @object, html: {class: "ajax_form_submit"}, authorization_token: true do |f|
  = f.text_input

javascript:

  $(document).on('ready page:load', function() {

    $(".ajax_form_submit").submit(function () {
      var form = $(this)
      form.ajaxSubmit({
        success: function (responseText, statusText, xhr) {
          console.log('success: ajax_form_submit')
        },
        error: function (jqXHR, statusText, errorThrown) {
          console.log('error: ajax_form_submit');
          console.log(jqXHR, statusText, errorThrown);
        }
      })
    })

  })
0