Pregunta Enviar formulario en rieles 3 en forma de Ajax (con jQuery)


Soy un principiante en rails y jQuery. Tengo dos formularios separados en una página y deseo enviarlos por separado en formato ajax (con jQuery). Esto es lo lejos que llegué. ¿Alguien puede agregar o corregir este código para que funcione? Estoy usando Rails 3.1 y jQuery 1.6. Gracias de antemano.

application.js

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

primera forma:

<%=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%>

segunda forma:

<%=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 tiene la misma forma que SchoolController


75
2017-07-17 10:45


origen


Respuestas:


Tú quieres:

  1. Detenga el comportamiento normal de enviar.
  2. Envíalo a través de ajax al servidor.
  3. Obtenga una respuesta y cambie las cosas en consecuencia.

El siguiente código debería hacer eso:

$('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
2017-07-17 11:22



Si utiliza :remote => true en sus formularios, puede enviarlos con JavaScript con

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

57
2018-04-15 14:56



La forma preferida en Rails 3 para hacer la presentación de formulario ajax es utilizar Rails-ujs.

Básicamente, usted permite que Rails-ujs haga el sometimiento ajax por usted (y no necesitará escribir ningún código js). Luego, simplemente escriba el código js para capturar el evento de respuesta (u otros eventos) y haga lo suyo.

Aquí hay algunos códigos:

Primero, usa el remoto opción en form_for entonces la forma se enviará vía ajax por defecto:

form_for :users, remote:true do |f|

Luego, cuando desee realizar alguna acción basada en el estado de respuesta de Ajax (por ejemplo, respuesta exitosa), escriba la lógica de Javscript de la siguiente manera:

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

Existen varios eventos a lo que puedes conectar.


33
2018-05-09 10:40



Para enviar el formulario a través de AJAX, puede pasar :remote => true al form_for ayudante. Por defecto, los rieles 3.0.x usan el prototipo js lib, pero puede cambiarlo a jquery con el jquery-rails gema (que es el valor predeterminado para los rieles 3.1). bundle install y luego rails g jquery:install para reemplazar los archivos del prototipo con jquery.

Después de eso, solo tendrás que manejar la devolución de llamada. Echa un vistazo a esta screencast


13
2017-07-17 12:42



es muy importante en tu solicitud con ajax stop the beahavior default, envía remote: true en tu form_for

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

<% end %>

en tu 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
2018-03-29 15:52



Nada aquí funcionó para mí, mi problema era que la biblioteca modal de jQuery rompería mis formularios para que no se enviaran a través de datos remotos si abrí una ventana modal, pero encontré una solución.

Primero agregue el complemento jQuery Form a su directorio javascript de activos: http://malsup.github.io/jquery.form.js

Ahora anule el método de envío para su formulario. Por ejemplo, podrías hacer algo como esto:

= 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
2018-01-31 22:13