We Keep Coding

passing values to bootstrap modal

I am trying to pass values to my modal in html using JQUERY.
I have this:
<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#clientStatus" data-clientCurrentStatus="inactive">Change Client Status</a>
<script>
$(function() {
$('#clientStatus').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var clientCurrentStatus = button.data('clientCurrentStatus'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('#clientCurrentStatus').val(clientCurrentStatus);
});
});
</script>
and what I am trying to do is inside data-clientCurrentStatus i am passing the value. and then inside my modal I have this:
<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current Status:</p>
<input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
so as you can see, the id matches, and everything matches. I am not sure why it isn't working. I am importing the jquery tag like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
but nothing is working. how can i fix this?

I think there are some issues with what you can use for attribute names:
http://html5doctor.com/html5-custom-data-attributes/
$(function() {
$('#clientStatus').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var client_current_status = button.data('client_current_status');
var modal = $(this);
modal.find('#clientCurrentStatus').val(client_current_status);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current Status:</p>
<input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
<button type = "button" class="btn btn-primary" data-toggle="modal" data-target="#clientStatus" data-client_current_status="inactive">Change Client Status</button>

I want to change the modal of confirm but I don't know where to start from

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>

Clear the Input type file Value if the Modal has been Closed and Save All changes button should be disabled

How are you ? I'm working on simple project and I want to do a simple trick in my app.
I want to Clear the Input type file Value if the Modal has been Closed
mean if the user decided to Cancel the upload and close the modal I want to reset the input value to be empty and Save All changes Button should be disabled if the value is empty ....
HTML CODE :
<div class="modal fade" id="modal_a" tabindex="-1" role="dialog" aria-labelledby="modal_aLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="uploadavatar">
<input type="file"
class="custom-file-input"
id="ID12"
name="avatar"
value=""
hidden />
<label role="button" class="btn" for="ID12">
Upload Now
</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="button1" disabled>Save All changes</button>
</div>
</div>
</div>
</div>
JS CODE :
$(document).on('shown.bs.modal', '#modal_a', function() {
if ($(this).hasClass('show')) {
$('#ID12').on('change', function() {
if ($(this).val() == '') {
$('#button1').prop('disabled', true);
} else {
$('#button1').prop('disabled', false);
}
$(this).attr('value', $(this).val());
});
}
});
$(document).on('hide.bs.modal', '#modal_a', function(e) {
if ($('#ID12').val() != '') {
const CancelUpdateConfirmation = confirm('Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄');
if (!CancelUpdateConfirmation) {
e.preventDefault();
} else {
}
}
});

Like this.
$( document ).ready(function() {
$('#exampleModal').on('hidden.bs.modal', function (e) {
$('#ID12').val('')
$('#button1').prop('disabled', true);
})
$('#exampleModal').on('hide.bs.modal', function (e) {
if ($('#ID12').val() != '') {
const CancelUpdateConfirmation = confirm('Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄');
if (!CancelUpdateConfirmation) {
e.preventDefault();
} else {
}
}
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
<input type="file"
id="ID12"
name="avatar"
value=""
/>
<button type="submit" class="btn btn-primary" id="button1">Save All changes</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

How do I remove content from a modal-body upon closing the modal?

My goal is to display a fresh modal every time it is opened. Currently, that is only true when the modal window is first displayed after refreshing the page. For the subsequent closing/opening of the modal, it just appends the current content to the end of the previous content, which is still displayed.
It may be worth noting that with this particular configuration of the countless efforts tried, I get an
Uncaught ReferenceError: $ is not defined
in my Javascript console for the line
$(document).ready(function() {
but I'm not sure why. The jQuery library (3.2.1) is initialized for the script type it's being used with after all. Any clue?
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').append("$0 per month.");
}
else {
$('.modal-body').append(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->

You should use .html or .text instead of .append
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->

Try doing $('modal-body').empty() instead of clear

Call show.bs.modal event before parent event

I have a bootstrap button (I used bootstrap 4) that open a modal and transfer the data that in the button to the form in the modal by the function:
$('#exampleModal').on('show.bs.modal', function (event).
the button is in a div (parent).
when I click on the button the parent event called before the child.
I don't want the parent event to be run.
I need only the popup modal to open.
when I try to open the button by onclick its call first but the data is not transfer.
this is my code example: codepen
this is the html
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
this is the script
<script>
$(".parent").click(function(event){
alert("Parent event");
})
/*
if I add this function I cant transfer the data that in the button
$(".child").click(function(event){
alert("Child event");
event.stopPropagation();
$('#exampleModal').modal('show');
})*/
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
</script>

Quite simple in the parent click , check if target is different to the button with data-target='#exampleModal' or not , all that using the .is() jquery function like below :
//get reference to the button
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) { // be sur button was'nt clicked
alert("Parent event");
}
})
Updated Pen
See below working snippet :
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) {
alert("Parent event");
}
})
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
body {
background-color: #a3d5d3;
}
.col-12{ background:red; height:100px;}
.child{background:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>