开发者

Jquery UI Tabs and spring mvc

开发者 https://www.devze.com 2023-02-09 02:58 出处:网络
I do not really now much about javascript but found on the web the jquery ui tabs and wanted to give it a try.

I do not really now much about javascript but found on the web the jquery ui tabs and wanted to give it a try.

They work out of the box however when I have within one tab a form that send information to the back end. The response (sent back from an spring mvc controller) is unable to come back to the same location. As a result is gone to a page without tabs or it position it self at the end of the tab content.

is there somethin I need to do?

$(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>&开发者_JAVA技巧lt;a href="/admin/"><span>Admin</span></a></li>
     <li><a href="/support/"><span>Support</span></a></li>
 </ul>


Are you sure you are using ajax to send the form in the tab? If you don't use ajax and you just send the form it's normal that the browser puts the returned page substituting the current one. You need ajax to place updated content in the current tab.

You have to send the form in this way (for example with jquery, I haven't tested it, sorry if there is any misspelling):

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

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

and the javascript to send and receive the response:

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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号