फार्म 3 रेलगाड़ियों में फार्म जमा करें (jQuery के साथ)

Question 1

मैं रेल और jQuery में एक शुरुआत कर रहा हूँ। मेरे पास एक पृष्ठ में दो अलग-अलग फॉर्म हैं और मैं उन्हें अलग तरीके से अजाक्स तरीके (jQuery के साथ) में जमा करना चाहता हूं। यह मुझे कितनी दूर है। क्या कोई इसे काम करने के लिए इस कोड को जोड़ या ठीक कर सकता है। मैं रेल 3.1 और jQuery 1.6 का उपयोग कर रहा हूं। पहले ही, आपका बहुत धन्यवाद।

application.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%>

स्कूलकंट्रोलर

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

कोर्सकंट्रोलर स्कूलकंट्रोलर के समान आकार में है

Question 2

आप चाहते हैं कि:

जमा के सामान्य व्यवहार को रोकें।
इसे अजाक्स के माध्यम से सर्वर पर भेजें।
एक उत्तर प्राप्त करें और उसके अनुसार चीजों को बदलें।

नीचे दिए गए कोड को ऐसा करना चाहिए:

$('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
});

Question 3

यदि आप :remote => trueअपने प्रपत्रों पर उपयोग करते हैं, तो आप उन्हें जावास्क्रिप्ट के साथ सबमिट कर सकते हैं

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

Question 4

रेल 3 फार्म में पसंदीदा तरीका है अजाक्स फार्म जमा करने के लिए रेल-उज् का उपयोग करना है।

मूल रूप से आप रेल्स- ujs को आपके लिए ajax सबमिट करने की अनुमति देते हैं (और आपको कोई js कोड लिखने की आवश्यकता नहीं होगी)। फिर आप बस प्रतिक्रिया घटना (या अन्य घटनाओं) को पकड़ने के लिए js कोड लिखते हैं और अपनी बात करते हैं।

यहाँ कुछ कोड हैं:

सबसे पहले, form_for में दूरस्थ विकल्प का उपयोग करें ताकि फ़ॉर्म डिफ़ॉल्ट रूप से अजाक्स के माध्यम से प्रस्तुत होगा:

form_for :users, remote:true do |f|

फिर जब आप अजाक्स प्रतिक्रिया स्थिति (जैसे सफल प्रतिक्रिया) के आधार पर कुछ कार्रवाई करना चाहते हैं, तो इस तरह से जावास्क्रिप्ट तर्क लिखें:

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

ऐसी कई घटनाएं हैं, जिन पर आप हुक लगा सकते हैं।

Question 5

AJAX के माध्यम से फॉर्म जमा करने के लिए आप बस सहायक :remote => trueको पास कर सकते हैं form_for। डिफ़ॉल्ट रेल द्वारा 3.0.x प्रोटोटाइप js lib का उपयोग करता है, लेकिन आप इसे jquery-railsमणि के साथ jquery में बदल सकते हैं (जो कि रेल 3.1 के लिए डिफ़ॉल्ट है)। bundle installयह और फिरrails g jquery:install jquery के साथ प्रोटोटाइप फ़ाइलों को बदलने के लिए।

इसके बाद आपको कॉलबैक को हैंडल करना होगा। इस पेंचकस पर एक नजर

Question 6

यह आपके अनुरोध में बहुत महत्वपूर्ण है अजाक्स के साथ बीहाइवर डिफ़ॉल्ट को रोकें, दूरस्थ भेजें: अपने form_for में सही

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

<% end %>

आपके अजाक्स में

$(".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
});

Question 7

यहां मेरे लिए कुछ भी काम नहीं किया, मेरा मुद्दा था कि jQuery मोडल लाइब्रेरी रिमोट डेटा के माध्यम से सबमिट किए जाने से मेरे रूपों को तोड़ देगा अगर मैं एक मोडल विंडो लाया, लेकिन मुझे एक ठीक मिला।

सबसे पहले अपनी संपत्ति जावास्क्रिप्ट निर्देशिका में jQuery के फार्म प्लगइन जोड़ें: 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);
        }
      })
    })

  })