How can I use jquery to detect whether a dialog has been opened?

Question

In my code, there are a few HTML boxes, which each open up different dialogs. Here is how I open up a dialog:

function popup(category) {
  $(category).dialog();
};

The boxes have an onclick of: popup('#categoryName') . I want to make sure that once a specific dialog has been opened, it cannot be reopened. How can I use JQuery to detect whether that dialog has been opened and prevent the dialog from being opened again?

Thanks in advance for the advice!!!

Answer 1

You can add an attribute to your boxes to check if its respective dialog has been opened before and get that value with attr function and change it after open the dialog.

<div id="category-1-box" onclick="popup(this, '#category-1')" has-been-opened="no">Category 1</div>
<div id="category-2-box" onclick="popup(this, '#category-2')" has-been-opened="no">Category 2</div>

function popup(box, category) {
    if($(box).attr("has-been-opened") === "no"){
        $(category).dialog();
        $(box).attr("has-been-opened", "yes");
    }  
}

Note that you have to add a new argument to your popup function and pass the this keyword when you're invoking the function from onclick event. This way you can manipulate that specific element to check and change the value with JQuery.