Hiện tại có hai cách để nhận ra điều đó. Một với nhiều hơn và một với những nỗ lực ít hơn. Nhưng ít nỗ lực hơn cũng có nghĩa là ít kiểm soát hơn - nói cách khác là Các bước jQuery xử lý việc hiển thị và ẩn thông báo tải và chính cuộc gọi không đồng bộ. Nhưng dù sao, giải pháp đầu tiên (ít nỗ lực hơn) yêu cầu bạn thêm bước không đồng bộ mặc định khi khởi tạo như bạn thường sử dụng.
<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>
Sau đó, thêm một phần nhỏ của mã vào sự kiện onStepChanging như melc đề cập. Mã này sẽ phân tích dữ liệu của bước trước đó và loại bỏ nếu cần thiết bước không đồng bộ mặc định và thêm một mã mới ở cùng một vị trí nhưng với một URL khác.
<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>
Giải pháp khác đã được mô tả bởi melc.
Nguồn
2013-10-19 13:01:53
Cảm ơn cả hai.Tôi thích có quyền kiểm soát nhiều hơn, vì vậy tôi đã thực hiện một giải pháp như Melc đề xuất. Trong sự kiện onStepChanging của tôi, tôi gọi một hàm để thực hiện cuộc gọi Ajax và gửi chỉ mục/tiêu đề hiện tại tới phần cuối. Các phụ trợ đáp ứng với nội dung tương ứng. Trong thời gian đó, bước tiếp theo (trống) được hiển thị cho người dùng bằng hoạt ảnh của trình tải. Bước cuối cùng là đặt nội dung của bước trống 'mới'. Cách hiệu quả nhất để thiết lập ngữ cảnh của bước này là gì? ID của DIV được tạo động, vì vậy tôi không thể chọn chúng. PS Tôi có thể chỉ cho điểm 1 câu trả lời không? – user2779014