Contents from remote page to Bootstrap Modal - javascript

Okay so my problem is that when I do the following:
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
That prints the playerdetails.php echo but for some reason it removes my bootstrap controls. Can someone tell me why it's doing it and how to fix it? I've already tried getting the default bootstrap modal template and still it shows the playerdetails.php echoes but it removes all my controls for the modal.
Controls I'm looking for is these:

For these controls to function you need to provide the markup for them, bootstrap doesn't add them to modals automatically. If you can modify the output of playerdetails.php, simply add the markup there...e.g.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
However Bootstrap has deprecated the remote option since v3.3.0 and removed it alltogether in Bootstrap 4. Instead they recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself
If you call jQuery.load yourself you can do something like this:
<!-- Modal HTML -->
<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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<!-- load contents 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">Save changes</button>
</div>
</div>
</div>
</div>
define your button
<button class="btn btn-lg btn-primary btn-open-dialog">Launch Demo Modal</button>
and bind a jQuery click event to it to load your player
$('.btn-open-dialog').on('click', function(){
$('#myModal .modal-body').load('playerdetails.php?player=99VY9JR8', function(){
/* load finished, show dialog */
$('#myModal').modal('show')
});
});

Related

bootstrap multiple modal structure

I have a structure as below. Modal1 for displaying my content and Modal2 pops up when a alert modal when deleting.
I have first modal1 loading in Ajax
Second modal is not Ajax call.
Is it advisable to have this structure with multiple modals? Otherwise what is the alternative to get alert message in a modal?
Because right now I am facing weird issues with closing modals and events. It is working some times and some time it doesn't . Not sure what causes the weirdness.
Any leads on do and don'ts will be helpful.
https://plnkr.co/edit/ZaUfPntbVp3QMubaw8xg?p=preview
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"
data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Alert : Are you sure?</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>
Nested modals are not supported in bootstrap 3 that's why you are getting wired results
From bootstrap docs:
Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
Instead of using a second modal You can use an alert to show notification msg inside the first modal

BootStrap Javascript Modal

Ok, so I attempted to implement a modal to my website but to my dismay, I've run into a problem where the firstly the modal is faded out and secondly, the text doesn't display nor am I able to click away.
The modal on my website
<button type="button" class="btn btn-blue btn-effect" data-toggle="modal" data-target="#myModal">HORRAY!</button>
<!-- 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">&times</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">
Close
edit: I'm very new to Javascript, I only start coding again after a 5 year hiatus
edit: after trying fiddle, i've come to a guess that it's an issue in my css
If your code is like this one, I believe the problem is in the space between data-dismiss. Despite that your code works just fine
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
http://jsfiddle.net/3kgbG/1637/

modal with PHP script that will edit the information of the specific data

How can I use modal to edit the specific data. For example, when I click the button beside the data, it will get the id of it and a modal will appear with all of the information of that specific data?
Below is an example of modal that i will use but only plain modal without php codes.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You better use ajax for this case
The steps for your need are:
1. sent the parameter id with ajax data.
2. select data with the query an return with JSON in file that you mention in ajax url.
3. The last, showing modal with the JSON data that you have made.
This is basic about ajax http://www.w3schools.com/jquery/ajax_ajax.asp

how to add bootstrap-alert box inside a javascript?

I have a JavaScript with alert box saying some text when an image is uploaded with wrong dimension.I want to show that alert as a Bootstrap alert instead of a popup window?
I have a separate JavaScript file.
In Bootstrap they're not called "pop ups", but instead modals. Its the same general principle (a alert onto the screen for the user to interact with), but just more pretty. See the link below for more information on modals, and the code as well (fully functional). Hope this helps. - Jusitn
Link: http://www.w3schools.com/bootstrap/bootstrap_modal.asp
Edit: Dont forget to add the bootstrap CDN's for it to work (both the CSS and Javascript CDNs) between your head tags
CDN can be found here: http://www.bootstrapcdn.com/
Code:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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>
</div>

Bootstrap Open Contents from another file

I stumbled across a similar question to mine, but not exactly what I want (Fancy box, grab from url). I want to do the same thing but with bootstrap modals. I did find some tutorials on this by adding data-remote and it does not work. Also it is not exactly what I want to do. What I want is just simply a modal. Not any of the code for the header, main part or the footer. All of that will be included in the external page (the page is still actually located on the server). So basically a link like this faq will be included and it will open a bare modal
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
//ajax loads the external page stuff into here.
</div>
Then on the external page (that is on the same server) would contain something like this:
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
I hope this is possible. Thanks for the help!
I figured it out. On the main page, put
<a href="" data-toggle="modal" data-target=".modal" data-remote="URL_HERE">TEST/a>
as well as this:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
</div>
Then simply put something like this on the remote site.
<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">title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
Go! »
</div>
</div>
</div>

Categories