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>
Related
I need to add a popup to the following web app
https://github.com/gunet/openeclass/tree/3.12.x
I have tried to put my code to many files by trial and error but no luck.
Could someone tell me if below code is the appropriate way to do this and in which file should i put it so it shows up in the first page?
https://openeclass.panteion.gr/
<?php
// PHP program to pop an alert
// message box on the screen
// Display the alert box
echo '<script>alert("Welcome to our site")</script>';
?>
As suggested i plan to use the following. Where should i put it and how should i combine it with a cookie so that it is shown only once to each user?
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<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>
You should not use JavaScript "alert()" function to show some messages to the users. It is an ugly way to do such thing and it is mostly used for old school debugging helper.
In my opinion you can trigger a popover or an alert (see Bootstrap 3 documentation) in $(document).ready(function () { ... } section within template/default/js/main.js. But this would show the message to your visitors every time they open any page. That is why you should show the message only once and remember it in a Cookie variable such as "messageShown=true". In the section which I mentioned above you should check like if(Cookies.messageShown=='false') before you trigger the alert message.
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
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
In my view, I am querying and displaying all the rows from the database. All the rows are displayed fine except the problem comes in when i use a bootstrap modal (or bootstrap dialog box). I want to display the email for each query using modal (the dialog box) but the problem is that in each query the email in the first row of the table is the one that is being displayed for all the other queries...
what might i have done wrong here. thnx
my View
<?php
foreach($query as $row)
{ ?>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Title of the data from the database
</button>
<!-- 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">User email for this user</h4>
</div>
<div class="modal-body">
<?php echo $row->email?><!--this is where my problem is-->
</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 are using duplicated id="myModal" therefore your button always open the same modal.
You can try to create unique Modal IDs and buttons for each of your rows. You can use row ID or something similar to differentiate
For example:
<button ... data-target="#myModal-<?php echo $row->id;?>">
...
<div class="modal fade" id="myModal-<?php echo $row->id;?>">
...
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>