1

私は MVC と jQuery を初めて使用し、jQuery タブ パネルに新しいタブを追加する際に問題があります。

2 つの部分ビューを含む ASP.NET MVC3 ビューがあります。1 つ目は検索フォームで、2 つ目は検索結果を表示します。

ここで、検索結果をタブ パネルのタブに配置する必要があります。このプロジェクトの後半では、次のように動作するはずです。ユーザーがいくつかのキーワードを検索すると、新しい検索ごとに新しいタブがタブ パネルに追加されます。このようにして、ユーザーは以前の検索に切り替えることができるはずです。しかし、私はまだここまでではありません。

私が最初に試みたのは、検索結果を含む単一のタブを持つ静的タブ パネルをページに追加することでした。これはかなり簡単で、問題はありませんでした。次に試みたのは、ユーザーが検索フォームの送信ボタンをクリックするたびに、静的コンテンツ (「Hello World」) を含む新しいタブをタブ パネルに追加することでした。しかし、これは実際には機能しません:

タブパネルに新しいタブが追加されていることがわかります。ただし、1 秒未満です。検索結果が表示されるとすぐに、新しいタブが消えます。部分ビューをレンダリングすると、jQuery/JavaScript による変更が上書きされるようです。

これはビューです (_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>
4

1 に答える 1

0

どのようにフォームを送信していますか? ajaxy タイプの結果を投稿しない場合、フォームの送信時にページが更新されるため、これが予想されます。

フォームを送信するのではなく、jquery を使用してフォームを送信し、成功のコールバックでフォーム送信後のタスクを実行します。

例えば：

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

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

});
于 2011-11-15T14:40:32.987 に答える