0

我正在使用 jQueryUI 小部件工厂，我正在尝试检索我在 html 文件中设置的选项。

这是小部件代码（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);
}

非常感谢您的洞察力。

4

2 回答 2

0

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

1 - 从 data-* 属性中提取数据，例如

<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>
于 2014-07-16T17:35:01.487 回答
0

当你调用你的小部件时，传入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();
    }
});
于 2014-07-18T16:35:31.240 回答