Error "getData is not a function" when building form from existing data on formbuilder-CodePudding

I'm currently working with form builder and am running into following error

fb.actions.getData is not a function

Whenever I'm initiating the form builder from existing form data and then trying to save the form again afterwards (e.g. after making changes to the form.)

This is the code I'm using to build the (multi-page) form.

const result = <?php echo $questiondata->json_question;?>;
let length = result.length;
var stepLen = length;
var res = result;

for (let i = 1; i <= stepLen; i  ) {
  var tabId = "step-"   i;

const $newPageTemplate = $(document.getElementById("new-page"));
  const $newPage = $newPageTemplate.clone().attr("id", tabId).addClass("fb-editor");
  const $newTab = $('#add-page-tab').clone().removeAttr("id");
  const $tabLink = $("a", $newTab).attr("href", "#"   tabId).text("Step "   i);

  $newPage.insertBefore($newPageTemplate);
  $newTab.insertBefore('#add-page-tab');
  $fbPages.tabs("refresh");
  $fbPages.tabs("option", "active", 0);
  fbInstances.push($newPage.formBuilder());
  
  $(tabId).formBuilder().promise.then(function(fb) {
    let formadata = res[i - 1];
    fb.actions.setData(formadata);
  });
}

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

CodePudding user response：

I'm not sure I have enough information. Would you please include the HTML?

I see you used this technique: https://formbuilder.online/docs/formBuilder/promise/
Have you tried this technique? https://formbuilder.online/docs/formBuilder/actions/getData/

It's possible the data isn't available yet and the setData() call isn't working, but I don't think that's the case because you used technique #1. If the data isn't available yet, you could try this first and then do your setData() call afterwards: var formBuilder = $(fbEditor).formBuilder();

CodePudding user response：

All formbuilder code is here. i am sharing all code like view page code , render code and save code. render 4 tabbed different json form but after save getting only last array 4 time.

view page code

<form method="POST" id="form-builder-pages"  action="{{ 
       url('question/updatequestion', $questiondata->id) }}">
      @csrf
      <div ><button id="save-all" type="button" 
         >Save</button></div>
        <input  type="hidden"  name="formid"  value="{{ $questiondata->id }}">
        <textarea  id="jsondata" name="json_question" style="display:none"></textarea>
   <div >
     <input id="form_title" type="text"  name="form_title" readonly value="{{ $questiondata->form_title }}" required autocomplete="form_title" autofocus>
     <span id="msg"></span>
                                                    
    </div>
     <ul id="tabs">
     <!-- <li><a href="#page-1">Page 1</a></li> -->
       <li id="add-page-tab"><a href="#new-page">  Page</a></li>
    </ul>
    <div id="page-1" ></div>
    <div id="new-page"></div>
   </form>

enter image description here

Get result here

 [[{"type":"textarea","required":true,"label":"message","className":"form-control","name":"textarea-1655308420860-0","access":false,"subtype":"textarea"}],[{"type":"textarea","required":true,"label":"message","className":"form-control","name":"textarea-1655308420860-0","access":false,"subtype":"textarea"}],[{"type":"textarea","required":true,"label":"message","className":"form-control","name":"textarea-1655308420860-0","access":false,"subtype":"textarea"}]]


<script>
            
    

jQuery(($) => {
              "use strict";
              var $fbPages = $(document.getElementById("form-builder-pages"));
              var addPageTab = document.getElementById("add-page-tab");
              var fbInstances = [];
    
              $fbPages.tabs({
                beforeActivate: function (event, ui) {
                  if (ui.newPanel.selector === "#new-page") {
                    return false;
                  }
                }
              });
    
              addPageTab.addEventListener(
                "click",
                (click) => {
                  const tabCount = document.getElementById("tabs").children.length;
                  const tabId = "page-"   tabCount.toString();
                  const $newPageTemplate = document.getElementById("new-page");
                  const $newTabTemplate = document.getElementById("add-page-tab");
                  const $newPage = $newPageTemplate.cloneNode(true);
                  $newPage.setAttribute("id", tabId);
                  $newPage.classList.add("fb-editor");
                  const $newTab = $newTabTemplate.cloneNode(true);
                  $newTab.removeAttribute("id");
                  const $tabLink = $newTab.querySelector("a");
                  $tabLink.setAttribute("href", "#"   tabId);
                  $tabLink.innerText = "Page "   tabCount;
    
                  $newPageTemplate.parentElement.insertBefore($newPage, $newPageTemplate);
                  $newTabTemplate.parentElement.insertBefore($newTab, $newTabTemplate);
                  $fbPages.tabs("refresh");
                  $fbPages.tabs("option", "active", tabCount - 1);
                  fbInstances.push($($newPage).formBuilder());
                },
                false
              );
    
    
     
    // ----render json form data is working fine
    
            const result = <?php echo $questiondata->json_question;?>;//json form data
            let length =  result.length;
            var stepLen= length;
            var res = result;
                for (let i = 1; i <= stepLen; i  ) {
                    var tabId = "step-"   i;
                    
                var $newPageTemplate = $(document.getElementById("new-page"));
                var $newPage = $newPageTemplate.clone().attr("id",tabId).addClass("fb-editor");
                var $newTab = $('#add-page-tab').clone().removeAttr("id");
                var $tabLink = $("a", $newTab).attr("href", "#"   tabId).text("Step "   i);
                
                $newPage.insertBefore($newPageTemplate);
                $newTab.insertBefore('#add-page-tab');
                $fbPages.tabs("refresh");
                $fbPages.tabs("option", "active", 0);
                let $newInstance = $newPage.formBuilder();
                $newInstance.promise.then(function (fb) {
                    fbInstances.push(fb);
                        let formadata=res[i - 1];
                        fb.actions.setData(formadata);
                });
              }
        

       //update json form array -------
    
              $(document.getElementById("save-all")).click(function () {
                    const allData = fbInstances.map((fb) => {   
                    console.log(fb.actions.getData());
                    return fb.actions.getData();
                    });
    
                let jsondata = JSON.stringify(allData);
                console.log(jsondata); // error here 
            }); 
    
    });     
        
    </script>

console.log here
[[{"type":"textarea","required":true,"label":"message","className":"form-control","name":"textarea-1655308420860-0","access":false,"subtype":"textarea"}],[{"type":"textarea","required":true,"label":"message","className":"form-control","name":"textarea-1655308420860-0","access":false,"subtype":"textarea"}],[{"type":"textarea","required":true,"label":"message","className":"form-control","name":"textarea-1655308420860-0","access":false,"subtype":"textarea"}]]