How to get options from html?

Question

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.

Answer 1

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