2012-01-26 13 views
10

मैं स्कैला और लिफ्ट के लिए नया हूं और मैं कुछ AJAX के साथ एक फॉर्म बनाना चाहता हूं। इसलिए मुख्य रूप सामान्य सामूहिक स्निपेट और मध्यम सामग्री से है कुछ AJAX फ़ॉर्म (वहां किसी अन्य स्निपेट में सामग्री है लेकिन सामग्री नहीं है क्योंकि मैं स्टेटफेल में ValueCell का उपयोग नहीं कर सकता) से जुड़ा हुआ है।लिफ्ट अजाक्स बहु चयन बॉक्स

वहां मैं गतिशील रूप से कोई भी जोड़ना चाहता हूं। मल्टी-सिलेक्ट बॉक्स के रूप में उपयोगकर्ता "एडीडी" बटन दबाकर चाहते हैं।

मैंने इसे SHtml.ajaxSelect() का चयन करके सामान्य ड्रॉप-डाउन चयन के लिए किया और ValueCell में सहेजें और सत्र संदर्भ में भी सहेजें।

यहां मैं डेटा स्टोर करने के लिए वैल्यूसेल का उपयोग कर सकता हूं क्योंकि AJAX AJAX के लिए समर्थन का चयन करें। लेकिन बहु-चयन में "AJAXMulti चयन" नहीं हैं ?? तो मुझे समग्र रूप में सबमिट बटन दबाते समय उन गतिशील रूप से जोड़े गए बहु-चयन बॉक्स से मेरे फॉर्म वैरिएबल में डेटा पुनर्प्राप्त करने के लिए की आवश्यकता है।

http://seventhings.liftweb.net/wiring - यह उदाहरण मेरा कार्य करने के लिए मेरी मार्गदर्शिका है। यहां वे गतिशील रूप से टेक्स्ट फ़ील्ड जोड़ते हैं। लेकिन मैं मल्टीसेलेक्ट जोड़ना चाहता हूं और सबमिट बटन मारते समय डेटा को सहेजना चाहता हूं।

कृपया मुझे किसी की मदद करें। यदि आप आगे स्पष्टीकरण चाहते हैं तो मैं दे सकता हूं।

आप सभी को धन्यवाद ...

+0

क्या आप कृपया कुछ कोड प्रदान कर सकते हैं और हमें बता सकते हैं कि यह पहले से क्या करता है और इसे क्या करना चाहिए? –

+0

जैसा कि मैंने पहले कहा था, एक उदाहरण उपयोगी होगा। –

उत्तर

2

यदि आप केवल इतना चाहते हैं बहु चयन जिनके मान सर्वर के लिए भेजा जा सकता है उपयोगकर्ता एक "बचाने" पुश बटन है, तो एक AJAX के फार्म पर SHtml.multiselect वस्तुओं का एक समूह होना चाहिए है पर्याप्त हो।

दूसरी तरफ, यदि आपको एक बहु-चयन के मूल्य को बदलने के लिए हर बार एक एजेक्स कॉल की आवश्यकता होती है तो आपको शायद उसी SHtml.multiselect का उपयोग करना होगा, लेकिन एक एक्सचेंज इवेंट हैंडलर जोड़ें जो एक जावास्क्रिप्ट फ़ंक्शन को AJAXCall कहते हैं ।

यहां कुछ ऐसा है जो एक जावास्क्रिप्ट फ़ंक्शन doCallback() बनाता है और इसे पृष्ठ पर #placeholder पर जोड़ता है। यह सर्वर पर commandCallback(commandString) पर कॉल करता है।

