I want to delete user with bootbox dialog window but when i click remove button the bootbox dialog window doesn't show. I wrote a simple program. Here is my codes: Before i confirm in libraries:
<head>
<title>Adminstration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootbox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
My html code like this:
<form id="form1" action="footer.php">
<div class="body-wrap" id="wrapper" style="overflow: auto;">
<div class="container" id="container" style=" margin-top: 40px;">
<div class="well col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" id="well">
<?php $arr = array(1, 2, 3, 4); foreach ($arr as $value)
{ $value = $value * 2;
?>
<div class="row user-row" style="border-bottom: 1px solid #ddd;">
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
<strong><?php echo $value ?></strong><br>
<span class="text-muted">Value: <?php echo $value; ?> </span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user pull-right" data-for=".<?php echo $value; ?>">
<i class="glyphicon glyphicon-chevron-down text-muted "></i>
</div>
</div>
<div class="row user-infos <?php echo $value; ?>" id="user-infos">
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1" id="col-xs">
<div class="panel panel-primary" id="panel">
<div class="panel-heading">
<h2 class="panel-title" style="text-align: center;">user info</h2>
</div>
<div class="panel-body">
<div class="row-fluid">
<div class="span6">
<h3> <?php echo $value ?> </h3><br>
</div>
</div>
</div>
<div class="panel-footer clearfix" id="footer">
<span>
<a class="delete_user btn btn-danger btn-sm pull-right" id="del" href="" data-toggle="tooltip" title="Delete user"><span class="glyphicon glyphicon-remove"></span></a>
</span >
</div>
</div>
</div>
</div><?php } ?>
</div>
</div>
</div>
</form>
And js code:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
/************************USERS********************************/
$(document).ready(function() {
var panels = $('.user-infos');
var panelsButton = $('.dropdown-user');
panels.hide();
//Click dropdown
panelsButton.click(function() {
//get data-for attribute
var dataFor = $(this).attr('data-for');
var idFor = $(dataFor);
//current button
var currentButton = $(this);
idFor.slideToggle(400, function() {
//Completed slidetoggle
if(idFor.is(':visible'))
{
currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
}
else
{
currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
}
})
});
});
/********************************************************/
/************************DELETE USERS*************************************/
$(document).ready(function(){
$('.delete_user#del').click(function(e){
e.preventDefault();
bootbox.dialog({
message: "<i class='fa fa-warning fa-2x' style='color: orange;'></i><span style='font-size:16px; position: absolute; margin-left: 5px; margin-top: 5px;'>Are you sure to delete this user?</span>",
title: "<i class='glyphicon glyphicon-trash'></i> Delete user!",
buttons: {
danger: {
label: "Delete!",
className: "btn-danger",
callback: function() {/*some code*/}
},
success: {
label: "No",
className: "btn-success",
callback: function() {
$('.bootbox').modal('hide');
}
}
}
});
});
});
/*******************************************************************/
This js code for bootbox dialog is work another php file but doesn't work for this php file.
