从现有数据构建表单时出现错误“ getData不是函数”

时间:2019-08-28 07:51:56

标签: javascript jquery formbuilder

我目前正在使用表单生成器,并且遇到以下错误

  

fb.actions.getData不是函数

每当我从现有表单数据中启动表单生成器,然后尝试再次保存表单时(例如,在对表单进行更改之后)。

这是我用来构建(多页)表单的代码。

$.get(reqURL, function(res) {
    if (res && JSON.parse(res).success) {
        // Parse the data to render.
        var formData = JSON.parse(res).data;
        var formContainer = document.getElementById('formBuilder');
        var $formContainer = $(formContainer);
        $.each(formData, function (idx, val) {
            var jsonString;
            if (typeof(val) !== 'string') {
                val = val.toString();
                val = '[' + val + ']';
            }
            var bIsArray = false;
            $.each(JSON.parse(val), function (sub_idx, sub_val) {
                if (sub_idx === 0) {
                    jsonString = JSON.stringify(sub_val);
                } else {
                    jsonString = jsonString + ',' + JSON.stringify(sub_val);
                    bIsArray = true;
                }
            });
            var jsonFormData = JSON.parse('[' + jsonString + ']');
            jsonFormData = JSON.stringify(jsonFormData);
            var formRenderOpts = {
                formData: jsonFormData,
                dataType: 'json'
            };


            var $addPageTab = $('#add-page-tab');
            var tabCount = document.getElementById("tabs").children.length,
            tabId = "page-" + tabCount.toString(),
            $newPageTemplate = $(document.getElementById("new-page")),
            $newPage = $newPageTemplate
            .clone()
            .attr("id", tabId)
            .addClass("fb-editor"),
            $newTab = $addPageTab
            .clone()
            .removeAttr("id"),
            $tabLink = $("a", $newTab)
            .attr("href", "#" + tabId)
            .text("Seite " + tabCount);
            var $newInstance = $newPage.formBuilder(formRenderOpts);
            $newInstance.promise.then(function() {
                fbInstances.push($newInstance);
                $newPage.insertBefore($newPageTemplate);
                $newTab.insertBefore($addPageTab);
                $fbPages.tabs("refresh");
                $fbPages.tabs("option", "active", tabCount - 1);
                console.log($newInstance); // Returns {actions: {…}, promise: Promise} for the first page with actions being undefined and {actions: {…}} with actions defined for page 2
            });             
        });

    }
});

这是我用来保存表单的代码:

$(document.getElementById("save-all")).click(function () {  
    const allData = fbInstances.map(fb => {
      console.log(fb.actions.getData()); // This line is throwing the error
      return fb.formData;
    });

    saveFormData(allData);
});

我读过不同的文章,声称我必须使用.getData()部分来实现承诺,但是由于某种原因,我无法使其正常工作。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

解决方案是将第一个代码块的片段编辑为以下内容:

var $newInstance = $newPage.formBuilder(formRenderOpts);
$newInstance.promise.then(function(instance) {
    fbInstances.push(instance);
    $newPage.insertBefore($newPageTemplate);
    $newTab.insertBefore($addPageTab);
    $fbPages.tabs("refresh");
    $fbPages.tabs("option", "active", tabCount - 1);
});

没有在数组中添加正确的实例。