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; 
});