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 || {});
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.
Eg 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.