CODEWITHSUNDEEP
javascriptjqueryhtmldynamics-crmdynamics-365
Eric Han
Eric Han

Reputation: 55

Using a loading spinner in a Dynamics 365 embedded iframe web resource

I am trying to use a loading spinner in an embedded iframe in a Dynamics 365 application. I am using this library: https://loading.io/button/. I can see that the CSS loads properly, because it shows the spinning icon when had a class of running on the button/div element.

What I'm trying to do is add the "running" class to the button when it is clicked, so the user knows that an action is occurring and they should expect something to happen in the near future. However, when I have code that adds the "running" class to the button, it does not seem to work. Here's my code:

$("#retakeButton").on("click", function () {
    $("#retakeButton").addClass('running');
    \\\\\\ LOGIC GOES HERE \\\\\\
    $("#retakeButton").removeClass('running');
});

And here is my HTML:

    <div id="outerBorder" class="container embed-responsive ">
        <div class="col-md-12" id="topbuttons">
            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <div type="button" id="retakeButton" class="btn btn-primary hovering ld-over">
                        <strong>Take Photo</strong>
                        <div class="ld ld-ring ld-spin-fast"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="carousel" class="slideshow-container"></div>
        <br>
        <div id="dots" style="text-align:center"></div>
    </div>

What is strange is that if I open the console and select the iframe as the target, I can get it to show the in progress animation by running $("#retakeButton").addClass('running');. However, it doesn't seem to work in the javascript that is referenced by the HTML.

Upvotes: 0

Views: 735

Answers (1)

Arun Vinoth PrecogTechnologies
Arun Vinoth PrecogTechnologies

Reputation: 22846

I just tested this, its working.

For clear visibility, I added a border for div, also commented out the removeClass for testing (it may be too fast to notice).

<div id="div_loader" class="btn btn-default ld-ext-top" style="border:solid; font-size:2em">
    <div class="ld ld-ring ld-spin-fast"></div>
</div>

$("#div_loader").on("click", function () {
    $("#div_loader").addClass('running');
      //do some logic
    //$("#retakeButton").removeClass('running');
});

One last thing. Problem could be by class hovering - you can remove & test your code.

Upvotes: 1

Related Questions