jQuery और रेल के साथ AJAX सॉर्ट करने योग्य सूचियों को कार्यान्वित करें 3

Question

कई समान प्रश्न हैं लेकिन मुझे वह नहीं मिल रहा है जो मेरी आवश्यकताओं को पूरा करता है।

आपको लगता है कि यह एक बहुत ही आम समस्या है और वहां एक पॉलिश मणि समाधान होना चाहिए।

मैं सूची को पुन: व्यवस्थित करना चाहता हूं और प्रत्येक आइटम की स्थिति को AJAX के साथ डेटाबेस में सहेजना चाहता हूं, बेसकैम्प की सूची में टू-डू आइटम की तरह। हालांकि यह घोंसला वाली सूचियों में वस्तुओं को एक स्तर से दूसरे स्थानांतरित करने में सक्षम होना अच्छा होगा, लेकिन मुझे वास्तव में उस सुविधा की आवश्यकता नहीं है।

मैं रेल 3.1, jQuery का उपयोग कर रहा हूं। सॉर्ट करने योग्य jQuery प्लगइन के साथ समाधान को एकीकृत करने के लिए यह समझदारी होगी लेकिन मैं किसी भी समाधान के लिए खुला हूं।

यदि आप किसी भी तैयार समाधान के बारे में नहीं जानते हैं, तो क्या आप मुझे इसके बारे में पॉइंटर्स दे सकते हैं।

मेरे ऐप्स act_as_category प्लगइन का उपयोग करने के लिए प्रयुक्त होते हैं लेकिन इसे बनाए रखा नहीं जा रहा है और मैंने मैन्युअल रूप से अन्य सभी पेड़ सुविधाओं को लागू किया है।

Answer 1

यहां इस पर एक सभ्य ब्लॉग पोस्ट है:

1. सामने के अंत jQuery UI sortable का उपयोग करता drag- अनुमति देने के लिए:

   webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery/

   फिर भी http://web.archive.org/web/20120315004343/http://webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery

   मूलतः

   पर चलता था और डीओएम तत्वों की पुनरावृत्ति

2. हमें पीछे की ओर तों acts_as_list डेटाबेस

अद्यतन करने को संभालने के लिए इन दोनों यथोचित मजबूत लग रहे हैं, और मैं उल्लिखित बुनियादी कार्यक्षमता पर एक परिवर्तन को लागू करने में सक्षम था, एक ही स्क्रीन पर नया आइटम बनाना और कुछ सीएसएस के साथ 3 घंटियाँ और सीटी (बस .your-class.ui-sortable-helper उचित तरीके से शैली) बिना किसी झगड़े के। मैंने ब्राउज़रों में बड़े पैमाने पर परीक्षण नहीं किया है, लेकिन यह वेबकिट और फ़ायरफ़ॉक्स में खुश है।

ब्लॉग पर उदाहरण वास्तव में act_as_list का उपयोग नहीं करता है - यह सिर्फ jQuery का उपयोग करके ऑब्जेक्ट आईडी को क्रमबद्ध करता है और उसके बाद नियंत्रक में सीधे उन पर पुनरावृत्ति करता है - लेकिन मुझे लगता है कि यदि आपको आवश्यकता हो तो उन कार्यों को पीछे की ओर रखना उपयोगी है किसी कारण से वहां से परिवर्तन स्वचालित करने के लिए।

ब्लॉग पोस्ट से कुंजी कोड:

जावास्क्रिप्ट:

$(document).ready(function(){ 
    $('#books').sortable({ 
    axis: 'y', 
    dropOnEmpty: false, 
    handle: '.handle', 
    cursor: 'crosshair', 
    items: 'li', 
    opacity: 0.4, 
    scroll: true, 
    update: function(){ 
     $.ajax({ 
     url: '/books/sort', 
     type: 'post', 
     data: $('#books').sortable('serialize'), 
     dataType: 'script', 
     complete: function(request){ 
      $('#books').effect('highlight'); 
     } 
     }); 
    } 
    }); 
}); 

दृश्य:

<li id="book_<%= book.id %>"> 

इसमें शामिल एक आईडी की तरह book_5, जो जावास्क्रिप्ट में $('#books').sortable('serialize') की अनुमति देता है एक प्रश्न बनाने के लिए पैरामीटर जो रेल पार्स कर सकते हैं।

नियंत्रक:

def sort 
    @books = Book.all 
    @books.each do |book| 
    book.position = params['book'].index(book.id.to_s) + 1 
    book.save 
end 

इस प्रकार से आपका मॉडल पहुंच नियंत्रित दायरे वाला/पर निर्भर करता है, उचित नहीं हो सकती।अपने स्वयं के समाधान में मैंने params['book'] पर इसके बजाय पुनरावृत्त किया, और केवल कुछ अर्थपूर्ण मूल्य स्वीकार किए जाने के लिए कुछ जांच/त्रुटि-हैंडलिंग शामिल की गई।

(पी एस यह काफी दृष्टिकोण रयान बेट्स उसके, paywalled, एक ही विषय पर videocast में देता है के समान है।)

(पी पी एस मुझे पता है यह एक पुराने सवाल है, लेकिन इतनी के रूप में, कर रहा हूँ अक्सर स्टैक ओवरव्लो के साथ, Google ने मुझे यहां प्राप्त किया, इसलिए मैंने सोचा कि मैं जो करता हूं उसे दस्तावेज करता हूं।)