jquery-steps | AJAX सामग्री लोड

Question

पर सर्वर पर डेटा भेजें, मैं अपने प्रोजेक्ट में http://www.jquery-steps.com/Examples#async का उपयोग कर रहा हूं। जादूगर जोड़ने के लिए यह एक अच्छा jQuery-प्लगइन है।

मेरा प्रश्न गतिशील चरणों के बारे में है। अगले चरण की सामग्री पिछले चरण के उत्तर पर निर्भर होना चाहिए। मैं अपने बैकएंड में AJAX कॉल के साथ अतिरिक्त डेटा कैसे भेज सकता हूं। मेरा बैकएंड उस मूल्य के आधार पर अगले चरण को सर्वर करेगा।

मैंने प्रलेखन और स्रोत कोड की खोज की, लेकिन मुझे कोई जवाब नहीं मिला।

Answer 1

वर्तमान में इसका एहसास करने के दो तरीके हैं। कम प्रयास के साथ एक और दूसरे के साथ एक। लेकिन कम प्रयास का मतलब कम नियंत्रण भी है - दूसरे शब्दों में jQuery चरण लोडिंग संदेश और एसिंक कॉल को स्वयं दिखाते हुए छिपाते हैं। किसी भी तरह, पहला समाधान (कम प्रयास) के लिए आवश्यक है कि आप प्रारंभिक पर एक डिफ़ॉल्ट async चरण जोड़ दें जैसे आप का उपयोग किया जाता है।

<div id="wizard"> 
    <h1>Choose</h1> 
    <div> 
     <select id="choose"> 
      <option value="0" selected="selected">default</option> 
      <option value="1">extraordinary</option> 
     </select> 
    </div> 
    <h1>Result 1</h1> 
    <div data-mode="async" data-url="/rest/service/0"></div> 
</div> 

फिर melc उल्लेख की तरह onStepChanging घटना के लिए कोड का एक छोटा सा हिस्सा जोड़ें। इस कोड को पिछले चरण के डेटा का विश्लेषण करना चाहिए और डिफ़ॉल्ट एसिंक चरण आवश्यक होने पर हटाएं और एक ही स्थिति में एक नया यूआरएल जोड़ें लेकिन एक अलग यूआरएल के साथ।

<script> 
    $(function() 
    { 
     var wizard = $("#wizard").steps({ 
      onStepChanging: function(event, currentIndex, newIndex) 
      { 
       if (currentIndex === 0) 
       { 
        if ($("#choose > option:selected").val() === "1") 
        { 
         wizard.steps("remove", 1); 
         // In this case you could also use add instead of insert 
         wizard.steps("insert", 1, { 
          title: "Result 2", 
          contentMode: "async", 
          contentUrl: "/rest/service/1" 
         }); 
        } 
       } 
       return true; 
      } 
     }); 
    }); 
</script> 

अन्य समाधान पहले से ही melc द्वारा वर्णित है।

Answer 2

प्रलेखन यह एक घटना है कि एक कदम बदलने से पहले निकाल दिया जाता है का उल्लेख में, https://github.com/rstaib/jquery-steps/wiki/Settings#events

तो तुम क्या करने की जरूरत क्या किया गया है के आधार पर सर्वर से इस घटना पर एक कॉलबैक फ़ंक्शन जोड़ सकते हैं और डेटा पुनः प्राप्त है वर्तमान चरण पर चुना गया। एक बार डेटा प्राप्त करने के बाद अगले चरण की सामग्री रीफ्रेश हो जाती है।

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

Answer 3

अंतिम चरण 'नए' खाली चरण की सामग्री को सेट कर रहा है। इस चरण के संदर्भ को स्थापित करने का सबसे प्रभावी तरीका क्या है? डीआईवी के आईडी का गतिशील रूप से उत्पन्न होता है, इसलिए मैं उन्हें चुन नहीं सकता। पीएस मैं केवल 1 उत्तर

उपयोगकर्ता 2779014 के साथ एक ही समस्या थी। सही कदम के लिए जादूगर सामग्री प्राप्त करने के जटिल चयनकर्ताओं का उपयोग करने के लिए किया था

$.ajax({ url: './Advanced Example Content Loading with AJAX Alternative With More Control.php', 
     data: { GenerateContentName: $("#GenerateContentID > option:selected").val() }, 
     type: 'POST', 
     success: function(output) { 
         //Gets the options object (object passed to the steps() function) 
         var options = wizard.data("options"); 
         var bodyTag = options["bodyTag"]; 
         wizard.children(".content").children(bodyTag).eq(newIndex).html(output); 
        } 
}); 

पूर्ण कोड: http://plnkr.co/edit/OyHkcZEBv8Fon3vJv7PZ

नोट पूर्ण कोड इसे डाउनलोड, और एक वेब सर्वर पर होस्टिंग बिना काम नहीं करता, के रूप में यह PHP का उपयोग करता है।