val log = SHtml.ajaxCall(JsRaw("commandString"), commandCallback _)._2.cmd 
val f = JsCmds.Function("doCallback", List[String](), log) 
("#placeholder" #> JsCmds.Script(f)).apply(ns) 
+0

हाय डोनाल्ड, मुझे पता है कि यह एक पुरानी पोस्ट है जिस पर मैं टिप्पणी कर रहा हूं। हालांकि मेरी स्थिति निम्नानुसार है। मैं उपरोक्त पोस्टर के समान सटीक समस्या को हल करने की कोशिश कर रहा हूं। मैं ऑनचेंज पर चयन (मल्टीसेलेक्ट में) के मान को कैप्चर करना चाहता हूं ताकि मैं उस चयन के मूल्य को संपादित करने और फिर बहुविकल्पीय सामग्री को अपडेट करने जैसे कुछ प्रोसेसिंग कर सकूं। हालांकि मैं नियमित रूप से लिफ्टवेब मल्टीइलेक्ट में अपने फ़ंक्शन का उपयोग करने में असमर्थ हूं। कृपया सुझाव दें कि मैं क्या कर सकता हूं। – user3825558

0

मैं जानता हूँ कि यह एक पुराने सवाल का एक सा है, लेकिन यहाँ मेरे शॉट है (के बाद से वहाँ अभी भी नवीनतम स्नैपशॉट में एक ajax एकाधिक चयन करें होने के लिए प्रकट नहीं होता है), और मैं इसे आसान

में आ रहा है देख सकते हैं

आप इसे नियमित AJAX चयन से दूर कर सकते हैं। मुख्य परिवर्तन हैं:

  1. आप सभी मूल्यों निकालें और उन्हें प्रस्तुत करना (प्रपत्र प्रस्तुत बस नियमित urlencoded postParams है), लेकिन इस सबसे स्पष्ट नहीं है कि तुम सिर्फ ऐसा करने के तरीके पर एक नज़र में कर रहे हैं।
  2. आप एक Seq [स्ट्रिंग] करने के लिए डिफ़ॉल्ट मान बदलने के लिए
  3. आप परिवर्तन पर या कलंक पर कॉलबैक चाहते तय करने के लिए है (यह भी परीक्षण को बदलने यदि चयनित सेट किया जाना चाहिए देखने के लिए requres) है। मेरे उदाहरण में, मैं इसे ऑनब्लर कर दूंगा, लेकिन आप इसे कॉन्फ़िगर करने योग्य बना सकते हैं।

    private def ajaxMultiSelect_*(opts: Seq[(String, String)], deflt: Seq[String], jsFunc: Box[Call], func: AFuncHolder, attrs: ElemAttr*): Elem = { 
        val optionSelect = 
        """function(funcName, element) { 
         | var postData = "" 
         | var i = 0; 
         | var k = 0; 
         | for (k = 0; k < element.length; k++) { 
         | if (element[k].selected) { 
         |  if (i == 0) 
         |  postData = funcName + '=' + encodeURIComponent(element[k].value); 
         |  else { 
         |  postData = postData + '&' + funcName + '=' + encodeURIComponent(element[k].value); 
         |  } 
         |  i++; 
         | } 
         | } 
         | return postData; 
         |}""".stripMargin 
    
        val raw = (funcName: String, value: String) => JsRaw(optionSelect + "('" + funcName + "'," + value + ")") 
        val key = formFuncName 
    
        val vals = opts.map(_._1) 
        val testFunc = LFuncHolder(in => in.filter(v => vals.contains(v)) match {case Nil => false case xs => func(xs)}, func.owner) 
        fmapFunc((testFunc)) { 
         funcName => 
          (attrs.foldLeft(<select multiple="multiple">{opts.flatMap {case (value, text) => (<option value={value}>{text}</option>) % selected(default.contains(value)))}}</select>)(_ % _)) % 
           ("onblur" -> (jsFunc match { 
            case Full(f) => JsCrVar(key, JsRaw("this")) & deferCall(raw(funcName, key), f) 
            case _ => makeAjaxCall(raw(funcName, "this")) 
           })) 
        } 
    } 
    

यह काम करना चाहिए, लेकिन मैं इसे परीक्षण नहीं किया।यदि मेरे पास समय है, तो मैं इसका परीक्षण करूंगा और देख सकता हूं कि मैं इसे (और इसके अधिभार) को मास्टर शाखा में जोड़ सकता हूं या नहीं।

शुभकामनाएं!

-Austen

संबंधित मुद्दे