0

jquery とポストバックで大きな問題が発生しました。

ページに html 要素を動的に追加しています。例: JQuery UI タブ。

しかし、ポストバック後、動的に追加されたすべての要素がなくなります。

ポストバック後にこれらすべての要素と、テキストボックスと日時ピッカーの値を保持するにはどうすればよいですか?

あいさつ

トビ

編集：

たとえば、次のコードでいくつかの JqueryUI タブを追加しています。

$(function () {
                var $tab_title_input = $("#tab_title"),
            $tab_content_input = $("#tab_content");
                var tab_counter = 1;

                var $addButton = $('<li class="ui-state-default ui-corner-top add-button"><span>+</span></li>');
                $addButton.click(function () { addTab(); });


                var $tabs = $("#tabsTravel, #tabsWork").tabs({ autoHeight: true, fillSpace: true,
                    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
                    add: function (event, ui) {
                        var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
                        $(ui.panel).append("<p>" + tab_content + "</p>");

                        $("#tabsTravel ul.ui-tabs-nav").append($addButton);
                    }
                });

                $("#tabsTravel ul.ui-tabs-nav").append($addButton);

                // actual addTab function
                function addTab() {
                    tab_counter++;
                    var tab_title = "worker " + tab_counter;
                    $tabs.tabs("add", "#tabsTravel-" + tab_counter, tab_title)
                 .tabs("select", "#tabsWork-" + tab_counter, tab_title);

                }

                // close icon: removing the tab on click
                $("#tabsTravel span.ui-icon-close").live("click", function () {
                    var index = $("li", $tabs).index($(this).parent());
                    $tabs.tabs("remove", index);
                    tab_counter--;
                });
                $("#tabsWork span.ui-icon-close").live("click", function () {
                    var index = $("li", $tabs).index($(this).parent());
                    $tabs.tabs("remove", index);
                    //                    tab_counter--;
                });
                $('#button').click(function () {
                    addTab()
                });
            });

この localStorage をこのコードに実装するにはどうすればよいですか?

あいさつ

ブッツ

4

1 に答える 1

0

通常、これはサーバー側コードの仕事です。追加された要素をセッション キャッシュに保存するか、変更を永続的にする必要がある場合はデータベースに保存します。

新しい HTML5 session storageまたはlocal storageの使用を検討することもできますが、このアプローチはおそらく面倒です。可能であれば、PHP、.NET などの洗練されたサーバー側ライブラリを使用することをお勧めします。

編集

簡単な例を次に示します。クライアント スクリプトがページに HTML を追加するとします。

var html = "<div>hello world</div>";
$("body").append(html);

これで、次のようにローカル ストレージに保存できます。

localStorage.setItem("dynamichtml", html);

次のようにページ起動スクリプトに何かを入れると:

$(document).ready(function() {
    if (localStorage["dynamichtml"]) {
        $("body").append(localStorage["dynamichtml"]);
    }
});

次に、動的機能を実現します。localStorageデータは、ユーザーが明示的に削除するまで保存されたままになることに注意してください。

于 2012-06-25T06:59:36.177 に答える