Buttons are not working

tomadmiraal commented 8 months ago

I've created a small demo:

<!DOCTYPE html>
<html lang="nl" dir="ltr">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davicotico/Menu-Editor@1.1.1/dist/styles.min.css">
    <script src="https://cdn.jsdelivr.net/gh/davicotico/Menu-Editor@1.1.1/dist/menu-editor.min.js"></script>
  </head>
  <body>

    <div id="navigation-items"></div>

    <script>

      var items = [{"text":"Home","href":"/home","icon":"fa-solid fa-house","tooltip":"Go to home page","children":[]},{"text":"About Us","href":"/about","icon":"fa-solid fa-address-card","tooltip":"Learn more about our company","children":[]},{"text":"Services","href":"/services","icon":"fa-solid fa-gear","tooltip":"Discover the services we offer","children":[{"text":"Service 1","href":"/services/1","icon":"cog","tooltip":"Details for Service 1","children":[]},{"text":"Service 2","href":"/services/2","icon":"cog","tooltip":"Details for Service 2","children":[]}]},{"text":"Products","href":"/products","icon":"fa-solid fa-cart-shopping","tooltip":"View our available products","children":[{"text":"Product 1","href":"/products/1","icon":"shopping-cart","tooltip":"Details for Product 1","children":[]},{"text":"Product 2","href":"/products/2","icon":"shopping-cart","tooltip":"Details for Product 2","children":[]}]}];

      const menuEditor = new MenuEditor('navigation-items', { maxLevel: 3 });

      menuEditor.setArray(items);

      menuEditor.onClickDelete((event) => {
console.log('onClickDelete')
      });

      menuEditor.onClickEdit((event) => {
console.log('onClickEdit')
      });

      menuEditor.mount();

      let output = menuEditor.getString();
      console.log(output);

    </script>
  </body>
</html>

This is as clean as posible, but when I push the edit or delete button, no log will be created in the console.

What am I missing here?

davicotico commented 8 months ago

Hi @tomadmiraal Declare the events first, followed by the setArray method, and then the mount() method.

I have to update the documentation. Thanks for the feedback.

This code works well

<!DOCTYPE html>
<html lang="nl" dir="ltr">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davicotico/Menu-Editor@1.1.1/dist/styles.min.css">
    <script src="https://cdn.jsdelivr.net/gh/davicotico/Menu-Editor@1.1.1/dist/menu-editor.min.js"></script>
  </head>
  <body>

    <div id="navigation-items"></div>

    <script>

      var items = [{"text":"Home","href":"/home","icon":"fa-solid fa-house","tooltip":"Go to home page","children":[]},{"text":"About Us","href":"/about","icon":"fa-solid fa-address-card","tooltip":"Learn more about our company","children":[]},{"text":"Services","href":"/services","icon":"fa-solid fa-gear","tooltip":"Discover the services we offer","children":[{"text":"Service 1","href":"/services/1","icon":"cog","tooltip":"Details for Service 1","children":[]},{"text":"Service 2","href":"/services/2","icon":"cog","tooltip":"Details for Service 2","children":[]}]},{"text":"Products","href":"/products","icon":"fa-solid fa-cart-shopping","tooltip":"View our available products","children":[{"text":"Product 1","href":"/products/1","icon":"shopping-cart","tooltip":"Details for Product 1","children":[]},{"text":"Product 2","href":"/products/2","icon":"shopping-cart","tooltip":"Details for Product 2","children":[]}]}];

      const menuEditor = new MenuEditor('navigation-items', { maxLevel: 3 });
      menuEditor.onClickDelete((event) => {
        console.log('onClickDelete')
      });

      menuEditor.onClickEdit((event) => {
        console.log('onClickEdit')
      });
      menuEditor.setArray(items);
      menuEditor.mount();
      let output = menuEditor.getString();
      console.log(output);

    </script>
  </body>
</html>

tomadmiraal commented 8 months ago

Hi @davicotico,

Perfect, it's working now! This was not in the documentation indeed.

Can you also add type="button" to the buttons? The buttons will trigger the form submit if there is an form around.

It may also be an option to change the buttons into links with the btn classes? That will kill any problem with form submits

davicotico / Menu-Editor

Buttons are not working #5