2011-07-12 7 views
6

jqm में फ़ॉर्म को संभालने का सबसे अच्छा तरीका क्या है?jQuery मोबाइल में फॉर्म त्रुटि स्थिति को कैसे संभालें और HTML वापस करें?

उदाहरण के लिए, मान लें कि उपयोगकर्ता एक फॉर्म भरता है और कुछ डेटा मान्य नहीं करता है। इसे जेएस सत्यापन द्वारा नहीं उठाया गया है, लेकिन यह कुछ व्यावसायिक तर्क को ट्रिगर करता है जिसका अर्थ है कि सिस्टम आगे नहीं बढ़ सकता है।

जेकएम में, फॉर्म उपयोगकर्ता को वापस कर दिया जाएगा और ढांचा इसे लोड करेगा और इसे नेविगेट करेगा। उम्मीद है, मैं नहीं चाहता कि इसे नवागेट किया जाए क्योंकि यह एक नया राज्य नहीं है - मैं बस इसे त्रुटि संदेश के साथ अद्यतन फॉर्म दिखाना चाहता हूं। मैं AJAX को अक्षम नहीं करना चाहता, क्योंकि यह एक अनावश्यक पूर्ण पृष्ठ रीलोड जोड़ता है।

आदर्श रूप से, मैं जो चाहता हूं वह जेकएम को इतिहास में प्रतिक्रिया को शामिल करने या शामिल करने के बारे में बताने का एक तरीका है - बल्कि इसे वहां के स्थान पर दिखाएं।

एकमात्र तरीका यह है कि मैं यह काम देख सकता हूं, मेरा अपना छोटा फॉर्म हैंडलर लिखना और सर्वर से जेएसओएन वापस करना, जिसमें एक त्रुटि स्थिति शामिल है। अगर सबमिशन अगले पृष्ठ पर अच्छी तरह से नेविगेट किया गया था, तो अन्यथा जेएसओएन ऑब्जेक्ट के हिस्से के रूप में एचटीएमएल के साथ एचटीएमएल को दृश्य में अपडेट करें जिसमें कोई त्रुटि संदेश शामिल है।

लगता है कि वहां एक बेहतर तरीका होना चाहिए?

धन्यवाद

+0

+1 अच्छा प्रश्न। मैंने आपके द्वारा वर्णित किए गए तरीके के समान तरीके से किया होगा, लेकिन यदि कोई बेहतर विकल्प है, तो इसे सुनें। – Tsar

उत्तर

2

अच्छा प्रश्न और मैं भी यह देखना चाहता हूं कि दूसरों को क्या कहना है। इसके हालिया ऐप में (जो ऑफलाइन भी काम करना पड़ा), मैंने आपके प्रस्तावित मार्ग को मेरे फॉर्मों के साथ नीचे चलाया:

  1. डिफ़ॉल्ट सबमिट कार्रवाई को रोक दिया।
  2. किसी बटन से एक अजाक्स कॉल का उपयोग किया जाता है, जो इसे वेब सेवा में सबमिट करने से पहले डेटा की जांच करता है, या बस स्थानीय डेटाबेस में सहेजता है (स्थिति ध्वज के आधार पर और चाहे हम ऑनलाइन हों या नहीं)।
  3. सुनिश्चित करें कि सभी प्रासंगिक सफलता/असफल संदेश सबमिट कॉलबैक के माध्यम से बैक अप लेते हैं ताकि हम ...
  4. ... उपयोगकर्ता सबमिट करने के परिणामों के साथ एक ही HTML पृष्ठ अपडेट करें।

यह अच्छी तरह से काम करता है, और उपयोगकर्ता खुश हैं। हालांकि, यह मेरे विशेष परिस्थितियों के सेट को फिट करता है- मैं किसी भी क्वेरीस्ट्रिंग/location.hash सामान का उपयोग नहीं करना चाहता था क्योंकि (ए) जेक्यूएम कभी-कभी हैश के साथ बाहर निकलता है और, (बी) संभावित रूप से उपयोगकर्ता ऑफ़लाइन होगा (और कोई वेब सर्वर नहीं मतलब कोई क्वेरीस्ट्रिंग नहीं है)। सचमुच में, आपका माइलेज अलग अलग हो सकता है।

संपादित करें: कोड संदेशों मेरे ऐप के लिए मैं जरूरत पड़ने पर संदेशों की सूची वर्तमान पृष्ठ में प्रदर्शित करने के लिए चाहते थे के साथ एक पृष्ठ को अद्यतन करने, इसलिए मैं प्रासंगिक HTML पृष्ठ में एक खाली बिना क्रम वाली सूची (messages) है, जो बदले में एक स्टाइल div (message-pane) के अंदर बैठता है। यहां एक कोड स्निपेट दिखाया गया है कि अपडेट कैसे होता है (refresh कॉल नोट करें, जो जेक्यूएम में आवश्यक है)। आप अपने एजेक्स हैंडलर से इस तरह के कुछ कोड ट्रिगर कर सकते हैं:

var list = $("#messages"); 
list.append('<li>YOUR MESSAGE HERE</li>'); 
list.listview('refresh'); 
$("#message-pane").show(); 
+0

हाँ मैं ऐसा कुछ सोच रहा हूं जो सबसे अच्छा होगा। जब आप एक ही पृष्ठ को अपडेट करने का जिक्र करते हैं - तो ऐसा करने के लिए आपने किस तंत्र का उपयोग किया? वर्तमान में मेरे विचार 'पूरे' वापस आ गए हैं।मैं जेएसओएन रिटर्न में अद्यतन एचटीएमएल शामिल कर सकता हूं लेकिन मैं jQuery मोबाइल को तोड़ने के बिना डोम को अपडेट करने का एक अच्छा तरीका नहीं सोच सकता। आपने इसे कैसे किया? – Sergio

+0

@ सर्जियो मैंने कुछ जवाब के साथ अपना जवाब अपडेट किया है; क्या आप इसके बाद क्या कर रहे हैं? – Ben

+0

आह मैं देखता हूं। हाँ, यही वह है जिसे मैं जानना चाहता था। मैं एक पूरा रूप लौटने के बारे में सोच रहा था। यह विधि उसके लिए काम करेगी। दिलचस्प बात यह है कि (साइड इश्यू का थोड़ा सा) मुझे इस बात की दिलचस्पी है कि आपने ऐप को ऑफ़लाइन काम करने के लिए कैसे बनाया है, जैसा कि मुझे कुछ विचार करना पड़ सकता है। शायद एक और समय के लिए! – Sergio

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