jquery-steps |發送數據到服務器上ajax內容加載

我在使用：http://www.jquery-steps.com/Examples#async在我的項目中。這是一個很棒的Jquery插件，用於添加嚮導。jquery-steps |發送數據到服務器上ajax內容加載

我的問題是關於動態的步驟。下一步的內容應該取決於前一步的答案。如何通過AJAX調用將附加數據發送到我的後端。我的後端將根據該值服務下一步。

我搜索了文檔和源代碼，但找不到答案。

2013-10-19 user2779014

目前有兩種方法可以實現它。一個更多，另一個更少的努力。但更少的努力意味着更少的控制 - 換句話說，jQuery步驟句柄顯示和隱藏加載消息和異步調用本身當然。無論如何，第一個解決方案（更少的努力）要求您像初學者那樣在初始化時添加一個默認的異步步驟。

<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>

接着的代碼的一小部分添加到onStepChanging事件等提到MELC。此代碼應分析上一步的數據，並在必要時刪除默認的異步步驟，並在同一位置添加一個新的但具有不同URL的新步驟。

<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說明。

來源

2013-10-19 13:01:53

謝謝你們倆。我更喜歡擁有更多控制權，所以我實施了像Melc建議的解決方案。在我的onStepChanging事件中，我調用一個函數來進行Ajax調用，並將當前的索引/標題發送到後端。後端迴應相應的內容。同時，下一個（空的）步用加載器動畫顯示給用戶。最後一步是設置「新」空步驟的內容。設置此步驟的上下文的最有效方式是什麼？ DIV的ID是動態生成的，所以我不能選擇它們。 PS我只能給1分答案？ – user2779014

在這裏面提到，正在改變一個步驟之前觸發的事件的文件， https://github.com/rstaib/jquery-steps/wiki/Settings#events

所以，你需要做的是基於什麼已經從服務器上這個事件添加一個回調函數和檢索數據在當前步驟中選擇。一旦獲得數據刷新下一步的內容。

必須小心，因爲在轉換到下一步之前，調用服務器是異步並調用onStepChanging事件。爲了讓你和你的用戶都能正常工作（非阻塞），你需要在下一頁顯示一個加載微調器，直到你從ajax調用服務器得到響應，然後通過填充數據來替換微調器的步驟。

來源

2013-10-19 10:31:17 melc

謝謝！我怎樣才能爲你的答案給點/投票呢？ – user2779014

@ user2779014點擊旁邊的向上箭頭（黑色三角形）即可註冊。謝謝。 – melc

最後一步是設置'新'空步驟的內容。什麼是設置此步驟的上下文最有效的方法？ DIV的ID爲是動態生成的，所以我無法選擇它們。 PS Can 我只給1個回答

與user2779014有同樣的問題。不得不使用複雜的選擇，以獲得正確的步驟嚮導內容

$.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

注意完整的代碼並不無需下載它，並收留了它在Web服務器的工作，如它使用PHP。

來源

2015-05-31 13:09:42 Oniisaki

發帖無效（使用提供的鏈接） –

jquery-steps |發送數據到服務器上ajax內容加載

回答

相關問題