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