Again breaking my head in Bootstrap 3. I have been using BT3 with a modal window. The below code works and fetch the remote modal window for the first time and doesn't work in my second click.
I have checked the below forums:
http://www.whiletrue.it/how-to-update-the-content-of-a-modal-in-twitter-bootstrap/
How to show a URL in Bootstrap Modal dialog: On button click
Bootstrap 3 with remote Modal
http://getbootstrap.com/javascript/#modals
From the documentation:
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>
index.php
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary" data-keyboard="false" data-backdrop="false" href="emp_details.php?id=1">Employee 1</a> <a data-toggle="modal" data-target="#myModal" class="btn btn-primary" data-keyboard="false" data-backdrop="false" href="emp_details.php?id=2">Employee 2</a> <a data-toggle="modal" data-target="#myModal" class="btn btn-primary" data-keyboard="false" data-backdrop="false" href="emp_details.php?id=3">Employee 3</a>
<div class="modal fade" id="myModal">
<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">Test</h4>
</div>
<div class="modal-body">Test</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
emp_details.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<?php print_r($_GET); ?>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
So now my questions are:
Is there a way to get the modal box dynamically each time when the href is clicked?
Is there anyway to load the remote content dynamically without any issues?
Waaahuuu..
I missed this answer.
This really worked for me.
Twitter bootstrap remote modal shows same content everytime
just you need to add this script.
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
Thanks again
Related
I want to write a php function to generate a Bootstrap modal so I can simply call it to create more modals. Thus reducing code repetition. My first approach was to store all the HTML within a Variable and then return it as shown in the function below.
function modal(){
$build = ' <button type=button class="btn btn-primary" data-toggle="modal" data-target="modal-xl">
Test Modal
</button>';
$build .= ' <div class="modal fade" id="modal-xl">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extra Large Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer justify-content-between">
<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>';
return $build;
}
And then to generate it I would simply do
<?=modal()?>
My problem with this approach is that although the code is inserted inside my page, I can't seem to be able to open the modal in question.
Anyone has some though? or alternative way of doing so?
I was hoping to create a Builder class for various components like this one.
Alright for modals, I manage to get it working by using a javascript trigger instead.
function modal(){
$build = ' <button type=button class="btn btn-primary" id="btn-xl">
Test Modal
</button>';
$build .= ' <div class="modal fade" id="modal-xl">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extra Large Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer justify-content-between">
<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>';
$build .= ' <script>
$(document).ready(function(){
$("#btn-xl").click(function(){
$("#modal-xl").modal();
});
});
</script>
';
return $build;
}
Hopefully I won't have to trick bootstrap like this with all other components.
PS. Make sure to load JQuery and Bootstrap Javascript before echoing the function.
I have been trying to show modal dialog using bootstrap and vue js. I want to show dialog once user successfully registers.
<div>
....
<div class="modal fade" v-if="isEnabled">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
....
</div>
But not able to display the dialog. Can anybody help me to do this?
The modal component is managed by jQuery, you have to use jquery to open your modal.
I need you Vue code too help you much, if it's an ajax request to register user, wait the success callback to make a
$('#modal').modal('show')
If it's a synchronous process, call you modal in the mounted method of you Vue instance.
for eg:
if you want to show modal box on click button then use
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
and if you want to open model box after any process is finished then use
$('#modal').modal('show');
"#myModal" is ID of the modal box you want to show.
more info https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Scenario - I am planning to load an external PHP file which contains an Update form inside a modal pop-up on a jquery button click event.
I am able to load pop-up on button click but could not find a clear and brief solution to load an external file inside the modal pop-up. For the sake of example lets assume the edit form has just email text field.
NOTE- I am trying to load file locally
JS Fiddle - jsfiddle.net/1aeur58f/1
I want to display the file content inside the body of the pop-up as shown in the JsFiddle
So, I do not think that you have to load an external source at all. If you would like to include the content in the page, I think that you should do something like I did below.
<?php
$user = $client->get('account');
?>
<!-- Make the model show up -->
<!-- Pretend this is the form -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" 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"><?= 'Some kind of 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>
i want create grid with bootstrap in smarty / php
in grid i have name, family, ... & edit button.
when i click in btn edit, modal popup open, but i don't know how sent record ID to function for set query & show in modal:
sample code:
www.bootply.com/webdeveloper/iQrK1Yxlkk
btn:
<a href="" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-backdrop="static">
Edit User
</a>
Modal:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">
username: ...
<br>
Password: ...
<br>
avatar: ...
<br>
...
</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>
The simpliest solution:
remove attributes data-toggle="modal" and data-target="#myModal"
Add data-id attribute for tag a
Add bind jquery to click for tag a
when user click to tag a:
Insert record ID into hidden text input in modal form
Run bootstrap modal manually $('#myModal').modal()
Hope it will help
EDIT:
Also in documentation i see special event when modal run (probably it is more bootstrap.js way...):
$('#myModal').on('show.bs.modal', function (e) {
// get record ID here
})
so you can use e.target to get attributes of tag a
I have my html code as:
<button class="btn btn-default" id="openForm">
New
</button>
<!-- Modal -->
<div class="modal fade hide" id="formModal">
<div class="modal-header">
<h4>
Form
</h4>
</div>
<div class="modal-body" id="formModalBody">
</div>
<div class="modal-footer">
Close
</div>
</div>
My Java script reads as:
$(document).on('click', '#openForm', function(e) {
e.preventDefault();
$("#formModalBody").html("");
$("#formModal").modal('show');
$.post('index.php/customers/view/-1/',
{id: -1},
function (html) {
$("#formModalBody").html(html);
}
);
});
I am using Twitter Bootstrap & Codeignitor. The post url above is index.php/Controller/function
When I am clicking on the button; I am not able to see the Bootstrap Modal. The page fades in, but there is no modal visible.
this is for bootstrap 3 and can be triggered by html alone without javascript it will run
Launch demo modal
<!-- Modal -->
<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">Modal title</h4>
</div>
<div class="modal-body" id="formModalBody">
</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>
<!-- For javascript -->
$.post('index.php/customers/view/-1/',
{id: -1},
function (html) {
$("#formModalBody").html(html);
}
);
You should use anchor link instead of button, it will work default settings
<a href="/model_link" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</a>
The href link response code will append in
<div class="modal-body" id="formModalBody">
<!-- modal body -->
</div>