I have created a pop up modal for my delete button on a page. When you clicked on the delete button, a modal will pop up and ask you whether you really want to delete the item or not. There are two buttons on the modal, the first one is cancel and the other one is delete. Clicking on the cancel button will close the pop up but when i click on the delete button, nothing happens.
Here is the php code for the delete button:
echo "<a href='#myModal' class='btn btn-danger' data-toggle='modal'> Delete</a>";
Here is the modal code:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<h4 class="modal-title">Are you sure?</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Do you really want to delete these records? This process cannot be undone.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm">Delete</button>
</div>
</div>
</div>
</div>
you have not given anything on click of the delete button and how you are expecting something? if you add data-dismiss="modal" for button it will close the popup. rest of the things u can handle it using javascript.
function Delete()
{
//Write your code for deleting
$.ajax({
type: "post",
datatype: "json",
async: false,
contenttype: "application/json",
url: "DeleteItem.php",
success: function (result) {
$('#myModal').modal('hide'); //for hiding popup
},
error: function(xhr, ajaxOptions, thrownError) {
//handle error
}
});
}
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<h4 class="modal-title">Are you sure?</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Do you really want to delete these records? This process cannot be undone.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" onclick="Delete()" id="confirm">Delete</button>
</div>
</div>
</div>
</div>
Related
I have a basic Bootstrap Modal on my page with a text input field, which I will want to trigger upon clicking the "Report A Bug" button shown above.
<div class="btn-group" id="exampleModal" role="group">
<button id="myBtnToReportABug" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal"> Report A Problem </button>
</div>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Please Provide A Short Description Of The Issue</h5>
<div class="input-group">
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
However I'm not sure of the best way to trigger it in Javascript. As you can see project already has a call to a modal, but its not a modal that is created in the HTML as I have with this 'Report A Bug' one.
$("#myBtnToReportABug").click(() => openModalPopup(cCenterUrl));
EDIT
Tried the Data Target method as mentioned below due to it's simplicity, but my Modal is not hidden nor does the click of the button trigger the modal to appear, any ideas?
<div class="btn-group" role="group">
<button id="myBtnToCcenter" type="button" target= '_blank' class="btn btn-primary"> Open CCenter </button>
<button id="myBtnToReportABug" type="button" target= '_blank' class="btn btn-secondary" data-toggle="modal" data-target=".modal-report"> Report A Problem </button>
</div>
<div class="modal-report" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Report A Bug</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You trigger the modal with: data-target="#exampleModal"
Then you also need the right modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Programmatically you have to do this
$('#exampleModalLabel').modal('show');
You previously need to initialize it with show: false so it won't show until you manually do it.
$('#exampleModalLabel').modal({ show: false})
Where exampleModalLabel is the id of the modal container.
i try open modal from another page and javascript file and got only black screen
javascript file
$('.myModal').on('click',function(){
$.ajax({
type: "POST",
url : base_url +"/Time",
data: "_token=HZNyRybabXWcTwp4kbeVpVsUGiuiYzFBDdiRJtZk" ,
success: function(response)
{
console.log(response);
$('.Stime').html(response);
}
});
});
home page
<div class="Stime"></div>
<!-- Button trigger modal -->
<button type="button" class="myModal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModals">
Launch demo modal
</button>
modal page
Time.html
<!-- Modal -->
<div class="modal fade" id="myModals" 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>
i dont know why i got only black screen
I have a Button that gets populated with ever row in the table. I want to be able to put the value of the row "$row[auditID]" and use it in my modal to be able to make this delete button work. The alert pops up, but the Modal won't hide and my delete action doesn't work (doesn't delete the audit).
<a href=\"#\" id=\"$row[auditID]\" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title=\"Remove\" >Remove</span> </a>";
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<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">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
JQuery Script:
<script>
$("#yes_delete").click(function(){
var auditID = this.id;
//alert("delete test");
$.post("edit_audits.php?action=delete&auditID="+auditID,{
function(data){
alert("Audit Deleted");
$('question_alert').modal('hide');
window.location.reload();
}
});
});
</script>
Something like this?
Put your PHP value into the a tag like this:
<a href="#" data-mylink="<?php echo $yourPHPVar; ?>" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
jsFiddle Demo
$('#question_alert').on('shown.bs.modal', function (e) {
var btn = $(e.relatedTarget);
var linked = btn.data('mylink');
$('#audNo').text(linked);
// Or:
// var modal = $(this);
// modal.find('.modal-body h3 span#audNo').text(linked);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a href="#" id="bob" data-mylink="Fred" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<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">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> Audit number <span id="audNo"></span>? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
I would do something like this
<a href="javascript:void(0)" class='btn btn-danger btn-xs btn-remove' data-id="<?=$row["auditID"]?>" role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" >Remove</span></a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<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">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
And This in The jQuery function. Make sure you put your jQuery script tag at the top of the page for jQuery to load before this function
<script>
var removeId = null;
$(document).ready(function(){
$(".btn-remove").click(function(){
removeId = $(this).attr("data-id");
});
$("#yes_delete").click(function(){
$.ajax({
url: "edit_audits.php",
type: "POST",
data: "action=delete&auditID="+removeId,
success: function(){
$('#question_alert').modal('hide');
window.location.reload();
}
});
}
});
Keep in mind, I have not ran this as I don't have all the data needed. You may have to debug this a little as it was blind coding.
I have this Modal from Bootstrap
When I add
button To call it it open successfully,
but what I really need is to open this modal from function calling automatically
my Experiment is:
<button id="RenewCollerctorDateID" class="btn btn-success" style="width: 10%; display: inline;
padding-right: 10px; float: left;" onclick="RenewCollectorDatePeriod();">renew</button>
MY JavaScript is
function RenewCollectorDatePeriod() {
// AreYOuSureRenew();
var EmpID = $("#<%=ddlFilterCollector.ClientID%>").val();
if (EmpID == -1) {
alert("please select one ")
}
else {
alert(EmpID);
GetCollectorInfo(EmpID);
}
}
then:
function GetCollectorInfo(EmpID) {
// AreYOuSureRenew();
$.ajax({
type: "POST",
url: "UnloadingCalendar.aspx/GetCollectorInfo",
data: JSON.stringify({ EmpID: EmpID }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
alert(result.d);
AreYOuSureRenew();
},
error: function (msg) {
alert(msg.d);
},
complete: function () {
}
})
}
function AreYOuSureRenew() {
alert("opened");
$('#EnsureModal').modal('show');
}
and here my modal
<div class=" modal fade" id="EnSureModal" 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">Do ypu need change </h4>
</div>
<div class="modal-body">
<p>Are u sure from </p>
<label id="FromDate"></label>
<p>To</p>
<label id="ToDate"></label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">no</button>
<button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
Notice: when I add $("#EnSureModal").modal('show'); in Document.Ready it appeasrs on page load and appears again on function call , how can I make it appears only in function call
I read your code and I found out that you didn't use bootstrap correctly and the also the script you wrote is not correct. Check this out. This might help you.
Script:
$(document).ready(function(){
$("#fireme").click(function(){
$("#EnSureModal").modal();
});
});
HTML:
<button id="fireme" class="btn btn-default">Fire me up!</button>
<div class="modal fade" id="EnSureModal" 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">Do ypu need change </h4>
</div>
<div class="modal-body">
<p>Are u sure from </p>
<label id="FromDate"></label>
<p>To</p>
<label id="ToDate"></label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">no</button>
<button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
The fiddle
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");