Jquery UI 탭 및 스프링 mvc

Question

자바 스크립트에 대해별로 많이 알지는 못했지만 웹에서 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가 필요합니다.

는 (나는 그것을 테스트하지 않았습니다 jQuery로 예를 들어, 어떤 맞춤법이 있다면 죄송합니다) 당신은 이런 식으로 양식을 보낼 수있다 : 보내고 응답을받을

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

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

와 자바 스크립트 :

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