I have this html data-table where each table cell is editable. I can edit the cell value and it is saved temporary. But when I update the page it is lost. So I tried to save the html instance in excel file so that I can see the updated cell in future.
Below function shows me the edited value in console
$(document).ready(function() {
var table = $('#example').DataTable();
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
function myCallbackFunction(updatedCell, updatedRow, oldValue) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The old value for that cell was: " + oldValue);
console.log("The values for each cell in that row are: " + updatedRow.data());
updatedCell.data();
updatedRow.data();
table.draw();
}
});
And This is my Ajax for calling python function:
$("#sa").click(function() {
$.ajax({
url: '/save',
type: 'POST',
success: function(response) {
alert('ok')
}
})
});
And Basically my python function takes a takes the source code of page and save it in excel. But the thing is my table is getting edited but the script is saving the old values. When I it using chromes inspect element I can see the updates value but when I see it using View page source I see the old values.
Can anybody tell how can I take the updated html page source and send it using ajax
The main difference between page sourceand inspect element is:
Page Source shows what server initially responded, that is the actual sent HTML from the server.
Inspect Element is showing the current state of the DOM after JS manipulation.
DOM is generated using the entire initial page's source/HTML.
That's why your page source will always be the same.
What you can do is post the html content of document in your ajax to get the latest page source.
The following should help you in getting updated DOM source as string:
document.documentElement.innerHTML
Though not sure why you need to post source as you can only post updated values and update database accordingly.
Look into DataTables State saving, it's an option in the plugin [stateSave: true] which uses localstorage and sessionStorage to retain the state of your table.
Example:
$(document).ready(function() {
$('#example').DataTable( {
stateSave: true
} );
} );
Since the state is saved, you can simply retrieve the data everytime you reload the page.
Related
I have an html table with id:#mytable in my asp.net-4.5 webpage, which is created in the c# site and sending to the aspx. In this Html table, at the end of each row there is a DELETE button like below:
...
html.Append("<td><input type=\"button\" runat=\"server\" value=\"Delete\" onclick=\"deleteRow(this)\" /></td>");
When this button is clicked, deleteRow(this) function is triggered with the code below:
btn.parentNode.parentNode.parentNode.removeChild(row);
When this line above runs, the regarding row is being immediately deleted and I do not see the row in the screen anymore.
This html table is represented as a datatable (javascript) like below:
$('#myTable').on('error.dt', function (e, settings, techNote, message) {
console.log('An error has been reported by DataTables: ', message);
}).DataTable({ fixedColumns: true,
"columnDefs": [{
"width": '60%',
"defaultContent": "-",
"targets": "_all"
}]
});;
This is also working well, my html table turns into a datatable. My problem is, after I delete a row from the table, if I change the sorting, or entry limit per page (10 by default) etc., I start to see the row I have just removed on the page, inside the table. It seems like my deleteRow function deletes the row not permanently. How can I fix this issue? Any help will be so appreciated.
EDIT: I needed to refresh the page after delete button click with JS: document.location.reload(true) and page_load re-reads the data, to fix the issue. Thanks #NTR and #J E Carter II
EDIT2: Using $('#myTable').DataTable().rows(row).remove().draw(false); while removing the row fixed the issue without the need of re-read data from DB. Check my answer.
As #NTR and #J E Carter II stated, re-reading the data solves the issue perfectly. However my main purpose here is not to re-read the data from the DB, I was looking for a solution providing that and found something. All I did is to change the row btn.parentNode.parentNode.parentNode.removeChild(row); into $('#myTable').DataTable().rows(row).remove().draw(false); and it works perfectly, after the table is refreshed the removed data is not seen on the screen. Here is the complete ajax function:
var row = btn.parentNode.parentNode;
$.ajax({
type: 'POST',
url: 'DataManagementPage.aspx/DeleteRowFromMyDatabase',
data: JSON.stringify({ id: id, grId:grID, city: city }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg)
{
$('#myTable').DataTable().rows(row).remove().draw(false);
}
});
The topic #NTR provided also offers a solution in server side: Deleting specific rows from DataTable
EDIT: Please note that DeleteRowFromMyDatabase returns true after the removal in DB.
Javascript is a client side technology it does not have the ability to communicate with a database. Your table is generated from the database with your server side .NET code. To accomplish what you want, you need to also delete the row in your database. To communicate with your server side code, you can use AJAX : AJAX introduction. AJAX is a big subject, you might have to do additional research.
So, in your deleteRow function you will have to delete the row client side like you are doing now and then, using ajax, delete the row server side.
Hope it helps !
You will have to reinitialize the data table with a fresh ajax call or mutated object. Your removal code is only taking out the rendered row, not the data that drives it, so when you call a redraw with sort, it is correctly rendering the state of the model, regardless of what mutations have occurred in the DOM.
I know you say you don't want to reread the data, but that is the correct thing to do. The remote data is the source of truth for your rendered datatable.
I am reading data from google spreadsheet from multiple sheets and displaying the retrieved data in the tabular format. I am creating table rows having data in an ajax call once data is retrieved i.e.
$tbody.append('<tr><td>'+rows[i][6]+'</td>'+'<td>'+rows[i][0]+'</td><td>'+rows[i][1]+'</td><td>'+rows[i][2]+'</td><td>'+rows[i][3]+'</td><td>'+rows[i][4]+'</td><td>'+rows[i][5]+'</td><td><a id="UpdateLink" href="#">Update</a></tr>');
On the very first run the data appears fine but when I happen to have data from another sheet I see no paging is applied and when I click any header column to perform the sort It displays data from the first sheet.
Upon google It was suggested to use destroy attribute for datatable i.e.
$("#spreadsheetdata).DataTable({
destroy:true
});
but behavior remains the same.
I have also applied
if ( $.fn.dataTable.isDataTable( '#spreadsheetdata' ) ) {
//dataTableInstance = $('#spreadsheetdata').DataTable();
}
else {
dataTableInstance = $('#spreadsheetdata').DataTable( {
paging:true,
ordering:true,
info:true
});
}
but no desirable results.
please guide thanks.
Rather adding the rows with the jQuery append method, you'll need to use the DataTables row.add() method.
If dataTableInstance is the variable you're assigning to your table and rows is the array of data from your Google spreadsheet, this syntax should allow you to append new rows to an existing table:
dataTableInstance.row.add([
rows[i][6],
rows[i][0],
rows[i][1],
rows[i][2],
rows[i][3],
rows[i][4],
rows[i][5],
'<a id="UpdateLink" href="#">Update</a>'
]).draw();
The reason appending the new rows with jQuery doesn't work is that DataTables maintains its own client-side state -- see search(), order(), and page() for examples.
So, if you add rows directly to the table body, they'll disappear as soon as you sort, search, etc.
I am designing a website that shows the availability of a resource using either a green or red colour indicator based upon the availability field of a connected MySQL database table.
The item I am looking to alter is a span element:
<span class="equipment" data-id="1" data-available="1" data-location="0-0"></span>
This is being parsed by JQuery for the data attributes for availability and location, and compared to a MySQL database with AJAX post to note changes in availability which should be propagated to the webpage, changing the colour of the indicator as per the below CSS.
.equipment[data-available='1'] {
background-color: rgb(0,226,0); //green
}
.equipment[data-available='0'] {
background-color: rgb(226,0,0); //red
}
The AJAX request, seen below, recognizes changes from the database and returns from the php file successfully, returning just the new availability (0 or 1). If I console.log() the php post URL, the value returned by equipment_span.data("available") and stored in old_avail appears to have updated to the new value desired after a database change occurs. However, the changes to this aren't reflected in a colour change to the indicator.
function update_avail() {
$('.equipment').each( function () {
var equipment_span = $(this);
var old_avail = equipment_span.data("available");
var loc = equipment_span.data("location");
$.post('avail.php?a='+old_avail+'&l='+loc, function(new_avail) {
if(new_avail != old_avail) {
equipment_span.data("available", new_avail);
}
})
})
}
If anyone could offer any pointers as to what is going wrong, that would be great as this has been annoying me for hours at this stage.
It is because of this line:
equipment_span.data("available", new_avail);
When jquery manages the data attributes it does so in memory and not "on the page", so if you inspect the page it will show data-available="whatever it was on page load"
You need to do:
equipment_span.attr("data-available", new_avail);
This is my table:
<tr class=stuff>
<td id=id></td>
<td id=city_id></td>
<td id=temp></td>
<td id=date></td>
</tr>
This is my Javascript:
<script>
$(document).ready(function() { // waits when document is ready
$('.data').change(function() { // when dropbox value changes do this
getWeather(); // here I tried inserting table clearing code
});
});
function getWeather() {
$.getJSON('getTemperature/' + $('.data option:selected').val(), null, function(data) { // JSON request
$("#id").text(data.id); // changes fields accordingly
$("#city_id").text(data.city_id);
$("#temp").text(data.temperature);
$("#date").text(data.date);
});
}
</script>
Every item in dropdown menu does not have response from server, so I want it to clear the table just before making a new JSON request. So when JSON comes back with data, data is updated accordingly, but when JSON comes back with nothing, then all the tables will be empty.
At the moment when JSON retrieves no data, the old data still remains in the table.
I tried using $('.stuff').remove() and $('.stuff').clean() , but after using them right before getWeather(); then later I wasn't able to put info into table which I received from JSON. It just did not work anymore.
Feel free to ask any questions.
Try this
$('.stuff td').text("");
getWeather();
Depending how much of this sort of thing you will be doing on your site you might want to look into KnockoutJS, it is designed for dynamic displays with changing data, including auto hiding sections.
Forgive me if this is already 'somewhere' on StackOverflow, but I don't 100% know exactly what it would come under...
I'm trying to retrieve information from a WebService, store this in an array, and then for each <select> within my ASP.Net Datalist, populate it with the array AND have binding attached to an OnChange event.
In other words, I have an array which contains "Yes, No, Maybe"
I've an ASP.Net Datalist with ten items, therefore I'd have 10 <Select>s each one having "Yes, No, Maybe" as a selectable item.
When the user changes one of those <Select>s, an event is fired for me to write back to the database.
I know I can use the [ID=^ but don't know how to:
a) Get the page to populate the <Select> as it's created with the array
b) Assign a Change function per <Select> so I can write back (the writing back I can do easy, it's just binding the event).
Any thoughts on this?
I have built a simple example that demonstrates, I think, what you are attempting to accomplish. I don't have an ASP.Net server for building examples, so I have instead used Yahoo's YQL to simulate the remote datasource you would be getting from your server.
Example page => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource.html
Example steps:
query datasource to get array of select questions
build HTML of selects
append HTML to page
attach change event listener to selects
on select value change submit value
Example jQuery:
// get list of questions
$.ajax({
url: url,
dataType: "jsonp",
success: function(data) {
// build string of HTML of selects to append to page
var selectHtml = "";
$(data.query.results.p).each(function(index, element) {
selectHtml += '<select class="auto" name="question'+index+'"><option value="Yes">Yes</option><option value="No">No</option><option value="Maybe">Maybe</option></select> '+element+'<br/>';
});
// append HTML to page
$(document.body).append(selectHtml);
// bind change event to submit data
$("select.auto").change(function() {
var name = $(this).attr("name");
var val = $(this).val();
// replace the following with real submit code
$(document.body).append("<p>Submitting "+name+" with value of "+val+"</p>");
});
}
});
Example datasource => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource-datasource.html
Example loaded:
Example select value changed: