title: dynamically add jquery tab in view
body: <p>I am very new to MVC and jQuery and I have a problem adding a new tab to a jQuery tab panel.</p>
  
  <p>I have a ASP.NET MVC3 View that contains two partial views. The first one is a search form and the second one displays the search results. </p>
  
  <p>Now I need to put the search results in a tab of a tab panel. At a later point in this project it should work like this: The user searches for some keywords, and for each new search a new tab is added to the tab panel. This way it should be possible for the user to switch to a previous search. But I am not this far yet. </p>
  
  <p>What I tried first was to add a static tab panel to the page with a single tab that contains the search results. This was rather easy and I had no problems. What I tried to do next, was to add a new tab with static content ("Hello World") to the tab panel each time the user clicks the submit button of the search form. But this doesn't really work:</p>
  
  <p>I can see that the new tab is added to the tab panel. But only for &lt; 1 sec. The new tab disappears as soon as the search results are rendered. It seems like rendering the partial view overwrites the changes made by jQuery/JavaScript. </p>
  
  <p>This is the view (<code>_SearchInput</code> is the partial view for the search form, <code>_SearchResults</code> is the partial view used to display search results): </p>
  
  <pre><code>&lt;div class="roundedBorder"&gt; 
      @Html.Partial("_SearchInput")
  &lt;/div&gt;
  
  &lt;div id="tabs" style="margin-top:7px;"&gt;
  
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#fragment-1" id="tab1Link"&gt;Test 1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div id="contentcontainer"&gt;
          &lt;div id="fragment-1"&gt;@Html.Partial("_SearchResults")&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In <code>_SearchInput</code> I add the tabs when the document is ready and call <code>searchClick</code> when the submit button of the form is clicked:</p>
  
  <pre><code>&lt;script&gt;
  $(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("&lt;div id='fragment-2'&gt;hello world&lt;/div&gt;");
      $('#tabs').tabs("add", "#fragment-2", title);
  }
  &lt;/script&gt;
  </code></pre>