I'm working on a Django project that runs a background task every time a form is submitted. It takes roughly 2sec to complete each task, when completed, the results are saved, ajax is supposed to perform page refresh but not the whole page, and what I have so far is:
$.ajax({
success: function(){
setInterval('location.reload()', 10000);
}
})
It works as intended, but it's wrong. I have rather limited experience with js. However, I'd like to refresh only the newly added row(s) in the table. I came across jquery .load() but I've been staring for a while now, please any help?
EDIT:
So js/ajax is just responsible for page refresh on a specific row like so
id
name
date
log
status
1.
task1
today
pending...
pending...
Each row has a corresponding table in the database, on task completion log and status are no longer pending but updated with DB objects.
Django handles form validation and submission on another page which gets redirected to this one with the tabular result, the user waits for a few sec and boom, ajax drops the magic.
Related
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).
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 developing a website that has a receptionist page and a user page with multiple user logins. The logged in users are displayed in a table at the receptionist page and one of the columns of the table is the status of the user ( ready or busy). The table is refreshed using ajax every 5 seconds to prevent the web page from refreshing. Each user can log in ( with thier own page) and change their status( ready to busy or busy to ready).
The table is stored in a sql database.
The user page has the option to change the state of the logged in user from ready to busy ( or vice verse) with a drop down menu and a submit button. What i need is to also send and alert or sound to the receptionist page whenever any user switches to the ready state.
I have looked all over the internet but none of the answers have worked for me.
Thanks for your replies. I understand that I could use ajax to query the database to see if a user is ready, however that will cause it to make a notification every time it checks. What i need is for the receptionist to be notified only 1 time each time that a user sets status to ready. I was thinking of making another table that gets updated every time a user changes their status to ready and time stamp it. So that if there is a change in the time stamp it means that some one newly updated it so the signal should be sent.
I made the table and made a php page that returns a string with the time stamp of the table but i dont know how to use the returned string in java script.
I figured it out. I made an SQL table with a time stamp, whenever any user sets their status to ready the time stamp gets updated. I made a java script that reads the time stamp every few seconds. If the time stamp is different than the initial time stamp then a sound is played.
#O.Rases gave you the best solution.I did something like this in past using ajax and php.
A solution can be the following.
1 Every 10s, sent a Ajax call to the server.
2 In the server, using php, you can select users that changed their status in the last 11s (+1s for time-consuming script in the server).
3 after selection is done, sent the user back to the receptionist page.
hope it helps
i am creating a table with pagination using datatables. i have big data called using ajax. The ajax call returning 10 data at once. when first call, it takes first 10 data from ajax call. then when click next page it will take another 10 data. As i know, datatables collect all data and do it own pagination. How can i solve my problem. Example if ajax returning 100 data from backend, how will the datatables know 10 pages it need to generate. and the data will only call when we click next.
Thanks in advance.
You can either:
Retrieve 100 data records from your back end at once, calculate the number of pages needed in javascript and display 10 first records. When the next page button is clicked, your display the next 10 records, and so on.
Retrieve the first 10 data records from your back end along with the offset of the last record. Display your records to users. When the next page button is clicked, call another ajax to retrieve the next 10 data records (that should be easy since you got the offset of the last record), and display them again.
This is the general idea on how to solve your problem. Hope it helps!
I am creating an application which has a slide in and slide out window. This slide in and slide out window has a form which the user needs to fill. On click of the 'Save' button the POST request is fired. Everything goes well till here. But the second time when the user tries to post, there are 2 POST requests sent over network, the first request has the older data and the 2nd request carries the new data. Third time, when the user fills the form, 3 POST requests are sent.
I am using backbone to create this application, I tried cleaning up the views before sending the data, but that didn't work, can someone suggest me where am I going wrong?
Check your events and make sure that you don't have a submit event and a click event.
Also, if you are rendering the view several times, you might end up with several events attached to one button.
It would be helpful if you had some code so we could actually see what is going on. As #fbynite noted, you might also check your event bindings.