Input type checkbox

Developing Nodes
21

yes i tried some things in oneditsave and i cant make it work.I read it multiple times but cant manage it to work
EDIT: I now did this just to see if my previous code works fine and it does. This logs The text of every option added to the list

oneditsave: function() {
  let list = $(".list")[0];
      for (let i = 0; i < list.children.length; i++) {
        console.log(list.children[i].innerText);
      }
}
22

I'm sorry, looking at your code, you have ignored all of the advice I posted.

I cannot help you any more.

23

Thanks anyways.

24 
 let inputNo = 1;
            const addToList = () => {
              let selectedItems = $("#node-input-options option:selected");
              selectedItems.each(function (i, el) {
                let inputId = "node-input-dynamic-options" + inputNo;
                // console.log(el, i);
                let text = $(el).text();
                let val = $(el).val();
                var li = $("<li>").text(text).val(val).attr({
                  value: val,
                  id: inputId,
                  class: "mynode-dynamic-element",
                });
                console.log(li[0]);
                list.append(li);
                li.on("dblclick", function () {
                  li.remove();
                  inputNo--;
                });
                btnClear.on("click", function () {
                  li.remove();
                  inputNo = 1;
                });
                inputNo++;
              });
            };
            btn.on("click", addToList);
          });
      };
      fetchUrl();
    },
    oneditsave: function () {
      let dynElements = $(".mynode-dynamic-element");
      let dynOpts = [];

      this.dynamicOptions = dynOpts;
    },

Tried like this for now. Am i on good track?

25

Yes. apart from i dont thing btnClear.on should probably not be in the loop. Worry about that later.

In fact the code I wrote for oneditsave is exactly what you want.

Just make sure you have added dynamicOptions to the defaults as i explained in earlier post.

NOTE: once you have this working & saving your dynamic options - there is still a job to do - you need to (in oneditprepare) read the value of dynamicOptions and re-populate the list.

Try the oneditsave code I wrote in the "solution" i provided.

test your node, add some dynamic items, click done, deploy.

then put a debugger in oneditprepare (at the top) - you should see your dynamic options from before - use these to re-build the list.

26

I know this isnt still right but i've made some proggress.

 oneditprepare: function () {
      let list = $(".list");
      let dynamicOptions = this.dynamicOptions;
      for (let i = 0; i < dynamicOptions.length; i++) {
        let listText = dynamicOptions[i].text;
        const myNewListItem = $("<li>").text(listText);
        list.append(myNewListItem);
      }

oneditsave: function () {
      let dynElements = $(".mynode-dynamic-element");
      let dynOpts = [];
      dynElements.each(function (index, el) {
        let textValue = $(el)[0].innerText;
        console.log(textValue);
        let opt = {
          text: textValue,
        };
        dynOpts.push(opt);
      });

Can i somehow make the li that populates after oneditsave stay there always unless i delete it?

27

No, thats not how it works.

oneditprepare - is for you to populate user fields UI
oneditsave - is for you to accept UI user field & store them in the node property

the node properties that get stored (in oneditsave) are available in the oneditprepare for you to re-populate the user fields UI.

28

Probably same thing but have to try and ask. The li stays 2nd time i open the node and then if i close it again and open, lis are gone. Could i make them stay until i select some other options no matter how many times i reopen the node

29

No. When the edit dialog is closed, all of its contents are destroyed. The only way to save information is using oneditsave to store information in the node properties. You then use oneditprepare to use that information from the node properties to rebuild the edit dialog.

30

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.