3

私はどのサイトにも表示できるjavascriptウィジェットに取り組んでいます。

見る。

そして今のところ、ウィジェット内のページ間を移動する必要があるときに問題に直面しました。以下のコードを参照してください。しかし今のところ、通常のページとしてデバッグしたいので、サーバーからのhtmlでナビゲーション（リンククリック、ajax更新）を整理してウィジェットなしで機能させる方法がわかりません。

<img alt="TEST" onclick="window.zs.LoadStep1('ad507a69-d882-41d4-8300-bd9f7163d419',this);" style="cursor:pointer;"/>

;
(function (window, ZS, undefined) {
    var zs = window.zs = ZS || {};
    zs.Version = "v1_0";
    zs.baseUrl = "http://localhost/w/";
    var jQueryScriptOutputted = false;
    var containerSelector = '#zaprosWidgetContainer';
    function initJQuery() {
        if (typeof (jQuery) == 'undefined') {
            if (!jQueryScriptOutputted) {
                jQueryScriptOutputted = true;
                document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js\"></scr" + "ipt>");
            }
            setTimeout("initJQuery()", 50);
        }
    };

    function initContainer() {
        if ($(containerSelector).length == 0) {
            $('<div id="zaprosWidgetContainer" style="width=500px;height:500px;"></div>').appendTo('body');
        }
    }

    zs.LoadStep2 = function (serviceId) {
        $.ajax({
            url: zs.baseUrl + 'Wizard/Step2JsonP?jsoncallback=?',
            data: { serviceId: serviceId },
            type: "GET",
            dataType: "jsonp",
            jsonpCallback: "callBack",
            success: function (json) {
                $(containerSelector).html(json.Html);
            }
        });

    },
    zs.LoadStep1 = function (providerId) {
        $(function () {
            $.ajax({
                url: zs.baseUrl + 'Wizard/Step1JsonP?jsoncallback=?',
                data: { providerId: providerId },
                type: "GET",
                dataType: "jsonp",
                jsonpCallback: "callBack",
                success: function (json) {
                    $(containerSelector).html(json.Html);
                }
            });

        });
    };
    initJQuery();
    initContainer();

})(window, window.zs || {});
4

1 に答える 1

0

ajax スタイルを使用せずに LoadStep1/LoadStep2 に移動したいということですね。

次の手順に移動するためのリンク/ボタンを含むマスター ページを ASP.NET で作成できます。このリンクは、前の手順の一部として生成されます。

たとえば、Step1 の出力 html に追加します。

 <a href="/.../Step2InMaster?serviceID=13">Next Step</a>

デバッグ用に「非ウィジェット モード」を作成する必要がある理由を教えてください。デバッグの違いは何ですか?

私を助けたJsonPに関する他の何か：

JSON データを JsonP 文字列にラップする JsonP クラスを拡張して、コールバック メソッドが指定されていない場合に通常の JSON を返すこともできます。この方法では、同じ uri を使用して html を直接返すことができます。これを使用して、ウィジェットを JsonP と Json で同時に実行できるようにします。

于 2013-02-26T08:20:06.390 に答える