passing values to bootstrap modal - javascript

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>

Related

How to change Bootstrap modal content depending on button click

I need to be able to change the content inside a modal depending on the button that is clicked.
For instance, if button one is clicked it will only show the div with class 'one' and the others will remain hidden.
$('#exampleModalCenter').modal('toggle')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">one</button>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">two</button>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">three</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" 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>
</div>
<div class="modal-body">
<div class="one">Button one content</div>
<div class="two">Button two content</div>
<div class="one">Button three content</div>
</div>
</div>
</div>
</div>
Example below. The logic: Whenever you click a button, hide all the content first, then you show the specific content based on the button you clicked.
Ref.: https://getbootstrap.com/docs/3.3/javascript/#modals-related-target
$(".btn").click(function () {
$(".parent").children().each(function () {
$(this).hide();
});
$(`div.${$(this).attr("id")}`).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button
id="one"
type="button"
class="btn"
data-toggle="modal"
data-target="#exampleModalCenter"
>
one
</button>
<button
id="two"
type="button"
class="btn"
data-toggle="modal"
data-target="#exampleModalCenter"
>
two
</button>
<button
id="three"
type="button"
class="btn"
data-toggle="modal"
data-target="#exampleModalCenter"
>
three
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalCenter"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" 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>
</div>
<div class="modal-body">
<div class="parent">
<div class="one">Button one content</div>
<div class="two">Button two content</div>
<div class="three">Button three content</div>
</div>
</div>
</div>
</div>
</div>
You can look at this tutorial :
https://getbootstrap.com/docs/3.4/javascript/#modals-related-target
Simply add a data attribute to your button :
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="one">Open modal for One</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="two">Open modal for Two</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="three">Open modal for Three</button>
And when the event occur, you can recover the attribute of the button and adapt the behavior according to it :
$('#yourModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('name'); // Extract info from data-* attributes
// Here, you can change the behavior according to the button clicked :
switch(recipient) {
case 'one':
$('.one').show();
break;
case 'two':
$('.two').show();
break;
// etc...
}
});
You could subscribe to the modal's show.bs.modal event, check the value of the relatedTarget property of the event and then show/hide internal divs based on that target value
$(document).on("click",".modal-open",function(){
var button_val = $(this).attr("data-val");
$('#exampleModalCenter').modal('show');
$(".conditional-div").hide();
$("#exampleModalCenter ."+button_val).show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn modal-open" data-val="one" >one</button>
<button type="button" class="btn modal-open" data-val="two" >two</button>
<button type="button" class="btn modal-open" data-val="three" >three</button>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" 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>
</div>
<div class="modal-body">
<div class="one conditional-div">Button one content</div>
<div class="two conditional-div">Button two content</div>
<div class="three conditional-div">Button three content</div>
</div>
</div>
</div>
</div>
You can do this :
$('button.btn-open-modal').on('click', function(){
let targetClass = $(this).attr("target-class");
$("#exampleModalCenter div.modal-body > div").each(function(){
if($(this).hasClass(targetClass)){
$(this).show();
}else {
$(this).hide();
}
});
$('#exampleModalCenter').modal('toggle');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-open-modal" target-class="one">one</button>
<button type="button" class="btn btn-open-modal" target-class="two">two</button>
<button type="button" class="btn btn-open-modal" target-class="three">three</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" 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>
</div>
<div class="modal-body">
<div class="one">Button one content</div>
<div class="two">Button two content</div>
<div class="three">Button three content</div>
</div>
</div>
</div>
</div>

Bootstrap modal is not showing in PHP

I'm creating a login page which is based on PHP, I'm trying to make that if there is a server error, a modal will show up. But when I try to do this, an error shows up in the console that says
'$' is not defined
How to make the modal show?
I tried to check if the code actually runs, and it is running.
The modal in the file:
<div class="modal fade bd-example-modal-xl" id="server-error" tabindex="-1" role="dialog" aria-labelledby="server-error" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Server error</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Server error, Please contact AlexDorian7.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The code in PHP:
if ($conn->connect_error) {
echo '<script type="text/javascript">showServerErrorMessage()</script>';
}
The code in Javascript:
function showServerErrorMessage() {
$('#server-error').modal('show');
}
Thanks!
Do check if you have all the script and css related to bootstrap
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function showServerErrorMessage() {
$("#server-error").modal('show');
}
</script>
call the function after defining it above
<?php if ($conn->connect_error) { ?>
<script type="text/javascript"> showServerErrorMessage(); </script>
<?php } ?>
you can put your model anywhere in page
<div class="modal fade bd-example-modal-xl" id="server-error" tabindex="-1" role="dialog" aria-labelledby="server-error" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Server error</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Server error, Please contact AlexDorian7.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

data-target - Angular

I am displaying a dialog by using HTML directly
<!-- Dialog -->
<div class="modal fade" id="exampleModalCenter" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Something went wrong</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="modal-title" id="exampleModalLongTitle">Maximum 10 messages selected</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#exampleModalCenter">RunIt</button>
but I would like to do something previously so I would like to execute data-toggle="modal" data-target="#exampleModalCenter" by javascript using (click)
So basically this would be the steps:
1- (click)="test()"
2- execute data-toggle="modal" data-target="#exampleModalCenter" by javascript in test()
to get the DIV that contains it, I have tried:
test(){
var dialog= <HTMLDivElement>document.getElementById(exampleModalCenter);
}
but I can not find the exampleModalCenter
you should be using attr.data-target
<button data-toggle="collapse"
[attr.data-target]="'#exampleModalCenter">RunIt
</button>
Firstly, you must add click method 'test' to button. Change your modal's class name as 'modal fade'. And after, your ts file must be like this:
#ViewChild('exampleModalCenter') exampleModalCenter;
test() {
this.exampleModalCenter.nativeElement.className = 'modal fade show';
}

How can I close bootstrap modal after open?

I have a project and I'm using bootstrap modal and my modal must open automatically it's okey so far then open I want to close it after 10 or 30 seconds how to do it ?
$(function(){
setTimeout(function(e){
var delayModal = $(e).parents(".modal").attr("data-delay");
$('#memberModal').modal('show');
}, parseInt(delayModal)*1000);
});
but it works with this function but this is not dynamically could you help me to do what I want ? and auto closing with settimeout ? I gotta learn how to do it
$(function(){
setTimeout(function(e){
$('#memberModal').modal('show');
}, parseInt(5)*1000);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true" data-delay="5">
<div class="modal-dialog">
<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="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.
<BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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>
Just add $('#memberModal').modal('hide') in the timeout, after you open the modal.
$(function(){
setTimeout(function(e){
$('#memberModal').modal('show');
}, parseInt($('#memberModal').attr('data-open')) * 1000);
setTimeout(function(e){
$('#memberModal').modal('hide');
}, parseInt($('#memberModal').attr('data-delay')) * 1000);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true" data-delay="6" data-open="2">
<div class="modal-dialog">
<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="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.
<BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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>
You can do it dynamically like this
$(function(){
var delayModal = $(".modal").attr("data-delay");
setTimeout(function(e){
$('#memberModal').modal('show');
}, parseInt(delayModal)*1000);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true" data-delay="5">
<div class="modal-dialog">
<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="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.
<BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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>
Automation show and hide modal
$(function(){
var modal = $('#memberModal');
var showDelay = parseInt(modal.data('delay'));
var closeDelay = parseInt(modal.data('close'));
var openByTimeout = false;
setTimeout(function(e){
openByTimeout = true;
modal.modal('show');
}, showDelay*1000);
modal.on('show.bs.modal', function () {
if (openByTimeout) {
setTimeout(function(e){
openByTimeout = false;
modal.modal('hide');
}, closeDelay*1000);
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="memberModal" data-delay="1" data-close="2" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.
<BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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>

Modal work But not delete data with clicking confirm

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");

Categories