I am using this code to edit data on table ,this is allowing me to edit data ,but I am not able to find that where and how should I store data locally on that form itself ,if i don't want to store it in database, I want to know what this "/somewhere" should be(url or some file or what).
<table id="mylist_remark"><tr>
<td class="editable" contenteditable="true">Something</td>
</tr></table>
$("#mylist_remark .editable").bind("blur", function(e) {
console.log($(e.target).text());
$.post("/somewhere", {remark: $(e.target).text(), candidate_id: $(e.target).nearest("tr").attr("id")}, function() { console.log("success"); });
});
... how should I store data locally on that form itself ,if i don't want to store it in database...
One solution would be to use localStorage to save the form elements locally.
If you felt like using jQuery, you could make the problem simple:
$("input").change(function(){
var input = $(this).val();
localStorage.setItem("input",input);
}
Then when the page loads, you set the val to the localStorage item:
var input = localStorage.getItem("input");
$("input").val(input)
More on localStorage, and even more on localStorage.
Related
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.
maybe someone have a Idea? I want to put this in a Cookie with a Save button is that possible?
<td id="dropzoneorg">File from Server</td>
<td id="dropzoneteil">File from Server</td>
<td id="dropzoneref">File from Server</td>
https://jsfiddle.net/michiffm/tvd4bs6v/4/
This is Working good ( i copy this code)
How can i save more Ids? dropzoneorg,dropzoneteil,dropzoneref....
He save now just a dropzoneorg
Just a basic/stupid example... That is so basic, I think you have to master and understand the basics.
//This part fetches the data from the inputs.
var dropzoneorg = $('#dropzoneorg').html();
var dropzoneteil = $('#dropzoneteil').html();
var dropzoneref = $('#dropzoneref').html();
//This part saves the data fetched to the localstorage, so that you can restore it later.
localStorage.setItem('dropzoneorg', dropzoneorg);
localStorage.setItem('dropzoneteil', dropzoneteil);
localStorage.setItem('dropzoneref', dropzoneref);
//If you want to restore the data from the localStorage to your application
dropzoneref = localStorage.getItem('dropzoneref');
//If you want to put that data back in your form:
$('#dropzoneref').html(dropzoneref);
I keep track of my comic book collection online using a mass amount of tables.
I color the table cells based on which ones I have vs. don't have.
I'm trying to make my life easier by adding some jQuery to my site that will allow me to simply "click" on the cell to change the color.
What I don't know how to do is make the change PERMANENT. It works fine an dandy (and I'm going to add more functionality to cycle through more colors), but when I refresh the page all the changes made to the page are lost.
Is there a way to make the changes permanent?? Adding a "save" button perhaps? Not sure how to achieve this.
Simple Example of what I'm doing:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
$('td').click(function() {
$(this).css('background-color', '#5f0');
});
});
</script>
<table>
<tr>
<td>#1</td>
<td>Comic Title</td>
<td>Collected Edition</td>
<td>Omnibus</td>
</tr>
</table>
You can do that using localstorage or server side storage.
When the user makes changes to the page, store the css properties with respect to an identifier for that field preferrably ID. In JSON format and stringify it before storing to the localstorage.
When the page refreshes or loads, In the onload event , check the localstorage if it has any data. If it's not null then retrieve the value using the key. let's say "personalization". Then use JSON.parse() to get the original JSON object.
Now loop through the json object and use the key as ID and the value as the css properties. To apply the changes.
Example:
var cssprop = { 'cellId' : { 'color': 'red'}}
If the above is the json you have constructed on click of the cells.
localStorage.setItem("personalize", JSON.stringify(cssprop));
now on window.onload()
$(function() {
// In case you are persisting data in the server, make ajax call to retrieve the data and then store it in localstorage.
if(localStorage.getItem("personalization") != null) {
var personalize= localStorage.getItem("personalization");
var cssprop = JSON.parse(personalize);
// you can iterage the object
// use $("#"+keyOfObject).css(// use value of object);
}
});
So I have a form through which I add entries to my database, I am trying to use the same form
to update/edit existing records in the database.
My page consists of a form to add data and a table which shows existing data.
the existing data table has a column edit against each entry, the table is filled dynamically using php.
This is what I am trying to to, when the user clicks on edit button against any row, the data in that row should be filled up into the form automatically.
I made a jsfiddle here
The JS script I have tried:
$("#tableID").on("click", ".edit_button", function() {
var data = $(this).closest("td").siblings().map(function() {
return $(this).text();
}).toArray();
console.log(data);
}); // the event is not recognized. no action on clicking.
There a quite a few techniques I found here stackoverflow, but most of them donot respond to click event or they return null/empty values, Is that because the form is filled dynamically?
I am pretty new to web development, Any help would be appreciated. Thanks!
Note: the database contains more than 20+ records (dynamically added), In Jsfiddle I have shown only 1, to keep the code clean. sorry for the lack of css styling :P
$("#tableID").on("click", ".edit_button", function() {
var data = $(this).closest("td").siblings().map(function() {
return $(this).text();
}).toArray();
console.log(data);
});
Use like this may be it is helpful
$("#tableID").click( function() {
var data = $(this).closest("td").siblings().map(function() {
return $(this).text();
}).toArray();
console.log(data);
});
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.