Question

我正在使用jQueryUI Widget Factory，我正在尝试检索我在html文件中设置的选项。

这是Widget代码（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);

html中的JS：

    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');

    });

我只想将html文件中js的thankYouPage选项发送到form.js，然后将选项应用于“完成”。回电：

if (this.options.thankYou === true) {
    window.location.replace(options.thankYouPage);
}

非常感谢您的见解。

Answer 1

我不确定你在这里问的是什么：＆＃34;将html文件中js的thankYouPage选项发送到form.js并将选项应用于完成回调＆＃34;。 ..如果我假设您正在尝试做的是从您的HTML中提取数据，您有两种方法：

1 - 从数据中拉出数据 - * attirbute，例如

<div id="ImSomeWhereInYourCode" data-star="SomeValue">*</div>

和

var star = $("#ImSomeWhereInYourCode").attr("data-star");
// This will set star to "SomeValue"

2 - 直接在构建页面时附加到全局范围，稍后再引用它。

<script>
  window.star = "SomeValue";
  // ... Later ...
  .done(function () {
    var newVar = window.star;
    // newVar = "SomeValue"
  });
</script>

Answer 2

调用窗口小部件时，请传入options对象。在您的代码中，您将options对象作为父对象的属性传递。不要使用父对象，只需直接传递它。

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

如何从HTML获取选项？

2 个答案: