I want to change user status in my system. Before change the status i need show confirmation box. So i add bootstrap model for it like follows.
html
<tbody>
<tr>
<td>Dinuka Perera</td>
<td>User is active</td>
<td>Activate</td>
</tr>
<tr>
<td>Thilanga Perera</td>
<td>User is inactive</td>
<td>Dectivate</td>
</tr>
<tr>
<td>Test Perera</td>
<td>User is active</td>
<td>Activate</td>
</tr>
</tbody>
js
$(document).on('click','.active', function () {
var $this = $(this);
$('#status-model').modal();
$('.alert').remove();
$('#change-btn').click(function() {
var id = $this.parents('tr').data('id');
$.post('users/status', {id:id, status:0}, function( data ) {
var obj = $.parseJSON(data);
if (obj.success != undefined) {
$this.html('Activate');
$this.removeClass('active');
$this.addClass('inactive');
$this.parents('tr').find('.status').html('User is inactive');
$('#search-form').before('<div class="alert alert-success">User activation successful</div>');
$('#status-model').modal('hide');
}
});
});
});
$(document).on('click','.inactive', function () {
var $this = $(this);
$('#status-model').modal();
$('.alert').remove();
$('#change-btn').click(function() {
var id = $this.parents('tr').data('id');
$.post('users/status', {id:id, status:1}, function( data ) {
var obj = $.parseJSON(data);
if (obj.success != undefined) {
$this.html('Deactivate');
$this.removeClass('inactive');
$this.addClass('active');
$this.parents('tr').find('.status').html('User is active');
$('#search-form').before('<div class="alert alert-success">User deactivation successful</div>');
$('#status-model').modal('hide');
}
});
});
});
It is working for fist time. After that it will send multiple ajax request. It was successful before i add this model. What is the issue?
When you click .active or .inactive object it bind an event to "#change-btn" object. Therefore each of binded click event send another ajax request to server. Therefore you have to remove all click event before binding. You can do that like;
$( "#change-btn").unbind( "click" );
$('#change-btn').click(function() {
...
});
Related
I am trying to delete this entire row whenever you click the Delete button. This is my jQuery command:
UPDATE: I have updated the click function to my finalized version:
$(document).on('click', '.delete-assignment',function () {
console.log("click");
var data = {
assignment_id: $(this).closest('tr').find('.assignment-id').html(),
class_id: $('#classId').val()
}
var row = $(this).closest('tr');
deleteAssignment(data, function(returnData){
var returnData = JSON.parse(returnData);
if(returnData.status == "Success"){
console.log("yes");
row.hide();
}
});
});
When I click delete, it triggers the deleteAssignment function successfully and returns a callback of {"status":"Success"}. Yet when I returnData.status == "Success" is not being triggered.If I try jQuery.type(returnData), It says string. So I implemented JSON.parse and it says unexpected token in json at position 0
here is my html:
<tbody id="Homework">
<tr>
<td>Homework Test Title</td>
<td>02/16/2017 - 10:00 AM</td>
<td class="assignment-id">51</td>
<td><button type="button" class="btn btn-danger delete-assignment">Delete</button></td>
</tr>
</tbody>
I wanted to also include how I am passing data back to deleteAssignment as a callback (defined in the javascript function (deleteAssignment)
assignment = Assignments.objects.get(id=data['assignment_id'])
assignment.delete()
data = {}
data['status'] = "Success"
return HttpResponse(json.dumps(data), content_type="application/json")
You have a clouser problem.
The variable this inside your callback function is not the same this that inside the click function.
There are several ways to solve this, here is one of them:
$('.delete-assignment').on('click', function () {
var data = {
assignment_id: $(this).closest('tr').find('.assignment-id').html(),
class_id: $('#classId').val()
}
var that = this;
deleteAssignment(data, function(returnData){
console.log(returnData);
if(returnData.status == "Success"){
print("yes");
$(that).closest('tr').remove();
}
});
});
I want to update a column of data in a table in MVC view.
This is the View that I want to update.
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.CurrentTemperature)
</th>
<th></th>
</tr>
#{int i = 1;}
#foreach (var item in Model)
{
<tr>
<td align="center" #*id="#("current"+i)" data-id="#item.ID"*#>
<div id="#("current"+i)" data-id="#item.ID">
#{Html.RenderAction("TemperatureUpdateDeviceList", new { idDevice = item.ID });}
</div>
</td>
</tr>
i++;
}
</table>
I wrote a simple script in order to update the divs. Just for trying I decided to update only the 4th div with id= current4.
$(function () {
setInterval(function () {
var id = $(this).attr('data-id');
$.ajax({
url: '#Url.Action("TemperatureUpdateDeviceList")',
type: 'GET',
data: { idDevice: id},
}).success(function (partialView) {
$('#current4').html(partialView);
});
},3000);
});
Using this method I can't perform a correct request because the generated URL is not correct. How to have a correct URL?
Notice that TemperatureUpdateDeviceList function is defined as:
public PartialViewResult TemperatureUpdateDeviceList(int idDevice)
{
return PartialView(temperatureModel);
}
You use of var id = $(this).attr('data-id'); will not pass the data-id value because $(this) is not your <div> element. If you want to update all your elements, then change the html to
<div class="container" data-id="#item.ID">
#{Html.RenderAction("TemperatureUpdateDeviceList", new { idDevice = item.ID });}
</div>
Note the id attribute is not necessary. Then in the script use
var url = '#Url.Action("TemperatureUpdateDeviceList")';
setInterval(function () {
$('.container').each(function() {
var id = $(this).data('id');
var div = $(this);
$.get(url, { idDevice: id}, function(partialView) {
div.html(partialView);
});
});
},3000);
How would you delete a row from a table using AJAX based on this code?
Here's the PHP code I'm working with:
foreach ($results as $result) {
echo "<tr><td>".$result['first_name']."</td><td>".$result['last_name']."</td><td><button class=\"btn btn-sm btn-danger delete_class\" id=\"".$result['id']."\" >DELETE</button></td></tr>";
}
As you can see, the button has an id paired with it.
Here's my jquery/AJAX code to delete the file from the database:
<script>
var $tr = $(this).attr('parentElement');
$('.delete_class').click(function(){
var del_id= $('.delete_class').attr('id');
$.ajax({
url:"delete_page.php?delete_id="+del_id,
cache:false,
success:function(result){
$tr.find('td').fadeOut(1000,function(){
$tr.remove();
});
}
});
});
</script>
There is also a PHP file that goes into the database and deletes the data, which works fine.
In the javascript code above ^ the variable being set at the top "$tr" is saying the 'parentAttribute' is the "td" not the "tr", how would I go up two parent attributes?
What can I change my "success:function(result){ }" to to make the row immediately disappear, because,
$tr.find('td').fadeOut(1000,function(){
$tr.remove();
}
this code ^ isn't working.
Change your current jquery code as shown below:
<script>
$('.delete_class').click(function(){
var tr = $(this).closest('tr'),
del_id = $(this).attr('id');
$.ajax({
url: "delete_page.php?delete_id="+ del_id,
cache: false,
success:function(result){
tr.fadeOut(1000, function(){
$(this).remove();
});
}
});
});
</script>
The closest method returns the first ancestor of the selected element.
https://api.jquery.com/closest/
HTML
<table>
<thead>
<tr>
<th>Page Name</th>
<th>Page Image</th>
<th>Action </th>
</tr>
</thead>
<tbody>
<tr>
<td>Page Name1</td>
<td>Page Image1</td>
<td><a title="Delete" class="dlt" href="delete.php?id=1" >Delete</a></td>
</tr>
<tr>
<td>Page Name1</td>
<td>Page Image1</td>
<td><a title="Delete" class="dlt" href="delete.php?id=2" >Delete</a></td>
</tr>
</tbody>
</table>
Javascript
<script>
$("a.dlt").click(function(evt){
evt.preventDefault();
if(confirm("It will Delete All detail related to this. Are You Sure? ")){
var dis = this;
$.post($(dis).attr('href'),{'delete':'dlt'},function(resp){
if(resp == 1){
$(dis).parent().parent().remove();
}else{
alert(resp);
}
});
}
});
</script>
Try
tr = $(this).parent();
there's no attribute called 'parentElement' that's why it's not working.
reference: Jquery Docs
I'd also change the function line to:
var del_id = $(this).attr('id');
I am adding a button that will "approve" all rows in the table (call a URL to process the record). I generate the table then attach the DataTable to the prefilled table. On each tr I have the id number of the record.
<tr id="11309742">
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr id="11309743">
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
Here is what I have so far:
$.each(table.fnGetData(), function (i, row) {
var id = $(this).attr("id");
$.get(myUrl, { id: id },
function (json) {
if (json.Sucess) {
// TODO remove from the page
}
}, "json");
});
var id = $(this).attr("id"); worked before I switched to the datatable plugin (and I know it won't work now). Everything I have seen is either setting the id or getting the index from a click in the row. How do I get that id attribute in a loop?
Instead of using .fnGetData(), I should have used .fnGetNodes().
$.each(table.fnGetNodes(), function (i, row) {
var id = $(this).attr("id");
$.get(myUrl, { id: id },
function (json) {
if (json.Sucess) {
//table.fnDeleteRow(i);
}
}, "json");
});
Now it works as expected.
This maybe simple, but cant seem to figure it out. Using jquery datatables how can I make each row clickable to just link to a normal page? So if someone moused over any of the row the whole row will hightlight and be clickable and link to whatever url I would want it to link to when clicked.
I've use the fnDrawCallback parameter of the jQuery Datatables plugin to make it work. Here is my solution :
fnDrawCallback: function () {
$('#datatable tbody tr').click(function () {
// get position of the selected row
var position = table.fnGetPosition(this)
// value of the first column (can be hidden)
var id = table.fnGetData(position)[0]
// redirect
document.location.href = '?q=node/6?id=' + id
})
}
Hope this will help.
This did it for me using the row callback.
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
responsiveHelper.createExpandIcon(nRow);
$(nRow).click(function() {
document.location.href = 'www.google.com';
});
},
$('#myTable').on( 'click', 'tbody tr', function () {
window.location.href = $(this).data('href');
});
where #myTable is the ID of the table, and you need put the href in the tr, like that:
<tr data-href="page.php?id=1">
<th>Student ID</th>
<th>Fullname</th>
<th>Email</th>
<th>Phone</th>
<th>Active</th>
</tr>
It's simple enough to do this with a vanilla <table>, but I don't see why this wouldn't work with a jQuery DataTables one either.
$('#myTableId').on('click', 'tbody > tr > td', function ()
{
// 'this' refers to the current <td>, if you need information out of it
window.open('http://example.com');
});
You'll probably want some hover event handling there as well, to give users visual feedback before they click a row.
You can also use the DataTables plugins api which allows you to create custom renderers.
Very cool: JS addon here
And using the fnDrawCallback
fnDrawCallback: function() {
this.rowlink();
},
You can do that to make row clickable :
<script type="text/javascript">
var oTable;
$(document).ready(function() {
oTable = $('#myTable').dataTable({
"ajax" : "getTable.json",
"fnInitComplete": function ( oSettings ) {
//On click in row, redirect to page Product of ID
$(oTable.fnGetNodes()).click( function () {
var iPos = oTable.fnGetPosition( this );
var aData = oSettings.aoData[ iPos ]._aData;
//redirect
document.location.href = "product?id=" + aData.id;
} );
},
"columns" : [ {
"data" : "id"
}, {
"data" : "date"
}, {
"data" : "status"
}]
});
});
</script>
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody>
</table>
I think it will be like that
$('#invoice-table').dataTable({
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var slug = $(nRow).data("slug");
$(nRow).attr("href", "/invoices/" + slug + "/");
$(nRow).css( 'cursor', 'pointer' );
$(nRow).click(function(){
window.location = $(this).attr('href');
return false;
});
}
});
And the table row like that
<tr class="invoice_row" data-slug="{{ invoice.slug }}">
<td>{{ invoice.ref }}</td>
<td>{{ invoice.campaign.name }}</td>
<td>{{ invoice.due_date|date:'d-m-Y' }}</td>
<td>{{ invoice.cost }}</td>
<td>
<span class="label label-danger">Suspended</span>
</td>
</tr>
This worked fine with me
**I have used a simple solution for this. Add onclick on tr and you are done. Tested with jquery datatable **
<tr onclick="link(<?php echo $id; ?>)">
function link(id){
location.href = '<?php echo $url ?>'+'/'+id;
}
Recently I had to deal with clicking a row in datatables.
$(document).ready(function() {
$("#datatable tbody tr").live( 'click',function() {
window.open('http://www.example.com');
} );
} );