I have a database that is updated with new rows almost every few seconds.
I have a table on my website that I would like to be automatically updated with the new rows added to the top without the user having to refresh the page.
I was testing the below:
$(document).ready(function(){
loadstation();
});
function loadstation(){
$("#data_download").load("/include/data_download.php");
setTimeout(loadstation, 1000);
}
This works however I am unable to select anything in the table as when the function refreshes the request is unselects everything. I am also met with another issue of scale and after some time on the page I receive an error on the browser about memory issues "SBOX_FATAL_MEMORY_EXCEEDED".
What would be the best approach to having this be scalable and with no memory issues.
Thanks in advance.
You could add a timestamp to your rows and only pull (and load) the extra rows happened since the last update.
Let's say you loaded the page at 00:01, then you pull and append (instead of load) the rows added since 00:01 and update the timestamp.
This would solve the issue deleting the selection, because it would add and load only the extra rows and not reload the full table on each update.
The best approach would be use AJAX. The server should only send data of the updated fields (JSON format preferable) and javascript should simply replace textContent of the needed field(s).
Related
I have data being inserted into various divs collected from the backend.
This data gets updated, what i need is for the divs to also automatically update the data within the divs without actually refreshing the whole page.
Right now a page refresh would update the divs but I want the divs to auto update without affecting users experience.
Any suggestions.
As an example, I have a vote up/down button in the frontend, the vote gets sent to the backend then sent back through to the front and inserted into a div, however they wouldnt see their vote registered in the frontend unless they refreshed the page, So I would need the users vote result to be updated in the front end everytime then make a vote or change a vote ect automatically.
This is just one example, there is more data inserted in this table which could be updated at any time.
Update,
Not sure people understand fully what I need or trying to do.
Basically have and object coming through from back-end, on page load, data from that object is inserted into a table such as new posts, votes ect.
What I need to be able to do is check if the object has changed since the page load and if so to then update the data on the page without refreshing the page.
Ideally need this to happen instantaneously, so it recognises as soon as there is a difference between the object data and that being displayed in the browser and updates it.
Hope that makes it more clear as to what I want to do.
I have and object with information such as the suggestiontitle, description, votestatus, etc, these get inserted into a row, when a new. A new row gets added when a new object with main object comes through.
So I need to be able to check for changes in the main object so that I can then add the new objects as rows into the table and also Detect and update any changes with current objects already inserted.
If I understood correctly, all you want is a way to interact with the backend without refreshing the page, correct? If that's the case, you should look into AJAX. Here's a simple way to use it for the voting system example(requires jQuery):
$.post(url_to_interact_with,{key: 1232,vote:1}, function(data){
console.log(data);
}
In this case you sent a post request with key=1232 and a vote of 1. The variable in the function (data) is the output of the request.
However, if this isn't such a simple matter for you, I would recommend looking into websockets. To summarize what they are: A back and forth interaction between backend and front end. The back end can send info at any time without refreshing the page. If websockets are too confusing, then use this: https://pusher.com/
But honestly, you shouldn't try to go for the approach of knowing all info of div in real time unless absolutely necessary. Good luck! :)
What I Understood is that you need to update the div whenever Vote is updated? If I understood correctly then I would like to go with delegate and call a function to the server once you get a response from Vote stuff call.
If you want to get an event from the server-side then I would suggest you go for SignalR, for real-time communication, which will give you an event called the server-side.
I am using the DataTables jQuery plugin with server side pagination to create a table with child rows where the user can change the data, the problem I have is when I move to another page without saving changes in the modified forms; the DataTables removes the rows and its child rows from the DOM, so I am not able to get later the updated rows to save the changes, also if I move back to the first page where the user modified the data, the child rows are re-created (as part of the createdRow event where I am creating the child rows) so the changes entered by the user are lost.
Is there any way to deal with this problem?
I don't have enough experience in working with DataTable, but I guess this plugin has something like "data is loaded" event. Before the page is reloaded, you can save your draft data in separate array/object (like draftData) and after data is loaded, you can merge information before page rendering.
I ended up creating my own logic since this is an expected behavior of the DataTables plugin.
When using server side with DataTables, the plugin doesn't have a way to identify or "remember" what rows are being modified, what rows are selected, etc. Because of each pagination request rebuild the table and re-create the rows.
I found somewhere that a valid approach was using a global variable to store all the changes (selected rows, updated data, etc) I am also using the createdRow event to restore the changes made by the user after creating each row.
Hi I'm writing a web app using rails and as part of it I am displaying data to the user using jQuery Bootgrid. As part of this the user is able to set the number of rows per page of the table. I'd like to be able to have this setting persist between page loads.
When a user chooses an option for the number of rows to display I am able to capture that and store in a model. However Bootgrid doesn't seem to have a simple way of programmatically setting the number of rows. This seems like a common thing to want to do so if anyone has come across this before and can give some help it would be greatly appropriated.
you can find a "setRowCount" implemented in
https://github.com/rstaib/jquery-bootgrid/issues/215 - jquery.bootgrid.modified.txt
Unfortunately the user didn't see fit to properly fork the repo.
Not my best code but it is working:
With jquery fire click event of number of rows that you want...
$("#grid-basic1-header .dropdown:visible [data-action='-1']").click();
Am using onLoad function of html page to fetch the data from server and to update the table rows with angularJS ng-repeat. Whenever I go to another html page and returns back, onload function is executing and it causes a delay. I need to return to the previous html page without refreshing the data.
You've got a couple of options -- the best one tends to be saving a flag inside of a window.sessionStorage and storing the data there as well.
Note that sessionStorage is unique to each window/tab and is temporary, unlike localStorage which is more long term.
You can even set a time/date stamp to determine how old the data can get before it is considered stale and needs refreshed.
This question has been asked before: Access <asp:table> table rows added by javascript in asp.net webform . Apologies for the duplicate question but I'd really like an explanation why this is the case. It is probably due to my lack of understanding on how browsers process HTML tables on submission to the server.
If I have a <HTML> table or an <asp:table> control on an aspx page and I add rows to it client-side using JQuery / Javascript, why can I not include these added rows in a post-back to the server?
I've been trying to get this to work and it looks like I can't do it based on the answer to the previous question. But can someone explain why this is the case? The table itself can be returned in the post-back but the only rows present are the rows that were part of the table when it was sent to the browser originally - it does not include the rows added by the browser.
I would have thought there was a way to include these new rows in the post-back, the same as any client-side user input?
You could do something like this:
// Get the data from your table into an array
var tableData = [];
$("table tr.some-class").each(function () {
var row = [];
$(this).find("td").each(function () {
row.push(this.innerHTML);
});
tableData.push(row);
});
// Make your form
var form = $("<form>").attr("action", "some/path/on/server")
.attr("method", "post");
// Make a form field with your tableData (JSON serialized in this case)
var tableInput = $("<input>").attr("type", "hidden")
.attr("value", JSON.stringify(tableData));
// Some browsers require the form to be in the dom before it'll submit.
$(document.body).append(form);
// Add the field to the form and submit
form.append(tableInput).submit();
This is a basic implementation of this answer.
When performing a POST operation to the server, only the values included withing the <form> element being posted will be included. These are serialized as Key/Value pairs and can be inspected using tools like FireBug and the Chrome Developer Tools.
Regular HTML elements are not sent back to the server. What I mean is that things like <div> or <table> elements don't go back to the server, only the values of the form.
Unfortunately ASP.Net hides a lot of these details from you. It is magic! That is both a good and a bad thing. It makes it easy to work blissfully ignorant of the nitty gritty details of how HTTP works under the hood, but can be a source of pain when you really need to know those details.
You could always simulate with AJAX by putting the table and the button in an update panel, and appending rows in the button click event.
To the client, there is no difference between asp:table and table. They are one and the same. To really answer the question, we have to think about what is going on server-side, as that is where the difference between an asp:table and a table lies.
When you create an asp:table, you are likely binding with some data. The only way the server thinks the table will change is if the data changes. So that is where you need to look to get your table changing, change how it binds. If you change your table client-side, you need to mirror those changes server-side. I'm not sure how your data and table are set up, but there are many ways this can be done.
At the simplest, you may "postback" the new rows in an element, and when you process the asp:table server-side, check for the data that would be posted back and add the appropriate rows.
Alternately, if you are in a position to change the data which binds the table, you could do that as well.