CodeNewbie Community 🌱

Abdulrahman Noble
Abdulrahman Noble

Posted on

How to invoke dialog modal from module instead of using directly showModal() method

Good day! I need to have 2 different models to create projects and todo lists. I've figured out, that for html there is only one dialog menu that can be invoked with window.dialog.showModal(); directly. So then, I've created dialogModule file to store dialog model code for project pop-up model. Here is the code inside this module:

export const dialog = document.getElementById("project-dialog");
export const open = document.getElementById("open");
export const cancel = document.getElementById("cancel");
export const close = document.getElementById("close");


export let openModel = open.addEventListener("click", () => {
    dialog.showModal();
});

export let cancelModel = cancel.addEventListener("click", () => {
    dialog.close();
});

export let closeMondel = close.addEventListener("click", () => {
    dialog.close();
});
Enter fullscreen mode Exit fullscreen mode

And when I want to invoke project model menu, nothing happens.
Function that supposes invoking model:

import { dialog, open, openModel } from "./dialogModule";

function updateProjectItems(e) {
  openModel;
  const div = e.parentElement.parentElement.querySelector("div");
  projectValue.value = div.innerText;

  updateText = e.parentElement.parentElement.querySelector("div");
  addProjectUpdate.setAttribute("onclick", "UpdateOnSelectionProjects()");
  projectValue.focus();
}

Enter fullscreen mode Exit fullscreen mode

With updating todo list it has window.dialog.showModal();:

function UpdateToDoItems(e) {
    if (
      e.parentElement.parentElement.querySelector("div").style.textDecoration ===
      ""
    ) {
      window.dialog.showModal();
      const values = e.parentElement.parentElement.querySelectorAll("#values");
      todoValue.value = values[0].innerText;
      todoDescription.value = values[1].innerText;
      todoDate.value = values[2].innerText;
      todoPriority.value = values[3].innerText;


      updateText = e.parentElement.parentElement.querySelectorAll("#values");
      addUpdate.setAttribute("onclick", "UpdateOnSelectionItems()");
      todoValue.focus();
    }
}
Enter fullscreen mode Exit fullscreen mode

I use variable for projects to summon a pop-up menu, which is not working. What can I do to fix it?
Here is my full repo: github repo

Top comments (1)

Collapse
 
abbaskhan8008 profile image
Abbas Khan

we provide high-quality used auto spare parts in Sajaa, Sharjah, covering models from 2015 to 2024. Our parts are carefully inspected to ensure they meet the best standards, offering reliable performance for your vehicle. The sajaa used spare parts market in Sharjah is a popular place for finding affordable, high-quality spare parts for various car models.