Navigation in javascript widget using JSONP

Question

I am working on javascript widget which can be shown on any site.

see.

and for now I faced with issue, when I need to navigate between pages in widgets. See code below. But for now I am confused how to organize navigation (link clicking, ajax updating) in html that comes from server, to make it working as without widget, because I want to debug it as usual page.

<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 || {});

score 0 · Answer 1 · answered Feb 26 '13 at 08:20

I understand that you want to navigate to LoadStep1/LoadStep2 without ajax-style?

You could create a master page in ASP.NET that has a link/button to navigate to the next step. That link is generated as part of the previous step.

E.g. on the output html of Step1 add

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

Can you tell us why you have to create a "non-widget mode" for debugging? What's the difference for debugging?

Something else about JsonP that helped me:

You can also extend your JsonP class that wraps the JSON data into a JsonP string to support returning normal JSON when no callback method is supplied - this way you can use the same uri to return the html directly. I use that to allow widgets run in JsonP and Json simultaneously.

Non-widget mode need to be created for simple debugging as "developers environment".Widget mode will be as "production environment". Debugging and changes for callback style is rather difficult then just using master page and simple navigation as you wrote at the header. — Alexandr, Feb 26 '13 at 09:34

Navigation in javascript widget using JSONP

1 Answers1