LoadingOverlay iterate many overlays and hide programmatically

Question

I'm working with this libraray https://gasparesganga.com/labs/jquery-loading-overlay/

Example: To show an overlay for an element:

$("body").LoadingOverlay("show", {});

Example: To hide an overlay for an element:

$("body").LoadingOverlay("hide", true);

I can call hide and show explicitly and it will work as expected.

I want to iterate over all overlays and hide them programmatically. What I tried doesn't work.

I appreciate any assistance you can provide. Thank you as always!

`

$("body").LoadingOverlay("show", {});
$("#scotty").LoadingOverlay("show", {});

////These work when explicitly called
//$("body").LoadingOverlay("hide", true);
//$("#scotty").LoadingOverlay("hide", true);

//I want to interate over all overlays and hide them programatically. 
//This code will not hide the overlays.
$(".loadingoverlay").each(()=>{
    $(this).LoadingOverlay("hide", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/loadingoverlay.min.js"></script>

<img id="scotty" src="https://i.imgflip.com/1pg0vt.jpg" alt="" width="300">

`Hi, I have a list of nodes that

Answer 1

When you want to hide overlays you must also use that method on exactly the same elements where you applied 'show'.

So you can do:

$("body, #scotty").LoadingOverlay("hide", true);

You don't need to use .each method separately to iterate through them, jQuery will happily apply that method to all found elements.

If you want more streamlined way of hiding overlays you could assign a custom class like 'overlay-element' to body and #scotty element, then hiding all elements that have that class is simple:

$(".overlay-element").LoadingOverlay("hide", true);

then obviously you don't need to specify each selector separately for each element and separate it with comma.

Answer 2

I was able to contact the developer. We both agree that this method is a "hack" but it works for now. He does not guarantee this method working long term.

Our conversation is here on Github.

$(".loadingoverlay").each((i, el) => {
    // Each .loadingoverlay element stores some data. You can retrieve it using .data("loadingoverlay_data")
    $(el).data("loadingoverlay_data").container.LoadingOverlay("hide", true);
});