<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="1"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="2"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="3"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="4"></a>
<script>
$('#wishlist-modal').on('shown.bs.modal', function() {
var $el = $("#wishlisticon");
var $username = $el.data('productid');
alert($username);
});
</script>
There are several buttons on a page pointing to the same modal, however different data needs to be passed for each modal.
The data to be passed is saved in data-productid.
When the popup modal opens, I want to use data-productid variable.
The function is working but each time the alert is giving the same productid value (i.e = 1)
The function is not able to understand that it should pickup the corresponding data-productid
As mentioned in the documentation, you can use event.relatedTarget to vary the contents of the modal depending on which button was clicked.
$('#wishlist-modal').on('shown.bs.modal', function(event) {
var $el = $(event.relatedTarget);
var $username = $el.data('productid');
alert($username);
});
DEMO:
$('#exampleModal').on('shown.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
alert(recipient)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="1">Open modal for 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="2">Open modal for 2t</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="3">Open modal for 3</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<h2>Hello World!</h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
Related
This is the code for the confirm.
<td><a href="source.php?admin_id=<?php echo $row['id'];?>&username=
<?php echo $_SESSION['admin_username']; ?>"
data-toggle="tooltip"
data-placement="top"
title="Delete">
<i id="del" class="mdi mdi-close"></i> </a>
</td>
This is the script for the confirm.
const deleteIcon = document.getElementById("del");
deleteIcon.addEventListener("click",(e) => {
const confirmVar = confirm("Do you want to proceed? ");
if(confirmVar){
return true;
}else{
return false;
}
})
This is the modal where I want to change the default confirm of javascript.
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">Please validate!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Do you want to proceed?.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="btnSave" type="button" data-bs-dismiss="modal" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
There were a couple things to fix. Your link wasn't set up right, because it was a regular link (which would go directly to it's href thus ignoring the id='del' icon inside with the event listener). What is needed is to make that link a button which opens the confirm modal. When the modal confirmation button is clicked, then you can go to the link.
I have set this up so that you can have multiple delete buttons on the page, each will need their own data-href attribute.
The delete link became a button that triggers the modal. The modal has the confirm button which, when clicked, finds the data-href of the delete button that opened the modal.
let goToDeleteLink = ''
let btnSave = document.getElementById('btnSave')
btnSave.addEventListener('click', function(e) {
console.log('go to ' + goToDeleteLink);
})
let btnDeletes = document.querySelectorAll('.delete-button')
btnDeletes.forEach(btn => {
btn.addEventListener('click', function(e) {
// store the current delete link
goToDeleteLink = e.target.dataset.href
})
})
<html><head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<button data-href="source.php?admin_id=<?php echo $row['id'];?>&username=<?php echo $_SESSION['admin_username']; ?>" data-bs-toggle="modal" data-bs-target="#confirmModal" class="delete-button">
<i class="mdi mdi-close"></i> close </button>
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">Please validate!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Do you want to proceed?.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="btnSave" type="button" data-bs-dismiss="modal" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
</body>
</html>
I am working on the below code. Why am I unable to get closest paragraph .para text of each of buttons using $(event.relatedTarget)?
As you can see I am getting dummy index number for each event related buttons as well:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) ;
console.log(button.index());
console.log(button.parent().closest('.para').text());
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<div class="container"><p class="para">Winter</p></div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
First Launcegr
</button>
<div class="container"><p class="para">Summer</p></div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
Second Launcegr
</button>
<div class="container"><p class="para">Fall</p></div>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">
Third Launcegr
</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>
It's traversing the wrong part of the DOM. Try this:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
console.log(button.prev().find('.para').text());
});
I have a PHP loop that creates a series of buttons with unique data attributes. When these buttons are clicked they open a modal which collects the values of the data attributes on the button, and uses them to prepopulate the form. Can be seen here: https://getbootstrap.com/docs/3.3/javascript/#modals-related-target
The modal opens, but doesn't display the data I'm trying to collect. I also cannot get core functions such as alert(); to work.. and I'm lost.
I have tried using jQuery's data() and the relevant data attributes, but when they also didn't work I stuck to using attr().
Can anyone help?
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="7" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="7" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" 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 check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
alert();
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
)}
});
</script>
It seems you have an error in your code. Try this:
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="8" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="9" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" 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 check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>
I want to delete my data with modal confirmation.on remove click my modal show but when click confirm then data not delete.
I am trying but cant understand whats wrong with my code
my code
<script>
$(document).on("click", "#deleteBtn", function (e) {
e.preventDefault();
e.stopPropagation();
var link = $(this).attr('data-adid');
console.log($("#myModal btn-warning a"));
$("#myModal .btn-warning a").attr('href',link);
$(".modal").modal("show");
});
</script>
<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">Remove Client Account</h4>
</div>
<div class="modal-body">
Body goes here...
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-warning" type="button"> <a href="" >Confirm</a></button>
</div>
</div>
</div>
</div>
<a class="btn btn-warning" id="deleteBtn" data-adid=?a=client&cdid='.$cd[$i][0].' data-toggle="modal" href="#myModal">Remove</a>
I too can't understand what's wrong with your code, but since you want to delete the data attribute, you can do the below.
$(this).removeAttr("data-adid");
when click in delete button the modal delete button link have a value from delete button.
my code
<script>
$(document).on("click", "#myModal", function (e) {
e.preventDefault();
var _self = $(this);
var myBookId = _self.data('adid');
$("adid").val(myBookId);
$(_self.attr('href')).modal('show');
});
</script>
delete button code
print'<td><button class="btn btn-danger" data-toggle="modal" id="myModal" data-target="#myModal" data-adid='.$cd[$i][0].'>Delete Item</a></button>
modal code
<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">Heads Up!
<p>What you are doing will delete a data!</p></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success"><a href="a=yes&adid=" >Delete</a></button>
</div>
</div>
</div>
</div>
when click in delete item button then show a modal and this modal delete link have a url like ?a=yes&adid=
after &adid have a value that come fro delete item data-adid.
but my code not work
First of all you have the same id(myModal) for delete-button as well as for modal.
Try below code
<button class="btn btn-danger" data-toggle="modal" id="deleteBtn" data-target="#myModal" data-adid='.$cd[$i][0].'>Delete Item</button>
<div class="modal hide" 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">Heads Up!
<p>What you are doing will delete a data!</p></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success"><a href="" >adid=''</a></button>
</div>
</div>
</div>
</div>
script
$(document).on("click", "#deleteBtn", function (e) {
e.preventDefault();
e.stopPropagation();
var link = $(this).attr('data-adid');
$("#myModal .btn-success a").attr('href',link);
$(".modal").modal("show");
});
JSFIDDLE