We Keep Coding

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.

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.

Bootstrap Modal not responding

I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->

It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.

Modal Disappears Quickly + Bootstrap + Javascript

I'd like to start with saying I've searched and searched for the solution to my problem -- and after trying everything I read -- no success. I just want to make a simple modal to pop up when a user clicks on a link (that isn't ready yet).
---Already Tried---
Made sure there wasn't a second bootstrap javascript file (especially in header)
Tried variations in javascript syntax
Tried variations in the link html
When I made the link a "button" then the modal was fine -- but I don't want a simple link to be a button.
$("body").on("click","#empty",function(event){
$("#myModal").modal()
})
<li>Our Blog</li>
I also tried
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal();
});
});
I suspect there's something wrong in the way the html is set up (since the modal worked for a "button" but wont for a regular link)
Let me know if you need more clarification -- Thanks for your help!

This is working modal... It may be helpful for you...
<script type='text/javascript'>
('#myModal').modal('show');
</script>
<li>Click Here</li>
<div id="myModal" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
otherwise try this code...
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal('show');
});
});

If your link "isn't ready yet" when you initiate the modal with Javascript it won't work.
Assuming that your link is created dynamically you have to make sure you initiate it once it is in the DOM, in a JS callback or however your link is created (instead of the Document.ready function).
Also worth noting that to initiate the default triggering (setup in the html with the 'data-' attributes) you simply use:
$("#myModal").modal();
But if you want to trigger it manually in a onClick function, you'll need to add 'show' or 'toggle:
$("body").on("click","#empty",function(){
$('#myModal').modal('toggle');
)};
Again, both of these codes needs wrapping up in a document.ready function or a callback when your link is in the DOM.

zclip not working within bootstrap modal

I'm using the clean example code provided by zclip page:
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
and this is the HTML:
Click here to copy the value of this input:
<input type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}">
It works fine if the HTML is inside the bootstrap main page, but it stops working if i move the html inside a bootstrap modal window (that is, inside the div element of the modal).
How can i get it work?

I had the same issue with zclip and bootstrap modals. The fix I applied was twofold:
Attach the zclip to the element inside the modal's 'show' function.
Add a 250ms delay before attaching the zclip to the element
This properly places the zclip within the modal. It also works if you have multiple tabs in the modal.
HTML
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<a class="btn" href="#" id="modal_body_button">Copy Undo Config To Clipboard</a>
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
JavaScript
$('#myModal').on('show', function () {
$("#modal_body_button").delay(250).queue(function(next){
$(this).zclip({
path: "/static/javascript/ZeroClipboard.swf",
copy: "copied text OK!"
});
next();
});
});

In example above can also use on('shown') instead of on('show') event which calls when modal completely showed. This helps to prevent using dirty hacks like delay(250)

Possible to get a static modal to close in bootstrap?

We have a page where a client wants the modal to be visible on page view. I've run into the problem where the bootstrap modal doesnt close unless you launch it manually
Am I doing something wrong? If you click launch modal (even tho the modal is already visible) you can then close it
Here's the HTML:
<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>
<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal" data-target="#myModal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>​
The CSS is just the Bootstap stuff. We're not using any JavaScript code for this at all.
Live copy on jsFiddle

You're not "launching" the modal, you just have inline markup that's visible. The modal hasn't really been opened at all.
Make the modal hidden (add style="display: none" to the #myModal div) and then trigger opening it using .modal('show') from ready:
jQuery(function($) {
$('#myModal').modal('show');​​
});
Updated fiddle
That will hook up the required handlers for the close button, position it properly, do the background overlay, etc.