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.

Preventing loading other classes while opening bootstrap modal popup

I have a button on which I trigger opening bootstrap modal popup like following:
<a class="btn btn-app btnWatchlist" data-toggle="modal" data-target="#myModal" style="min-width:175px;margin:0;height:67px">
<i class="fa fa-save"></i> Add to Watchlist
</a>
The modal popup HTML is like following:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-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>
</div>
The Add to watchlist button is loaded into the DOM after a jQuery post to the server and when the server returns the HTML I simply update users DOM to display this button.
The issue here is that upon doing a jquery post I add a class which basically displays a shifting gear while the search is being performed and now when I press the button the modal is shown, but this "loading" class is loaded as well with on click of on the modal popup.
The code for making the loading class to appear is:
$body = $("body");
function StartLoading() {
$(document).on({
ajaxStart: function () { $body.addClass("loading"); }
});
}
function StopLoading() {
$(document).on({
ajaxStop: function () { $body.removeClass("loading"); }
});
}
Now how can I prevent mixing of these two while pressing the "Add to watchlist" button, so I can only display the modal and remove the loading class after the DOM is loaded??
P.S. So ultimately I don't wanna display the contents of the "loading" class upon clicking on the button to display the popup, just the modal popup itself ..

Not sure if I understand your question correctly, but you could create a variable that keeps track of whether the content of your modal has already been loaded and then wrap the statement $body.addClass("loading"); inside an if(modalHasNotBeenLoaded)?

Bootstrap Modal ajax content, animation loading

I use the Bootstrap Modal by loading content from another page and that data is so complicated (multi query/dynamic form), so when open the modal, it will have a little bit stuck.
I want some animation or indicator to show that modal has not been crashed... please wait.
I have to search and try many ways but doesn't work, in some solution the .gif is stuck too when modal load. I use this method for remote content. http://jsfiddle.net/cp67J/1994/
<!-- Link trigger modal -->
<a href="remote_content.php?id=1" data-toggle="modal" data-target="#myModal" >
Launch Modal content 1
</a>
<a href="remote_content.php?id=2" data-toggle="modal" data-target="#myModal" >
Launch Modal content 2
</a>
<!--MODAL SECTION-->
<div class="modal fade" id="myModal" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>

Dont know if bootstrap modal supports this. But simple solution would be.
Show normal modal with loading animation.
Load your content with ajax in background.
Replace loader with loaded data.
P.S. you can also experiment with $.fn.load and allow jQuery to do 2. and 3. steps for you.

Bootstrap - Modal isn't working

I Have the modal set like this
<body>
<div class="modal fade" id="pageopen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
x
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"> Submit changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button onclick="showModal('http://www.google.co.id/')">Show Modal</button>
</body>
I've added the latest jquery, bootstrap js and css for only the modal plugin.
The problem I have is that the modal backdrop shows, however the modal header body and etc isn't showing up.
My Code
Please provide solution, thank you

Your Javascript Code is wrong, to open a Bootstrap 3 Modal you should use:
$('#pageopen').modal({
show: true
});
If you want to load an external Page, you can set the url here:
$('#pageopen').modal({
show: true,
remote: 'http://www.example.com'
});
And better use the jQuery click Function instead of "onClick".

Your problem is that the showModal function isn't found by onclick, please stop using onclick in your html forever. That has never been a good practice.
Instead of this set an ID for button and use the .click function in JQuery:
<button id="showModal">Show Modal</button>
$("#showModal").click(function(){
$('#pageopen').modal();
});
Check JSFiddle Demo

Haha, never mind. I have separate js and css for the same bootstrap component so it overlapped over each other.
Tip for bootstrap :
Always load only one js file and one css file for bootstrap.
If you're like me that want's only part of the bootstrap instead of all the package, (e.g: modal, transition and carousel), then make it as one js and css from getbootstrap

Bootstrap modal onload event

Does a bootstrap modal have an onload event? I want to call a http GET request when the modal is opened to populate the modal with data from a rest api. I have a form in the modal and I have called the GET function on the onload event of the form, but it doesn't work.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Agent details:</h4>
</div>
<div class="modal-body">
<form onload="getData()" style= "font-size: 16pt">

Per the documentation, you can listen to the show or shown events.
From The Documentation:
show.bs.modal => This event fires immediately when the show instance method is called.
shown.bs.modal => This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
$('#myModal').on('show.bs.modal', function () {
// do something…
})

What I've found to be the best way to do this is to add the onclick attribute to the html element that calls the modal.
<button type="button" onclick="PopulateAddModal()" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#AddModal">Add</button>
Then in your javascript..
function PopulateAddModal() {
//do stuff here...
}
This will ensure that your code is ran as soon as the modal is called. Otherwise, the javascript code will not run until the modal has completely finished it's "fade-in" animation.