Dynamically added input text values not updating after import

[rudrak23]

I have a button which dynamically adds a new input text box to the node when you click it (class elemAddBtn).

The issue is when you generate this new node and dynamically add input text boxes, then click on the 'save' button, the new text boxes are exported and imported just fine. But after importing the saved export, when you add the new input text box by clicking the button of class elemAddBtn and clicking on 'save' again, the newly added element doesn't show up and are not exported and imported properly.

`$(document).on("click",".elemAddBtn",function() { var dom_element = $(this)[0]; var element = "

<input df-element" + count + " type='text' class='form-control' placeholder='Enter Option'>

"; parent.innerHTML += element;

  editor.drawflow.drawflow.Home.data[nodeID].html = dom_element.parentNode.parentNode.innerHTML;

});`

Help?

[jerosoler]

The first OK. The second KO.

What is the value of exporting before and after?

Take a look at this example of how to add images.

• https://github.com/jerosoler/Drawflow/issues/252

This is also about the same:

• 40

[rudrak23]

My jquery function which adds new input box to node

// Add new dynamic text box

$(document).on("click",". elemAddBtn",function() {

  var dom_element = $(this)[0];   //Jquery to Javascript

  var idStr = dom_element.parentNode.parentNode.parentNode.parentNode.id;

  console.log(dom_element.parentNode.parentNode.innerHTML);

  var idArr = idStr.split("-");
  var nodeID = idArr[1];
  var parent = dom_element.parentNode.parentNode.children[4];
  var optionsCount = parent.children.length;

  var element = "<div class='box'><input df-option" + optionsCount + " type='text' class='form-control' placeholder='Enter Option'></div>";
  parent.innerHTML += element;
  console.log(dom_element.parentNode.parentNode.innerHTML);
  editor.drawflow.drawflow.Home.data[nodeID].html = dom_element.parentNode.parentNode.innerHTML;
});

Step 1: Create new node Step 2: Add new dynamic input box and enter value as '1' Step 3: Add new dynamic input box and enter value as '2' Step 4: Add new dynamic input box and enter value as '3' Export data Step 5: Click Save button (Exports into mysql) Step 6: Refresh page (Imports from mysql) Step 7: Add new dynamic input box for node and enter value as '4' Step 8: Click Save button (Exports into mysql) Step 9: Refresh page (Imports from mysql) (THIS SHOWS ONLY 3 INPUT BOXES ADDED IN STEPS 2,3,4 AND DOES NOT SHOW THE NEW INPUT BOX ADDED in Step 7) Export data

[jerosoler]

In step number 8 is it being saved? It is safe? In step number 7 the export shows you the input? In the last export I only see 3 entries until df-option2.

[rudrak23]

Fixed the issue! It was the way I was fetching the node id, after reimporting the dom structure changed and idStr was being returned as undefined.

//var idStr = dom_element.parentNode.parentNode.parentNode.parentNode.id;
var idStr = dom_element.closest(".drawflow_content_node").parentNode.id;