I want to attach a handler to click events on the Delete button, which will pop a Confirm modal.
When confirmed it should redirect to process.php?cid=$cid.
But how do I pass the variable $cid to the modal delete?
Data List:
<?php
foreach($getChannel as $data) {
?>
<div class="btn-group btn-group-solid">
<a class="btn red" data-toggle="modal" href="#small" id="<?php echo $cid?>">
<i class="fa fa-trash"></i> Delete </a>
</div>
<?php
}
?>
Modal:
<div class="modal fade bs-modal-sm" id="small" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Confirm</h4>
</div>
<div class="modal-body">
Are you sure to delete?
</div>
<div class="modal-footer">
<button type="button" class="btn green" data-dismiss="modal" id="delcancel">cancel</button>
<button type="button" class="btn red" id="del" onclick="process.php?cid=$cid">Go Delete</button>
</div>
</div>
</div>
</div>
How do I use jQuery to receive $cid variables?
<button type="button" class="btn red" id="del" onclick="process.php?cid=$cid">Go Delete</button>
<button type="button" class="btn red" id="del" data-cid="<?php echo $cid; ?>">Go Delete</button>
Use a custom attribute which holds your $cid value
$("button[data-cid!='']").click(function() {
var getCid = $(this).attr("data-cid"); // this returns $cid
//your statements what you wanna proceed with
});
Then use jQuery to utilize your $cid value in jQuery, tag with attribute selector utilized to target click event upon the button which has the attribute data-cid. after targeting click event, used $(this) to target clicked current element to retrieve attributes .attr('data-cid') value
Related
<div class="modal" tabindex="-1" role="dialog" id="myModal" data-backdrop="static" data-
keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"id="myModalTitle">Alias Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="myModalContent">
<p>Do you want your First Name as Alias Name</p>
</div>
<div class="modal-footer">
<button id="myModalButtonYes" type="button" class="btn btn-primary" data-
dismiss="modal">Yes</button>
<button id="myModalButtonNo" type="button" class="btn btn-secondary" data-
dismiss="modal" >No</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function ()
{
$('#myModalTitle').text('Duplicate Patient');
$('#myModalContent').text('A patient already exists with the same name and
birthdate. Do you want to continue?');
const btn = document.getElementById("myModalButtonNo")
btn.addEventListener("click", DuplicateName())
$('#myModal').modal('toggle');
});
I wanted to call different functions when modal Ok button is clciked in different scenarios.
btn.addEventListener("click", DuplicateName()) didnot work and also document.getElementById("myModalButtonNo").onclick = DuplicateName() didnot work.
Please give me your suggestions on this.
you change the modal text but the button is static try to call the function in the HTML button element.
<button id="myModalButtonYes" onclick="DuplicateName()" type="button"
class="btn btn-primary" data-
dismiss="modal">Yes</button>
I am trying to delete row when delete button is clicked.
<tbody>
{% for dt in data %}
<tr>
<td>
<i class="fa fa-external-link user-profile-icon"></i>
{{dt.url}}
</td>
<td>{{dt.modified}}</td>
<td>
<button type="button" class="fa fa-trash-o btn btn-danger" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">Delete</button>
</td>
<div class="modal fade bd-example-modal-lg" id="exampleModal{{forloop.counter}}" 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="exampleModal{{forloop.counter}}">DELETE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Are you sure you want to delete this row
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
</tr>
{% endfor %}
</tbody>
When I click on delete button, modal appear for confirmation and when I click Yes then I have to send the {{dt.url}} for corresponding delete button.
I could use the input tag with hidden type and set the input value with {{dt.url}} . I am not able to check which delete button is clicked. Please help.
Add <input type="hidden" name="deletefile" value="" id="deletefileID"> outside your table.
Now set the value of button as {{dt.url}.
<button type="button" value="{{dt.url}" class="fa fa-trash-o btn btn-danger" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">Delete</button>
This is to use this value to set value of hidden input tag whenever delete button is clicked.
$('.btn-danger').on('click',function(){
var tmp = this;
tmp = tmp.value;
$('#deletefileID').val(tmp);
});
I have this modal
<div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></span></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="credit-scoring">
<label for="credit-scoring" class="form-control-label">Credit Scoring:</label>
<input type="text" class="form-control" id="credit-scoring">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>
</div>
</div>
</div>
</div>
and I would like to add text in <span id="bankAssessBondId"></span> when the following button is clicked
<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">
Bank Assess
</button>
as I have multiple buttons for this, I'm using an EventListener as follows
var buttons = document.getElementsByClassName('btn btn-success bank');
for(var i=0; i<buttons.length; i++){
buttons[i].on("click", function(){
$('#bankAssessBondId').append($(this).value)
})
}
but the 'click' button event is not detected. How can I fix this?
For elements that are dynamically generated you'll need to use the delegated events form of the JQuery on() function:
$('body').on('click', '.btn.btn-success.bank', function() {
$('#bankAssessBondId').append($(this).value)
}
I've used "body" in this case as the parent element, but it could be any element that's a parent of the buttons.
When selecting an element with multiple classes then the selectors must be specified without spaces like below.
$('.btn.bank.btn-success')
Also in this, case the modal should be opened with the script as the span value inside modal needs to be changed dynamically.
$('#bankAssess').modal('toggle');
$(function() {
$('.btn.bank.btn-success').click(function() {
var val = $(this).attr("value");
console.log(val);
$('#bankAssessBondId').append(val);
$('#bankAssess').modal('toggle');
});
});
#bankAssessBondId {
color: red;
}
<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>
<div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></span></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="credit-scoring">
<label for="credit-scoring" class="form-control-label">Credit Scoring:</label>
<input type="text" class="form-control" id="credit-scoring">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>
</div>
</div>
</div>
</div>
<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond2">
Bank Assess
</button>
<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond3">
Bank Assess
</button>
You can get the button by its class name using
$(".bank").on('click', function () {
alert('clicked');
$('#bankAssessBondId').append($(this).attr('value'));
});
Also append the value of the button to the id="bankAssessBondId"
<span id="bankAssessBondId"></span>
<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">
Bank Assess
</button>
Using a sample of your code
Here is a working example.
https://codepen.io/anon/pen/oQGJOm
Your issue looks to be that you are trying to use the jQuery on with an element that was discovered not using jQuery. The way I see it you have two possible solutions depending on what you are trying to achieve.
use the addEventListener
var buttons = document.getElementsByClassName('btn btn-success bank');
for(var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(){
$('#bankAssessBondId').append($(this).value)
})
}
use jQuery to select the buttons and use the .on function to apply a click listener to all items returned
var buttons = $(".btn.btn-success.bank");
buttons.on("click", () => {
//do stuff here
});
I hope this helps!
View:
<head>
<script>
var ABSOLUTE_PATH = '<?php echo base_url()?>';
</script>
</head>
//inside a table data
<button type="button" class="btn btn-danger btn-sm open-deleteModal" data-id="<?php echo $news['id']; ?>" data-toggle='modal' data-target="#deleteModal"><i class="fa fa-fw fa-trash-o"></i> Delete
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Record</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this record?</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" id="delRowId">Delete</a>
</div>
</div>
</div>
</div>
javascript placed in a footer
$(document).on("click", ".open-deleteModal",function(){
var rowId = $(this).data('id');
$(".modal-body #delRowId").attr("href",ABSOLUTE_PATH+"admins/deletenews/"+rowId);
});
</script>
controller:admins.php
public function deletenews($rowid){
$this->load->view('templates/admin_header');
$this->load->view('admin_pages/view');
$this->load->view('templates/admin_footer');
}
the <a class="btn btn-primary" id="delRowId">Delete</a> should be the one calling the javascript but it does not call the controller. please help me someone....
This just changes the href to proper link
$(".modal-body #delRowId").attr("href",ABSOLUTE_PATH+"admins/deletenews/"+rowId);
Need to trigger click event after changing the href for propoer link. try something like this
$(".modal-body #delRowId").attr("href",ABSOLUTE_PATH+"admins/deletenews/"+rowId).click();
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.