I have a button that, when clicked, triggers a borrame() function:
$("div").on ("click", ".bBorrar", function () {
var id = $(this.parentNode.parentNode).attr("id");
var tabla = $("table").attr("id");
borrame(id, tabla);
});
The borrame functions is the following:
function borrame(id, tabla) {
$.ajax({
url: "includes/borra.php",
type: "POST",
data: {id: id, tabla: tabla},
beforeSend: function() {
if (!confirm("Are you sure?")){
exit(0);
}
},
success: function(data) {
alert(data);
var este = "#"+id;
$(este).remove();
},
error: function() {
alert ("Error");
}
});
}
What I don't understand is why the "Are you sure?" confirm appears twice when I click the button. Any ideas?
UPDATE This is the HTML:
<table>
<tbody>
<tr>
<th>info</th><th>info</th><th>info</th>
</tr>
<tr id="1">
<td>info</td>
<td>info</td>
<td>info</td>
<td><button class="bBorrar btn btn-danger">Delete</button></td>
</tr>
</tbody>
UPDATE 2: The HTML is dinamically generated by PHP.
try with $(document) object, instead of div, multiple divs can make multiple requests.
$(document).on("click", ".bBorrar", function () {
var id = $(this.parentNode.parentNode).attr("id");
var tabla = $("table").attr("id");
borrame(id, tabla);
});
Related
I am using Django 2.2 with Bootstrap.
This is the approach used for
Opening a modal window ,
User updates the data,
User saves it
Underlying table from where the window was opened is updated and modal window is closed
Till here everything works perfectly, however, the issue occurs when you click the same button to open the window. Here when you click the button, nothing happens !
This is the javascript file.
$("#modal-risk-profile").on("submit", ".form-risk-profile", function () {
var form = $(this);
$.ajax({
url:form.attr("action"),
data:form.serialize(),
type:form.attr("method"),
dataType:'json',
success: function(data) {
console.log(data.form_is_valid);
if(data.form_is_valid) {
console.log(data.html_planner_client_list);
$("#id_client_table tbody").html(data.html_planner_client_list); // if you remove this line, modal window appears without any issues
$("#modal-risk-profile").modal("hide");
console.log("I have returned with success");
}
else {
console.log("I am in else");
$("#modal-risk-profile .modal-content").html(html_form);
}
}
});
return false;
});
The output of the html_planner_client_list is as follows:
<tr>
<td> Rajesh </td>
<td> 01-04-2000 </td>
<td> Bangalore </td>
<td> ramachandran.test#gmail.com </td>
<td> Salaried </td>
<td class="text-center">
<button class="button-risk-profile btn btn-danger btn-sm py-0" style="font-size:0.9em" data-url="/client/riskprofileplanner/19/">
Take Questionnaire
</button>
</td>
<td> Subramanian</td>
<td class="text-left">
Select
Edit
Report
<button class="button-choose-planner btn btn-primary btn-sm py-0" style="font-size: 0.9em;" data-url="/client/select_planner/19/">
Planner
</button>
</td>
There are no errors in Inspector Log and there are no errors in Django as well.
What could possibly go wrong ?
I solved this problem using this link :
$('.button-risk-profile').click(function(){
var btn = $(this);
console.log("I am in client Risk Profile")
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-risk-profile").modal("show");
},
success: function (data) {
$("#modal-risk-profile .modal-content").html(data.html_form);
}
});
});
which I changed to :
$('.client-table').on('click',".button-risk-profile",function(){
var btn = $(this);
console.log("I am in client Risk Profile")
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-risk-profile").modal("show");
},
success: function (data) {
$("#modal-risk-profile .modal-content").html(data.html_form);
}
});
});
I want to remove the deleted row from the table but it's not working with me. I tried the below code:
Scenario: When a user click on delete link/button, it sends a delete request and deletes data from Database so it should update the table front end view and should remove the clicked deleted row on success.
// Delete remedy which is linked with a Symptom ( Symptoms Table )
$("a.remedy-row-delete").click(function(e) {
e.preventDefault();
var remedy_id = $(this).attr('data-id');
var dataString = '&id='+remedy_id;
$.SmartMessageBox({
title: "Delete Remedy",
content: "Remedy Entry will be deleted, are you sure ?",
buttons: "[YES][NO]"
}, function (ButtonPress) {
if (ButtonPress === "YES"){
$.ajax({
type: 'POST',
data: dataString,
url: '<?php echo $this->CxHelper->Route('eb-admin-delete-linked-remedy-from-symptom') ?>',
success: function(data) {
$("#deleteMessage").show().delay(5000).fadeOut();
$(this).closest('tr').remove();
}
});
}
else {
$("a.remedy-row-delete").removeClass('alert');
}
});
});
I tried $(this).parent().closest('tr').remove(); also on success but not working.
HTML markup:
<table id="cx-records-table" class="table display table-striped table-bordered" width="100%">
<thead>
<tr>
<th>
Title
</th>
<th>
Delete
</th>
</tr>
<?php foreach($remedies as $key => $remedy){ ?>
<tr>
<td class="all"><?php echo $remedy['title']; ?><br></td>
<td><a class="cx-action remedy-row-delete" href="javascript:void(0)" data-id="{{remedy['id']}}"><i class="fa fa-trash-o"></i></a></td>
</tr>
<?php } ?>
</thead>
<tbody></tbody>
</table>
Thanks
because $(this) inside of ajax function is different than from outside you should do something like this
$("a.remedy-row-delete").click(function(e) {
e.preventDefault();
var remedy_id = $(this).attr('data-id');
var dataString = '&id='+remedy_id;
var $this = $(this) // <--- 1. Add this line
$.SmartMessageBox({
...
}, function (ButtonPress) {
if (ButtonPress === "YES"){
$.ajax({
...
success: function(data) {
...
$this.closest('tr').remove(); // <----change this and will works well
}
});
}
else {
$("a.remedy-row-delete").removeClass('alert');
}
});
});
try this
// Delete remedy which is linked with a Symptom ( Symptoms Table )
$("a.remedy-row-delete").click(function(e) {
e.preventDefault();
var remedy_id = $(this).attr('data-id');
var dataString = '&id='+remedy_id;
var self = this;
$.SmartMessageBox({
title: "Delete Remedy",
content: "Remedy Entry will be deleted, are you sure ?",
buttons: "[YES][NO]"
}, function (ButtonPress) {
if (ButtonPress === "YES"){
$.ajax({
type: 'POST',
data: dataString,
url: '<?php echo $this->CxHelper->Route('eb-admin-delete-linked-remedy-from-symptom') ?>',
success: function(data) {
$("#deleteMessage").show().delay(5000).fadeOut();
$(self).closest('tr').remove();
}
});
}
else {
$("a.remedy-row-delete").removeClass('alert');
}
});
});
In my code below, when i paginate my data and filter using my search box.
What happens is, after my ajax request is successful, the table in default states returns all data without the pagination.
When i refresh the page, the table is then paginated again and after ajax request, the pagination is no more
Why is this happening?
HTML
<table class="table" id="table" >
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach($products as $product)
<tr>
<td width="600">{{$product->name }}</td>
</tr>
#endforeach
</tbody>
</table>
{{$products->links()}}
JS
<script>
$(document).ready(function () {
var typingTimer; //timer identifier
var doneTypingInterval = 100; //time in ms (5 seconds)
$("#myInput").on('keyup', function () {
clearTimeout(typingTimer);
// if ($('#myInput').val() | ) {
typingTimer = setTimeout(doneTyping, doneTypingInterval);
// }
});
});
//user is "finished typing," do something
function doneTyping() {
var key = $('#myInput').val();
$.ajax({
url: '/admin/dashboard/order/food/search?myInput='+key,
type: 'GET',
beforeSend: function () {
// $("#table").slideUp('fast');
},
success: function (data) {
console.log(data);
$("#table").slideDown('fast');
var table = $("#table tbody");
table.html("");
$.each(data, function(idx, elem){
table.append(
"<tr><td><input type='checkbox' onclick='return order(this)' data-food='"+JSON.stringify(elem)+"' id='"+elem.id+"' name='"+elem.name+"' value='"+elem.price+"' data-id="+elem.id+" class='sub_chk' /></td><td width='600' >"+elem.name+"</td><td>"+elem.price+"</td><tr>"
);
});
}
});
}
</script>
I have a page that looks like this:
"Default List Name" is the name of the current page displayed. There are two buttons below and then a table which is the Default List table. Once I click Btn1, it will just re-display the default list table, but when I click Btn2, another table will be displayed, replacing the default list table. Let's call the second table "Second List". Once the table changes, the title "Default List Name" will also change to "Second List Name".
I am going to use AJAX for this so that real time button click and displaying of the corresponding table are applied. But I am still new to AJAX so I am having quite a hard time.
Here's my current code:
var title = $("#title").text();
var btn1 = $("#btn1");
var btn2 = $("#btn2");
/** If one of the buttons is clicked after another and then displays a table, the previous ajax that displayed the previous table, will be removed **/
$(document).ready(function() {
btn1.on("click", function() {
displayDefaultList();
});
btn2.on("click", function() {
displaySecondList();
});
});
function displayDefaultList(){
console.log("display default list table");
/*$.ajax({
type: 'GET',
dataType: 'json',
cache: false,
url: 'url to current page (not sure)',
async: false
}).*/
}
function displaySecondList(){
console.log("display second list table");
}
I hope I'm making my self clear and hope you guys can help me.
I just wrote this for you just to show you that you can always show and hide your tables
$(document).ready(function(){
$("#mytable1").show();
$("#mytable2").hide();
$("#button1").click(function(){
$("#text").html("Default List Name");
$("#mytable2").hide();
$("#mytable1").show();
});
$("#button2").click(function(){
$("#mytable1").hide();
$("#mytable2").show();
$("#text").html("Second List Name");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id = "text">Default List Name</div>
<button id = "button1">Button1</button>
<button id = "button2">Button2</button>
<table id = "mytable1" border = "1">
<tr>
<td>text1</td>
<td>text1</td>
<td>text1</td>
</tr>
<tr>
<td>text2</td>
<td>text2</td>
<td>text2</td>
</tr>
<tr>
<td>text3</td>
<td>text3</td>
<td>text3</td>
</tr>
<tr>
<td>text4</td>
<td>text4</td>
<td>text4</td>
</tr>
</table>
<br/>
<table id = "mytable2" border = "1">
<tr>
<td>box1</td>
<td>box1</td>
<td>box1</td>
</tr>
<tr>
<td>box2</td>
<td>box2</td>
<td>box2</td>
</tr>
<tr>
<td>box3</td>
<td>box3</td>
<td>box3</td>
</tr>
<tr>
<td>box4</td>
<td>box4</td>
<td>box4</td>
</tr>
</table>
NOW for your ajax, you should just simply hide one of the tables based on the button that was clicked, and then load the data to your specific table. This works for me. Hope it helps :)
Here's AJAX:
$(document).ready(function(){
$("#button1").click(function(){
$("#mytable2").hide();
$.ajax({
url:'app.php',
type: "GET",
data: ""
dataType: 'json',
success: function(data){
$.each(data, function(key, value){
$("table #mytable1").append("<tr><td>" +
"ID :" + value.ID +
"Name :"+ value.Name +
"Age :" + value.Age +
"</td><tr>");
.........
});
}
});
});
$("#button2").click(function(){
$("#mytable1").hide();
$.ajax({
url:'app.php',
type: "GET",
data: ""
dataType: 'json',
success: function(data){
$.each(data, function(key, value){
$("table #mytable2").append("<tr><td>" +
"ID :" + value.ID +
"Name :"+ value.Name +
"Age :" + value.Age +
"</td><tr>");
.........
});
}
});
});
});
I created this fiddle for you: https://jsfiddle.net/8bakcfub/.
Basically, each button click will simulate a call to an API that returns a very simple JSON object. On success, the code parses the response, empties the table and appends a new row to it with the data, and finally changes the title.
Note that the code is pretty much the same for both buttons, except for (a) the JSON returned from AJAX, and (b) the title :)
HTML:
<p id="title">
This title will be replaced...
</p>
<button id="btn1">
First list
</button>
<button id="btn2">
Second list
</button>
<table id="table">
<thead>
<th>Col 1</th>
<th>Col 2</th>
</thead>
<tbody>
</tbody>
</table>
JS:
var btn1 = $("#btn1");
var btn2 = $("#btn2");
$(document).ready(function() {
btn1.on("click", function() {
displayDefaultList();
});
btn2.on("click", function() {
displaySecondList();
});
});
function displayDefaultList() {
$.ajax({
type: 'POST',
dataType: 'json',
url: '/echo/json/',
async: false,
data: {
json: JSON.stringify({
row: [1, 2]
})
},
success: function(result) {
$('#title').text('first list');
$('#table tbody').remove();
var newRow = '<tbody><tr><td>' + result.row[0] + '</td></tr><tr><td>' + result.row[1] + '</td></tr></tbody>';
$('#table').append(newRow);
}
});
}
function displaySecondList() {
$.ajax({
type: 'POST',
dataType: 'json',
url: '/echo/json/',
async: false,
data: {
json: JSON.stringify({
'row': [3, 4]
})
},
success: function(result) {
$('#title').text('second list');
$('#table tbody').remove();
var newRow = '<tbody><tr><td>' + result.row[0] + '</td></tr><tr><td>' + result.row[1] + '</td></tr></tbody>';
$('#table').append(newRow);
}
});
}
function GetEmp() {
$.ajax({
type: "POST",
url: "EMService.asmx/GetEmployee",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg, status, metaData) {
if (msg.d && msg.d.length > 0) {
BindTable(msg.d);
}
},
});
}
to bind the json(collection)
function BindTable(data) {
$('#tblEmployee tr:gt(0)').remove();
$("#employeeTemplate").tmpl(data).appendTo("#tblEmployee");
}
<script id="employeeTemplate" type="text/html">
<tr>
<td>${Id}</td>
<td>${Code}</td>
<td>${Name}</td>
</tr>
</script>
You just have to add the a delete button in your template, and bind an event handler (event delegation works great here):
<script id="employeeTemplate" type="text/html">
<tr>
<td>${Id}</td>
<td>${Code}</td>
<td>${Name}</td>
<td><button data-id="${Id}" class=".delete" type="button">Delete</button></td>
</tr>
</script>
And the event handler:
$('#tblEmployee').on('click', '.delete', function() {
var $this = $(this);
var id = $this.data('id');
// this is where you would make the Ajax call to remove the record from
// the server
deleteRecord(id).then(function() {
// at some point, e.g. after the Ajax request was successful, you
// would also remove the row
$this.closest('tr).remove();
});
});
Where deleteRecord would look something like:
function deleteRecord(id) {
return $.ajax({ ... });
}
This makes use of the jqXHR's promise interface. You can find more about promises in the jQuery tutorial.
Try below code, you can add Delete button to every row with different ids
function BindTable(data) {
$('#tblEmployee tr:gt(0)').remove();
$("#employeeTemplate").tmpl(data).appendTo("#tblEmployee");
}
Add the button to the template
<tr>
<td>${Id}</td>
<td>${Code}</td>
<td>${Name}</td>
<td><input type="button" value="Delete" id="delete${Id}"></td>
</tr>