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.

Foundation 6 modal not working in vue.js component

I have a vue.js single file component with a button that opens a zurb foundation modal with a video. When I click the button it reloads the page. It doesn't show any error in the dev tools console or in the network section. Here is my code: In home.vue
<a data-open="video" class="button warning" href="">WATCH VIDEO</a>
<div id="video" class="reveal" data-reveal>
<div class="lead">
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="flex-video">
<iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
</div>
</div>
The url is correct and its even making a call to youtube.

There is an issue integrating vue with js plugins, so use directives. Use this for any jquery plugins and Zurb Foundation js plugins. Explained here

can u paste your code more completely,its hard for us to help u with just an segment code.But at least u should do something like this.
in html file:
<a #click="popup()">WATCH VIDEO</a>
<div id="video"></div>
in vue file:
methods: {
popup() {
$('#video').foundation('open');
}
}

You need to remove href="" attribute from A tag:
<a data-open="video" class="button warning">WATCH VIDEO</a>

Foundation creates a new element based on your <div class="reveal" id="someModal" data-reveal>. This new element is the actual overlay you normally see. The overlay is created when you call $(document).foundation(); after loading the Foundation script.
Your modal (the iniatal data-reveal element) is not in view when foundation() is called, so no overlay is created.
You can init Foundation again in your component by adding:
mounted() {
$(document).foundation();
}
This will init Foundation again, this time with your data-reveal in view, so the overlay is created.

dynamically change the container in different pages which open the same external view by in Dojo mobile ViewController.openExternalView

I'm trying to load an external view on different container inside different pages. The container is able to load. But the container does not change. Which means, first I click "Button1", the external view will display inside 'container1'. Then I click "Button2", the external view will display. But if I view source, it is inside 'container1'.
Could anyone please suggest me how to change the container dynamically which display the external view?
I'm doing Hybric Mobile application using
dojo 1.9.3
Following is the snippet that I'm trying.
page1.html
<div id="page1_container" data-dojo-type="dojox.mobile.View>
<button id="btn1" onClick="loadExternalView('container1');" value="Button1"><br>
</div>
<div id="container1" data-dojo-type="dojox.mobile.View">
<!-- An external view is loaded here when clicking the button above -->
</div>
page2.html
<div id="page2_container" data-dojo-type="dojox.mobile.View>
<button id="btn2" onClick="loadExternalView('container2');"><br>
</div>
<div id="container2" data-dojo-type="dojox.mobile.View">
<!-- An external view is loaded here when clicking the button above -->
</div>
externalView.html
<div data-dojo-type="dojox.mobile.View" id="vExternalView">
<div id="c" data-dojo-type="dojox.mobile.Container">
<span>I'm from External View</span>
</div>
</div>
javascript
function loadExternalView(container){
var vc = dojox.mobile.ViewController.getInstance();
vc.openExternalView({
url:"externalView.html",
transition:"slide"
},dijit.registry.byId(container).containerNode);
}

vc.openExternalView() will only load the view if it has not already been loaded, since it was loaded on the first click of "Button1", it will not be reloaded inside container2 when you click "Button 2", which by the way is a good thing, because if it did you would have an error due to duplicate id's.

bootstrap modal not working?

My modal div is:
<div class="modal" id="showmodal"><!-- content here --> </div>
Now I am calling it with data-toggle='modal' following anchor is coming with DOM:
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
and its working.
Now when I appending another link from javascript like following
<a class data-toggle="modal" data-target="#showmodal">click </a>
It's not working. Can anybody tell why? Thanks in advance.

When you have added first a tag
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js knows on which element it need to attach model window event.
but when you dynamically appended
<a class data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js does not know the element exists in DOM.
so you need to manually call the js function to open model.
$('#showmodal').modal(options)
In your JS code.
Hope this helps.

AngularJS and working with js/css libraries that use hash URLs

I'm using AngularJS with html5 mode on, which is making it difficult for me to use libraries, Ratchet in particular, that are dependent on using hash URLs to show/hide information.
Here is an example of a Ratchet Modal:
Open modal
<div id="myModal" class="modal">
<header class="bar-title">
<h1 class="title">Modal</h1>
<a class="button" href="#myModal">
Close
</a>
</header>
<div class="content content-padded">
<p>The contents of my modal.</p>
</div>
</div>
Clicking on "Open Modal" tries to add "#myModal" to the URL but that doesn't match a route in $routeProvider, so it redirects to root.
Any suggestions on how to deal with this? I know people have posted that they have used angular with ratchet here: does "ratchet" play nicely with "angular.js" yet? but I can't figure it out.

Inspired by this SO post, I solve this issue use the below code:
In template, add ng-click directive in open&close button.
<a class="icon icon-more" ng-click="toggleModal()"></a>
And in controller:
$scope.toggleModal = function() {
jQuery('#myModalexample').toggleClass('active');
};
It works fine for me.
Update
About this question, a PR Specify modal selector in data attribute has been proposed to use data-modal rather than href to open/close ratchet modal.