I am using jQueryUI Widget Factory and I am trying to retrieve the options that I set in the html file.
Here is the Widget Code (form.js):
(function ($, undefined) {
$.widget('ulti.uiForm', {
//#region options
options: {
url: "",
thankYou: true,//Enable thank you page
thankYouPage:null,
selector: 'form',
posted: null, // Callback for ajax done method.
//#region leadTemplate
leadTemplate : {
},
//#endregion leadTemplate
},
//#endregion options
_create: function () {
this.element.addClass("ulti-uiForm");
},
_init: function () {
// Load/copy lead template to element instance data...
this.element.data('lead', this.options.leadTemplate);
this._appendQSParms(this.element.data('lead'));
},
destroy: function () {
// Restore element to pre-uiForm create state...
this.element.removeClass('ulti-uiForm');
this._destroy();
},
// Very basic diagnosic method to check that all minimum requirements are populated on the object.
// TODO EXPOSE .done as a posted callback in options.
post: function () {
var $ajaxResult;
var self = this;
$.ajax({
type: 'POST',
url: this.options.url,
data: JSON.stringify(this.element.data('lead')),
dataType: "json",
contentType: "application/json; charset=UTF-8",
accept: "application/json",
beforeSend: function () {
}
})
// callback handler on success - populate lead object with returned data.
.done(function (response, textStatus, jqXHR) {
self.element.data('lead', response);
self._trigger("posted", self.element.data('lead'));
if (options.thankYou === true) {
window.location.replace(options.thankYouPage);
}
})
// callback handler that will be called on failure
.fail(function (jqXHR, textStatus, errorThrown) { //.fail(function () {
// log the error to the console
console.error("Error POSTing gateway object. Status:" + textStatus + " Error: " + errorThrown);
})
.always(function (jqXHR, textStatus, errorThrown) {
});
return self; // support chaining...
},
_setOption: function (key, value) {
this._super(key, value);
}
});
})(jQuery);
The JS that is in the html:
var uiForm;
uiForm = $('#stepform').uiForm({
options: {
url: 'http://someurl.cloudapp.net/api/leads',
thankYouPage:'thankyou.html',
posted: function (evt) {
//notEqual(uiForm.data('lead').SessionId, null, "Post operation succeeded lead sessionId: " + uiForm.data('lead').SessionId);
//start();
}
}
});
$("#btnSubmit").click(function () {
//post the form
uiForm.uiForm('post');
});
I'm just looking to send the thankYouPage option from the js in the html file to form.js and apply the option to the 'done' call back:
if (this.options.thankYou === true) {
window.location.replace(options.thankYouPage);
}
Your insight is greatly appreciated.
When you call your widget, pass in the options object. In your code, you are passing the options object as a property on a parent object. Don't use the parent object, just pass it in directly.
var uiForm = $('#stepform').uiForm({
url: 'http://someurl.cloudapp.net/api/leads',
thankYouPage:'thankyou.html',
posted: function (evt) {
//notEqual(uiForm.data('lead').SessionId, null, "Post operation succeeded lead sessionId: " + uiForm.data('lead').SessionId);
//start();
}
});