jquery UI選項卡和彈簧MVC

Question

我現在真的不是很多關於JavaScript，但在網上找到jquery ui選項卡，並希望試試看。

但是，當我在一個選項卡中有一個向後端發送信息的表單時，它們可以正常工作。響應（從彈簧mvc控制器發回）無法返回到同一位置。結果是轉到沒有製表符的頁面，或者將它自己放在製表符內容的末尾。

有沒有什麼我需要做的？

$(function() { 
    $("#tabs").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html(
        "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
        "If this wouldn't be a demo."); 
      } 
     } 

    }); 
}); 
<ul> 
    <li><a href="/home/"><span>Home</span></a></li> 
    <li><a href="/admin/"><span>Admin</span></a></li> 
    <li><a href="/support/"><span>Support</span></a></li> 
</ul> 

Answer 1

您確定您使用ajax發送表單中的表單嗎？如果您不使用ajax並且只發送表單，那麼瀏覽器將返回的頁面替換爲當前頁面是正常的。您需要ajax將更新的內容放置在當前選項卡中。

你要發送的形式，這種方式（例如使用jQuery，我沒有測試過，對不起，如果有任何拼寫錯誤）：

<form id="my_form"> 
    .... 
</form> 

<div id="response_container"> 
    here I want to see the response 
</div> 

和JavaScript來發送和接收響應：

//catch the submit event in the form 
$("#my_form").submit(function(){ 
    //when the form is going to be submitted it is sent as an ajax request 
    //so the answer can be placed in the current page 
    $.ajax({ 
     type: "POST", 
     url: $("#my_form").attr('action'), 
     data: $("#my_form").serializeArray(), 
     dataType: 'html', 
     success: function(msg){ 
      //place the returned html response whenever you want 
      $("#response_container").html(msg); 
     } 
    }); 

    //return false to avoid the default submit() behaiour can take place 
    return false; 
});