динамически добавлять вкладку jquery в поле зрения - PullRequest
Новая
       7

динамически добавлять вкладку jquery в поле зрения

1 голос
/ 15 ноября 2011

Я новичок в MVC и jQuery, и у меня возникла проблема с добавлением новой вкладки на панель вкладок jQuery.

У меня есть ASP.NET MVC3 View, который содержит два частичных представления. Первая - это форма поиска, а вторая отображает результаты поиска.

Теперь мне нужно поместить результаты поиска во вкладку панели вкладок. Позже в этом проекте он должен работать следующим образом: пользователь ищет некоторые ключевые слова, и для каждого нового поиска новая вкладка добавляется на панель вкладок. Таким образом, пользователь сможет переключиться на предыдущий поиск. Но я еще не так далеко.

Сначала я попытался добавить статическую панель вкладок на страницу с одной вкладкой, содержащей результаты поиска. Это было довольно легко, и у меня не было проблем. Далее я попытался добавить новую вкладку со статическим содержимым («Hello World») на панель вкладок каждый раз, когда пользователь нажимает кнопку «Отправить» в форме поиска. Но это на самом деле не работает:

Я вижу, что новая вкладка добавлена ​​на панель вкладок. Но только на <1 сек. Новая вкладка исчезает, как только результаты поиска отображаются. Кажется, что рендеринг частичного представления переписывает изменения, сделанные jQuery / JavaScript. </p>

Это представление (_SearchInput - это частичное представление для формы поиска, _SearchResults - это частичное представление, используемое для отображения результатов поиска): 

<div class="roundedBorder"> 
    @Html.Partial("_SearchInput")
</div>

<div id="tabs" style="margin-top:7px;">

    <ul>
        <li><a href="#fragment-1" id="tab1Link">Test 1</a></li>
    </ul>

    <div id="contentcontainer">
        <div id="fragment-1">@Html.Partial("_SearchResults")</div>
    </div>
</div>

В _SearchInput Я добавляю вкладки, когда документ готов, и вызываю searchClick, когда нажимается кнопка отправки формы: 

<script>
$(document).ready(function () {
  /* show tabs */
  $('#tabs').tabs();
});

function searchClick() {
    var keyword = $("#searchTextInput").val().trim();

    if (keyword == null || keyword == "") {
        return false;
    }

    var title = keyword.substring(0, 10);

    $('#contentcontainer').append("<div id='fragment-2'>hello world</div>");
    $('#tabs').tabs("add", "#fragment-2", title);
}
</script>

1 Ответ

0 голосов
/ 15 ноября 2011

Как вы отправляете форму? Если вы не публикуете результаты типа ajaxy, этого можно ожидать, так как ваша страница будет обновляться при отправке формы.

Вместо того, чтобы отправлять форму, отправьте форму с помощью jquery и при успешном обратном вызове выполните задачи отправки формы.

EG: 

$('form').submit(function(evt) {
    evt.preventDefault();

  $.ajax({  
  type: "POST",  
  url: "formsubmiturl",  
  data: dataposted,  
  success: function() {  
   // add jquery tab stuff here
  }  

});
...