JqueryのUIタブとspring mvc

Question

私はJavaScriptについて多くのことはまだありませんが、ウェブ上でjquery UIタブを見つけて試してみたかったです。

しかし、1つのタブの中にバックエンドに情報を送信するフォームがある場合は、そのまま使用できます。応答（バネ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; 
});