We Keep Coding

Open a modal with Jquery from different pages [duplicate]

I have a page of links to internal pages I need to open up in a Bootstrap modal DIV. The problem is that it seems that using the latest version of Bootstrap v3 in conjunction with jQuery v2.1.4 just doesn't work when it comes to loading content this way. There's plenty of tutorials I've read about creating modals with Bootstrap and how remote content is being phased out. But there's got to be away to make this work with jQuery, or maybe not.
The theory is that when you click
<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>
the content of data-load-remote is supposed to be read and injected into the div with class modal-body.
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Event</h4>
</div>
<div class="modal-body">
<p>Loading...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
However, when I try this example with jQuery v2.1.4 and BS v3.3+, what it does is open up a modal window with grey background but all the styling of the modal window is gone. Meaning it seems to only display the modal-body div, but the modal header, pretty modal frame and bottom buttons in modal-footer div are not displayed at all. The only way to close the box is to click outside the modal box.
I've found examples all around about how to open up remote urls this way, but they all use outdated version of bootstrap, not the version I'm working with. Can anyone shed some lights on this please?

So basically, in jquery what we can do is to load href attribute using the load function. This way we can use the url in <a> tag and load that in modal-body.
<a href='/site/login' class='ls-modal'>Login</a>
//JS script
$('.ls-modal').on('click', function(e){
e.preventDefault();
$('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});

From Bootstrap's docs about the remote option;
This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
That's the .modal-content div, not .modal-body. If you want to put content inside .modal-body then you need to do that with custom javascript.
So I would call jQuery.load programmatically, meaning you can keep the functionality of the dismiss and/or other buttons as required.
To do this you could use a data tag with the URL from the button that opens the modal, and use the show.bs.modal event to load content into the .modal-body div.
HTML Link/Button
Click me
jQuery
$('#myModal').on('show.bs.modal', function (e) {
var loadurl = $(e.relatedTarget).data('load-url');
$(this).find('.modal-body').load(loadurl);
});

A different perspective to the same problem away from Javascript and using php:
<a data-toggle="modal" href="#myModal">LINK</a>
<div class="modal fade" tabindex="-1" aria-labelledby="gridSystemModalLabel" id="myModal" role="dialog" style="max-width: 90%;">
<div class="modal-dialog" style="text-align: left;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<?php include( 'remotefile.php'); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and put in the remote.php file your basic html source.

e.relatedTarget.data('load-url'); won't work
use dataset.loadUrl
$('#myModal').on('show.bs.modal', function (e) {
var loadurl = e.relatedTarget.dataset.loadUrl;
$(this).find('.modal-body').load(loadurl);
});

If using #worldofjr answer in jQuery you are getting error:
e.relatedTarget.data is not a function
you should use:
$('#myModal').on('show.bs.modal', function (e) {
var loadurl = $(e.relatedTarget).data('load-url');
$(this).find('.modal-body').load(loadurl);
});
Not that e.relatedTarget if wrapped by $(..)
I was getting the error in latest Bootstrap 3 and after using this method it's working without any problem.

In bootstrap-3.3.7.js you will see the following code.
if (this.options.remote) {
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
So the bootstrap is going to replace the remote content into <div class="modal-content"> element. This is the default behavior by framework. So the problem is in your remote content itself, it should contain <div class="modal-header">, <div class="modal-body">, <div class="modal-footer"> by design.

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.

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.

Zurb Foundation Reveal Modal - preventing close on background click

When I am opening my Reveal Modal, I would like to prevent it from closing on background click (which is a default behavior).
I am using Zurb Foundation 5.0.2.
Any help would be appreciated.

If you set the closeOnBackgroundClick option to false then your modal won't close when you click in the background.
<div class="reveal-modal" data-options="closeOnBackgroundClick:false">

Yehhhhh Finally Found It:
Put below code on your foundation reveal model. Than it not close by clicking on background or by pressing esc key.
data-options="close_on_background_click:false;close_on_esc:false;"
Ex:
<div id="AccessContainer" class="reveal-modal" data-reveal data-options="close_on_background_click:false;close_on_esc:false;">
</div>

For anyone looking at this question in 2018, I'm using Version 6.4.0 and this works:
data-close-on-click="false" data-close-on-esc="false"
I added that to the reveal div like this and it's working (as of July 2018):
<div class="reveal" id="modalVideo" data-reveal data-close-on-click="false" data-close-on-esc="false">

You can achieve this globally by executing the following line of JavaScript before showing any modals:
Foundation.libs.reveal.settings.close_on_background_click = false;

For latest version of foundation by zurb use following snippet
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
Complete Code will look like
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>

If using the stand-alone Reveal plugin here: https://zurb.com/playground/reveal-modal-plugin
Use the following on the link that opens the modal.
Open Modal

This answer applies to Foundation 6. Below are the correct option for both preventing close on background click (closeOnClick:false;) and preventing close via the Esc key (closeOnEsc:false;).
<div class="reveal" id="exampleModal1" data-reveal
data-options="closeOnClick:false; closeOnEsc:false;">

modal not sliding from top

I implemented the bootstrap model in my website.....
the model is working fine but the model does not slide from top exactly like the actual bootstrap model....
How to fix it....
Actual model
http://jsfiddle.net/nJ6Mw/1/
model not sliding from top
http://jsfiddle.net/y88WX/embedded/result/
<div id="example" class="modal hide fade in" style="display: block;" aria-hidden="false">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer"> Call to action
Close
</div>
</div>

You have got way too many resources conflicting in the fiddle that you're trying to get working, this fiddle works, so if you can put this code into the page that you're trying to load it into and it doesn't work, you know the problem isn't your bootstrap, also, please send a link to the page you're having problems with, please don't send a fiddle with many different resources attached.
You need to define options for the modal via javascript:
$(function() {
$('#event-modal').modal({
backdrop: true;
});
});
Placing all css and links/html from the site directly into fiddle is not easy for someone to jump into and debug for you.
http://jsfiddle.net/sfWBT/1/