echo "<button type='button' class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle'></button>";
The button above loads delete.php
When the user clicks on the button i want to display a yes/no window. If the user clicks yes, it needs to load the delete.php(with id info). When click no it needs to load an other php file.
what is a good way to do this? i have tried using JavaScript but can't get it to work.
1st no need to add a button inside a link, just style the link:
echo "<a href=\"delete.php?id=$result[exportid]\" class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle delete-button'></a>";
Then attach to the buttons click event in javascript (jquery) and show a confirmation:
$(function(){
$('a.delete-button').click(ev){
ev.preventDefault();
var deleteUrl = $(this).attr('href');
var otherUrl = 'some other url';
if(confirm('Are you sure you want to delete this item')){
window.location = deleteUrl;
}else{
window.location = otherUrl;
}
}
});
You could easily make your confirm dialog like following:
<!-- Modal dialog -->
<div class="modal fade" id="myForm" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
File .js:
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code to delete
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
Using one instead of on prevents that the removal function is invoked at the next opening of the dialog.
I hope this could be helpful.
Follow a complete text example:
var YOUR_MESSAGE_STRING_CONST = "Your confirm message?";
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code on OK click
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Modal dialog -->
<div id="frmTest" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
Take a look at the Bootstrap Modal component. It does exactly what you need it to do.
Related
here is my link and the sample data value i want to pass "data-id"
<i class="fas fa-edit fa-lg fa-fw"></i>
javascript code to load the modal and assign the data value to the modal
<script>
$("#openModal").click(function(){
$(".modal-body").text($(this).data("id"));
$("#edit_task").modal("open");
});
</script>
my modal
<div class="modal fade" id="edit_task">
<div class="modal-dialog">
<div class="modal-content">
<form action="" method="post" enctype="multipart/form-data">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">add new user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
modal body i would like to display the modal variable here
<!-- Modal body -->
<div class="modal-body">
</div>
modal footer
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<?php
echo "<button type='submit' class='btn btn-primary' name='edit' onclick='return mess()'; >";echo "save"; echo "</button>";
?>
</div>
function to confirm when a value is saved
<script type="text/javascript">
function mess(){
alert ("the new user is successfully saved");
return true;
}
</script>
end of the modal
</form>
</div>
</div>
</div>
I have created a working fiddle of what you are looking for.
I changed your Wah button, replacing the href attribute with a data-target attribute:
<a class="btn btn-primary" data-toggle="modal" data-target="#edit_task" data-id="Wah">Wah</a>
Note: If you want the button to look like a link then replace the btn-primary class I used in the example with btn-link
Instead of using a click event on a button, use bootstraps show.bs.modal event. The $(event.relatedTarget) syntax is how you can get the button object for the button that was clicked to open the modal.
$(document).ready(function(){
$('#edit_task').on('show.bs.modal', function (event) {
$('#edit_task').find('.modal-body').text($(event.relatedTarget).data('id'));
})
});
A newbie would like to ask for a little help.
I want to do something with the content of the modal when it is open, But how can I get id from the opened modal?
My code:
<a class="pdfId btn btn-success" data-id="{{ $value['id'] }}" data-toggle="modal" data-target="#myModal">view</a>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">view</h4>
</div>
<div class="modal-body">order number: {{ $value['id'] }}</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS/Jquery:
$('a').click(function(){
$(this).attr('data-id') ;
});
Please help me with this situation. Appreciate all of your help!
Using jquery you can use the $().on('click', function() { function
Example:
$('[data-target="#modal-one"').on('click', function() {
alert('data-id: ' + $('#modal-one').attr('data-id'));
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-one">Modal One</button>
<!-- Modal -->
<div id="modal-one" data-id="100" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">data-id attribute: 100</div>
</div>
</div>
</div>
Here is more simple and dynamic approach which will help not to repeat or write code again and again
You can simply use relatedTarget function to see which button you clicked on the then from their just get the data-id of that clicked button.
Also, in your modal show function you can use $(this) and get the orderID element apply the order id to your modal dynamically and show the order-id in your modal
Using this approach will let you have as many button you want but you will reusing the same modal again without having to write more code.
Live Working Demo:
$('#myModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var getID = button.data('id')
var getAdd = button.data('adress')
var getCity = button.data('city')
var getPostCode = button.data('postcode')
var modal = $(this)
modal.find('#orderID').text('Order ID = ' + getID)
modal.find('#Address').text('Address = ' + getAdd + ' , ' + getCity + ' , ' + getPostCode)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<a class="pdfId btn btn-success" data-id="1" data-adress="123 example street" data-city="Earth" data-postcode="46000" data-toggle="modal" data-target="#myModal">View</a>
<a class="pdfId btn btn-success" data-id="2" data-adress="100 example street" data-city="Earth" data-postcode="46000" data-toggle="modal" data-target="#myModal">View 2</a>
<a class="pdfId btn btn-success" data-id="3" data-adress="150 example street" data-city="Earth" data-postcode="46000" data-toggle="modal" data-target="#myModal">View 3</a>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">View</h4>
</div>
<div class="modal-body">
<span id="orderID"></span>
<br>
<span id="Address"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have a listing page containing a link button to show modal repeating in a PHP loop. I have searched and found these:
Passing data to a bootstrap modal, Passing data to Bootstrap 3 Modal and Pass id to Bootstrap modal and some others but failed.
What I want
I have fetched the data id from database and pass it to bootstrap modal and there I will use this id to display more info through MySQL queries.
I have written all the code but the ID is not passing to the modal.
Modal Link Button code
<a class="btn btn-warning btn-minier" href="#modal-form-show" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $cottage_id ?>"><i class="icon-edit bigger-120"></i> Reservation </a>
Modal code
<!-- 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">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
JS code
$('#modal-form-show').on('show.bs.modal', function(e) {
var c_id= $('a[href="#modal-form-show"]').data('id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
I have taken a text input in modal named cottage and I want show that id in this input.
Try this snippet:
$('.btn-minier').click(function(){
var c_id = $(this).attr('data-id');
$('#cottage').val(c_id);
});
I have change little , when button click show the popup & i've set the value of data-id=2
Button
<a class="btn btn-warning btn-minier" id="btnModalPopup" href="" role="button" data-toggle="modal" data-target="" data-id="2"><i class="icon-edit bigger-120"></i> Reservation </a>
I add button in you 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">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>
ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" readonly />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btnSubmit">Submit</button>
</div>
</div>
</div>
</div>
Javascript code
<script>
$(document).ready(function () {
$('#btnModalPopup').click(function () {
var c_id = $(this).data('id');
console.log(c_id)
$('#myModal #cottage').val(c_id)
$('#myModal').modal('show')
});
$('#btnSubmit').click(function () {
alert('submit button click')
// get the id , from input field.
var id = document.getElementById('cottage').value;
console.log(id)
alert(id)
//You can set the id - to php variable - then hit to sever by ajax
})
});
</script>
Try using attr method of JQuery
$('#modal-form-show').on('show.bs.modal', function(e) {
// instead of this
//var c_id= $('a[href="#modal-form-show"]').data('id');
// try this one
var c_id= $('a[href="#modal-form-show"]').attr('data-id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
I'm trying to create a Bootstrap modal as a requirement of my project, the problem is that I'm unable to trigger this modal using jQuery
this is the modal code:
<div class="container">
<!-- Trigger the modal with a button -->
<!--<button type="button" class="btn btn-info btn-lg" id="myBtn">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>
</div>
<div class="modal-body">
<p>Please choose if you want to open an existing ticket or to create a new one.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-toggle="modal">New Ticket</button>
<button type="button" class="btn btn-default" data-toggle="modal">Open Ticket</button>
</div>
</div>
</div>
</div>
</div>
And this is the button from which the modal should be triggered:
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="btnLogin" data-toggle="modal" data-target="#myModal" class="btn btn-success">Submit</button>
</div>
</div>
And finally this is the jQuery code:
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
alert("..");
$("#myModal").modal();
alert("..");
});
});
</script>
The problem is that the script code is not executing after triggering #myModal element
Any suggestion please?
Try this:
$("#myModal").modal('show');
use that you should put some parameter in .modal("hide") or .modal("show")
$("#myModal").modal("show");
and please use this button
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="btnLogin" class="btn btn-success">Submit</button>
</div>
</div>
You need to remove your javascript! There's no need for that...
Bootstrap will already open dialog reading the attributes data-toggle="modal" data-target="#myModal" on your button
So your javascript is causing the closure of modal right after it opens.
See this demo: JSFIDDLE
Try This:
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
$("#myModal").modal('toggle');
});
});
</script>
Here you go i already fix for you.
reminder always put jquery first after bootstrap.
Example
<script type='text/javascript' src='js/plugins/jquery/jquery.min.js'></script>
<script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>
i don't know why you need to add that script
$(document).ready(function () {
$("#btnLogin").click(function () {
alert("..");
$("#myModal").modal();
alert("..");
});
});
DEMO
Im trying to test the sample modals for my project but even the codes from jfiddles is not working on me. When i clicked the button, it only gives me a dimmed window. I also tried to google this but gives me nothing
This is the modal code im trying.
<body>
<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<p> </p>
<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<div class="modal hide" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="bookId" id="bookId" value=""/>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ckeditor.js"></script>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
});
</script>
Thanks for your help.
Demo
You are missing the data-target to display.
<a data-target="#myModal" data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog" data-toggle="modal">test</a>
<div id="myModal" role="dialog">
....
</div>
Taken from Bootstrap's demo
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
The modal is targeted via the data-target attribute and not href like you have here.