dynamically add jquery tab in view - asp.net-mvc-3

Question

I am very new to MVC and jQuery and I have a problem adding a new tab to a jQuery tab panel.
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.
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.
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:
I can see that the new tab is added to the tab panel. But only for < 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.
This is the view (_SearchInput is the partial view for the search form, _SearchResults is the partial view used to display search results):
<div class="roundedBorder">
#Html.Partial("_SearchInput")
</div>
<div id="tabs" style="margin-top:7px;">
<ul>
<li>Test 1</li>
</ul>
<div id="contentcontainer">
<div id="fragment-1">#Html.Partial("_SearchResults")</div>
</div>
</div>
In _SearchInput I add the tabs when the document is ready and call searchClick when the submit button of the form is clicked:
<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>

Answer 1

How are you submitting the form? If your not posting an ajaxy type of result this would be expected as your page will be refreshing on form submit.
Rather, than submit the form, submit the form with jquery and in your success callback perform your post form submission tasks.
EG:
$('form').submit(function(evt) {
evt.preventDefault();
$.ajax({
type: "POST",
url: "formsubmiturl",
data: dataposted,
success: function() {
// add jquery tab stuff here
}
});