Navigating in javascript widgets using JSONP
I am working on javascript widgets that can be displayed on any site.
cm.
- Show JS (jQuery) widget on any site with ASP.NET MVC server
- Embeddable widgets using jQuery and ASP.NET MVC
and at the moment I am facing a problem where I need to navigate between pages in widgets. See code below. But for now I am confused how to organize the navigation (link, ajax update) in the html that comes from the server to make it work without a widget because I want to debug it like a normal 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 || {});
source to share
I understand you want to go to LoadStep1 / LoadStep2 without ajax style?
You can create a master page in ASP.NET that has a link / button to go to the next step. This link is created as part of the previous step.
eg. in the html Step1 output add
<a href="/.../Step2InMaster?serviceID=13">Next Step</a>
Can you tell us why you need to create "no widget mode" for debugging? What's the difference for debugging?
Something else about JsonP helped me:
You can also extend your JsonP class, which wraps JSON data in a JsonP string, to support returning regular JSON when no callback method is included - this way you can use the same uri to return html directly. I am using this to let widgets work in JsonP and Json at the same time.
source to share