2012-04-21 20 views
6

के लिए simple_form साथ ajax/json अनुरोध सबमिट करने के मानक रेल form_for, मैं इस तरह के रूप में यद्यपि चयन और collection_select सहायकों ajax अनुरोध पारित करने में सक्षम था के साथ एक रास्ता है यह जानने के लिए कि simple_formवहाँ रेल

उत्तर

14

के साथ यह कैसे करें इसे समझें। तुम बस जोड़ने की जरूरत है इस:

:input_html => {"data-remote" => true, "data-url" => "/yoururl", "data-type" => :json} 
+1

धन्यवाद। एक फॉलो अप प्रश्न - आपने इसके लिए अपना जावास्क्रिप्ट कॉलबैक कैसे सेट किया? – Blake

+1

मैं इसे कार्यान्वित करने के तरीके पर उलझन में हूं। कोड की पूरी लाइन कैसी दिखती है? f.input: my_field: संग्रह => ???? – SteveO7

+0

कुछ नए ब्राउज़रों के लिए (2015 :)) फ़ॉर्म को ठीक तरह से काम करने के लिए आपको 'प्रारूप:: जेसन'' जोड़ना होगा, जैसे: '<% = simple_form_for (@object, html: {class: 'your_class' , आईडी: "#new '}}, url: your_resource_path (@object, format:: json), रिमोट: सत्य, प्रामाणिकता_टोकन: सत्य, डेटा: {टाइप:' json '}) करें | f |%> # कोड <%end%> ' – Aleks

2

अब यह यह करने के लिए वैध रास्ता लगता है:

:remote => true, :html => { :data => { :url => '/yoururl', :type => :json } } 

जो के रूप में गहरे लाल रंग का 1.9 हैश वाक्य रचना के साथ थोड़ा बेहतर लग रहे हो सकता है:

remote: true, html: { data: { url: '/yoururl', type: :json } } 

https://github.com/plataformatec/simple_form/wiki/HTML5-Attributes

+0

यह ': html_>' 'के बजाय input_html =>' होना चाहिए – Matt

6

मैं क्योंकि मैं कुछ परेशानी लगाना था, एक संबंधित अनुवर्ती पोस्ट करने के लिए करना चाहता था इसके लिए कॉलबैक को कैसे कार्यान्वित करें। मैंने यह आलेख बहुत उपयोगी पाया: http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-in-rails-3/

रहस्य या तो HTML5 डेटा विशेषता जोड़ने के लिए है, उदा। data-complete या (बेहतर) बाँध अपने फार्म (ऊपर लिंक लेख में देख 4. रिमोट जावास्क्रिप्ट कॉलबैक) के लिए रेल द्वारा प्रदान की ajax:complete या ajax:success कॉलबैक:

लेख से:

jQuery(function($) { 
    // create a convenient toggleLoading function 
    var toggleLoading = function() { $("#loading").toggle() }; 

    $("#tool-form") 
    .bind("ajax:loading", toggleLoading) 
    .bind("ajax:complete", toggleLoading) 
    .bind("ajax:success", function(event, data, status, xhr) { 
     $("#response").html(data); 
    }); 
}); 

CoffeeScript उदाहरण:

$("#new_post").on("ajax:success", (e, data, status, xhr)-> 
    console.log data 
) 
6

यह इसे इस तरह लिखने के लिए बेहतर है:

= simple_form_for sample_result, url: reject_sample_result_path(sample_result), method: :post, remote: true, input_html: {multipart: true} do |f| 

जब आप स्पष्ट रूप से data-url घोषित करते हैं तो यह अभी भी डिफ़ॉल्ट रूट गणना करेगा, जो मेरे मामले में विफल रहा क्योंकि डिफ़ॉल्ट मार्ग मौजूद नहीं थे (और अस्तित्व में नहीं होना चाहिए - क्योंकि मैं यूआरएल को ओवरराउल कर रहा हूं)। जब आप केवल url घोषित करते हैं तो यह केवल इसके बजाय दिया गया यूआरएल लेगा।

0

है कि मैं पाया है, और एक संपूर्ण उदाहरण के लिए यह करने के लिए सबसे आसान तरीका है, यह है:

आपके विचार में:

<%= simple_form_for :my_object, url: my_objects_path(format: :json), remote: true do |f| %> 
    <%= f.error_notification %> 
    <%= f.input :an_attribute %> 
    <%= f.submit %> 
<% end %> 

और अपने नियंत्रक में:

def create 
    @my_object = MyObject.new(my_object_params) 
    if @my_object.save 
    respond_to do |format| 
     format.html { redirect_to @my_object, notice: "Saved" } 
     format.json { render json: @my_object, location: my_object_url(@object), status: :created } 
    end 
    else 
    respond_to do |format| 
     format.html { render :edit } 
     format.json {render json: @my_object, status: :unprocessable_entity } 
    end 
    end 
end 

रेल 5 में सरल जेसन हैश बनाने के लिए जेबिल्डर के साथ नियंत्रक पर यह और भी आसान है लेकिन इसे वहां भी काम करना चाहिए।