javascriptjqueryjquery-pluginsloadingoverlay

LoadingOverlay iterate many overlays and hide programmatically


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/gasparesganga-jquery-loading-overlay@2.1.7/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


Solution

  • 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);
    });