Issue in value for multiple inputs in same node

[ishpreetkaurwebner]

I have created html for node as follows:

      var decision_html = <div class="deal_action_div" style="width: 220px;">
            <div class="decision_title_div" style="padding-top: 5%;">
              <span><i class="fa fa-lightbulb-o"></i></span>
              <input type="text" name="decision-name" class="form-control text-bg-active" value="`+titleForDecision+`" maxlength="50" style="display:inline;" df-decision/>
            </div>
            <hr/>`;

          for (indexCond = 1; indexCond <= 5; indexCond++) {  
            decision_html += addConditionDivForDecision(indexCond);  
          }
          decision_html += `<hr/>
              <div style="text-align:center; padding:2%;">
                <label>Default</label> <br/>None of the conditions satisfied
              </div>
            </div>
            `;
          editor.addNode('decision', 1, 5, pos_x, pos_y, 'decision_node', {}, decision_html );

And function addConditionDivForDecision() has following code:

function addConditionDivForDecision(countNumber) {
  var condDiv = '<div class="condition_div" id="condition_div'+countNumber+'" style="padding-left:2%;">';
  condDiv += '<input type="text" name="condition_name'+countNumber+'" class="form-control" value="condition'+countNumber+'" df-cond'+countNumber+'/>';
  condDiv += '<span style="float:right; cursor: pointer;" onclick="openEditConditionModal('+countNumber+')"><i class="fa fa-pencil" aria-hidden="true"></i></span>';

  if(countNumber != 5) {
    condDiv += '<p data-attr-count="'+countNumber+'" class="p-add-condition" style="text-align:center;"><i class="fa fa-plus-circle" aria-hidden="true"></i></p>';
  }
  condDiv += '</div>';

  return condDiv;
}

Above code should generate result as follows:

But it is generating wrong node look. I don't know where input value is overriding with first input value.

If you will see values of different inputs of same node, then values are different like as shown below:

Inpect element of browser tool shows different values and even export also records different values, just when I drag the node, then values are same. When I open the the drawflow via import, and then all values are different as export is done correctly. when I move the node, then it again become the same values. Where I am doing wrong?

[ishpreetkaurwebner]

@jerosoler : Do you know why during creating/moving node, all inputs show value "Decision" irrespective of actual different values are displaying on Browser Inspect Element Tool and export-import are also perfect? May be little bit clue-idea will work for me to resolve the issue. Can you check whether I am missing something?

[jerosoler]

Hello @ishpreetkaurwebner

The value df- * should be assigned in the addNode and not added to the html.

If you look at this example, it is overwritten.

editor.addNode('decision', 1, 5, pos_x, pos_y, 'decision_node', {"cond2": 'test '}, decision_html );

Remove your value in function

condDiv += '<input type="text" name="condition_name'+countNumber+'" class="form-control"  df-cond'+countNumber+'/>';

Jero

[ishpreetkaurwebner]

Thanks for your reply.

Whether you want to say I have to use addNode as follows?

editor.addNode('decision', 1, 5, pos_x, pos_y, 'decision_node', {"decision-name": 'Decision', 'condition_name1': 'condition1', 'condition-name2':'condition2'}, decision_html );

Where to use **df-* in addNode()** function?

Please correct me.

[jerosoler]

The attribute df-* in inputs, textarea or select to synchronize with the node data.

Example:

<div><input type="text" df-name></div>
`;
var data = { "name": '' };

editor.addNode('github', 0, 1, 150, 300, 'github', data, html);

The data not include df-.

Atrributs multiples parents support df-*-*...

In the export, export has data value correct.

Jero

[ishpreetkaurwebner]

I have made following changes:

var decision_html = <div class="deal_action_div" style="width: 220px;">
            <div class="decision_title_div" style="padding-top: 5%;">
              <span><i class="fa fa-lightbulb-o"></i></span>
              <input type="text"  class="form-control text-bg-active" maxlength="50" style="display:inline;" df-decisionname/>
            </div>
            <hr/>`;

          for (indexCond = 1; indexCond <= 2; indexCond++) {  
            decision_html += addConditionDivForDecision(indexCond);  
          }
          decision_html += `<hr/>
              <div style="text-align:center; padding:2%;">
                <label>Default</label> <br/>None of the conditions satisfied
              </div>
            </div>
            `;
          editor.addNode('decision', 1, 5, pos_x, pos_y, 'decision_node', {"decisionname": 'Decision', "cond1": 'condition1', "cond2": 'condition2'}, decision_html );

function addConditionDivForDecision(countNumber) {
  var condDiv = '<div class="condition_div" id="condition_div'+countNumber+'" style="padding-left:2%;">';
  condDiv += '<input type="text" class="form-control"  df-cond'+countNumber+'/>';
  condDiv += '<span style="float:right; cursor: pointer;" onclick="openEditConditionModal('+countNumber+')"><i class="fa fa-pencil" aria-hidden="true"></i></span>';
  condDiv += '</div>';

  return condDiv;
}

I have removed name and value attributes from each input and add name:value pair in addNode function. It is giving me another issue that "each input is now blank". No text is shown on these inputs. But, yes export-import again works fine.

[jerosoler]

Work in a simple html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
    <style>
      #drawflow {
        width: 100%;
        height: 600px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="drawflow"></div>
    <script>
          var id = document.getElementById("drawflow");
          const editor = new Drawflow(id);
          editor.reroute = true;
          editor.reroute_fix_curvature = true;

          editor.start();

          var pos_x = 100;
          var pos_y = 100;

          var decision_html = `<div class="deal_action_div" style="width: 220px;">
            <div class="decision_title_div" style="padding-top: 5%;">
              <span><i class="fa fa-lightbulb-o"></i></span>
              <input type="text"  class="form-control text-bg-active" maxlength="50" style="display:inline;" df-decisionname/>
            </div>
            <hr/>`;

                  for (indexCond = 1; indexCond <= 2; indexCond++) {  
            decision_html += addConditionDivForDecision(indexCond);  
          }
                decision_html +=  `<hr/>
                    <div style="text-align:center; padding:2%;">
                      <label>Default</label> <br/>None of the conditions satisfied
                    </div>
                  </div>
                  `;
                  editor.addNode('decision', 1, 5, pos_x, pos_y, 'decision_node', {"decisionname": 'Decision', "cond1": 'condition1', "cond2": 'condition2'}, decision_html );

                  function addConditionDivForDecision(countNumber) {
  var condDiv = '<div class="condition_div" id="condition_div'+countNumber+'" style="padding-left:2%;">';
  condDiv += '<input type="text" class="form-control"  df-cond'+countNumber+'/>';
  condDiv += '<span style="float:right; cursor: pointer;" onclick="openEditConditionModal('+countNumber+')"><i class="fa fa-pencil" aria-hidden="true"></i></span>';
  condDiv += '</div>';

  return condDiv;
}
    </script>
  </body>
</html>

[ishpreetkaurwebner]

Thanks a lot for your reply. It's working fine now.