Periodic auto update "html-div" and database in django - javascript

I'm trying to develop a website using Django. I have a model, which has to be updated periodically and readback and update it in html.
I have implemented this by calling a function in my "views.py", which will update the database, later it will read the database and update in the html. So, whenever i reload my page, it executes a function which gets all the necessary data, update the database, read it and update in "html". I just added the line < meta http-equiv="refresh" content="10"/> to reload my page periodically in a interval of 10 seconds.
This is working proper, but it looks odd(when it is reloading). I know this shouldn't be the way it to be implemented. Much appreciated, If anyone can suggest a better way to update the database periodically and reload a part of the html.

Related

PHP MySQL : How to make an auto refresh data only when data changed on database

Usually I make content refresh automatically with the javascript function using setInterval.
But it seems ineffective because every second the content must be reloaded will take up a lot of resources.
Therefore if there is another alternative to creating an automatic refresh function only when the data has changed in the database.
One way to update your data would be to use Ajax in the frontend to request the data every few seconds and update it instead of reloading the page. Otherwise, you should check out socket.io (websockets)

Save jquery modified page permanently

I want to save modifications made on a HTML page(modifications made with JQuery), PERMANENTLY! I have read that this thing gets possible by sending an Ajax call and saving it in a table in a database, but what do you actually save in the database? The URL of the page? And what do you retrieve back in the Ajax call so that your modifications actually stay on the page?
This is a Spring MVC based web application, in case this information is needed.
I have no clue how to start or if to start trying saving it, because I have also read that this thing might not be possible, as we're talking about Client-Side modifications.
Modification that I am trying to make:
function versionOne() {
$('#title').addClass('text-center');
$('#title').css({"margin-top":"0px","color":"black", "font-size":"45px"});
$('#title').append('<hr>');
$('#content').addClass('col-md-6');
$('#content').css({"margin-top":"80px","font-size":"20px", "text-align":"center"});
$('#picture').addClass('col-md-6');
$('#picture').css({"border-radius":"25px", "margin-top":"50px"});
}
I'd be grateful for some suggestions!
Thanks :)
Saving the whole page won't work in most cases since it's very hard to also save the JavaScript state. So while you can save a static copy of the page without JavaScript with $('html').html(), that doesn't get you very far (or causes more trouble than it's worth).
What you want is "preferences". The site should remember some specific values. The usual approach is to load the preferences from the database before the server sends the page for the client. Apply them to the elements of the page and send the result to the browser. That way, the page looks as expected when the user sees it.
When the user changes these settings, use JavaScript to update the page and send the changes as AJAX requests to the server to persist them in the database.
When the user returns to the page, the code above will make sure that the page now looks as before.

PHP Mysql: Avoid overflow on pageviews?

So I have certain profile pages that needs to have page views. I stored the view data in mysql and php (actually laravel). Basic idea is to add view by 1 every time the profile is visited.
Basic idea is to add a php code in the profile page, like
$page->view += 1; $page->save();
But what if the user hits f5 several times? It will cause the query to run a lot and I fear it will eventually slow the app.
I was thinking of making a prompt with js when user hits f5 and an ajax call to add the view. But I was wondering if there is a better solution (like, how did youtube do their views)?
You can count the views after a certain amount of time on the page.
To achieve this, you will need a delayed javascript function like:
setTimeout(function(){countView()},3000); (3 second delay)
Where countView() should be an ajax call to a function that runs $page->view += 1; $page->save();
And since Ajax calls are asynchronous, the execution will not delay your application flow, although a simple increment on a page-view table should not do much harm in terms of performance
This will work as long as the user doesnt delete the cookies.
if ($_COOKIE['returning']!="yes")
{
// first visit!
}
setcookie("returning", "yes", time()+360000);
Another way would be to log the IP in a database and check if user already visited, but the code is more complex than i can post right now. I will edit the post later if accepted.

Updating a page when data changes

It has been a long time since I have worked with PhP or Javascript and I want to build a website that runs on a server with MYSql that can update the page when the data in the MYSQl table changes.
I am not sure how to do this, if anyone has any ideas I'd love a boost.
assuming this data is being gathered using an SQL SELECT statement,
move your statement and the way in which it displays the results into a different file.
then you can load the results from the query into a div using jquery .load
$("#someDiv").load("somefile.php");
If the data is not being updated from the page in which you want it auto refreshed, use setInterval
$(document).ready(function(){
setInterval(function(){
$("#someDiv").load("somefile.php");
}), 2000);
});
with 2000 meaning it will run every 2 seconds.
If you are updating the data and want the updated results shown without the need for a page refresh, use ajax and in its 'success' function call:
$("#someDiv").load("somefile.php");
You want a webpage to be notified of a change in the server. More specifically, you want the data in your page to be refreshed when the data in your database changes.
You have at least two options:
You write some javascript so that you browser periodically asks (polls) the server for changes via ajax (as another user has already explained). You could even consider long polling.
or...
You make use of websockets, which will allow your server to push the data to the client whenever the server wants.
You may want to take a look at the many posts in SO which discuss this matter.
Refresh content automatically if the database changes
Automatically refresh browser in response to file system changes?
How can I refresh a page when a database is updated?

Dealing with client side and server side using vb.net

The problem im having is that I have a table that when a user click on a button it adds a row to the table via javascript, which works fine. The problem is that if a user need to update other data the user click another button which refreshes the page and all rows the user created in the table are deleted. My question is what can I do to make the rows not to be deleted once the page is refreshed? I know some might think, just not refresh the page, but there is to much data that has to be displayed and a new query has to be generated to grab the data. Any help would be very much appreciated.
Thanks for all the comments. I thought I would edit my question b/c ppl are asking why dont you add it via server or via ajax. The reason is b/c I ran into a problem doing it that way on another application and I will explain the problem. When I add a row via server-side it worked great, but what I started to noticed it that some users would add up to 100 rows and it would get very slow and even time out, b/c every time a user would add a row, it would have to re-create all those rows everytime which caused it to timeout. That why I wanted to add rows via javascript(client-side) b/c you dont have to re-create all those rows everytime a user adds another row. If there is another way of handling this without slowing down the page or potentially timing out the page, please let me know. Its kinda driving me crazy!!! I have been an ASP programmer for years and kind of newer to .Net and it seems like there is no way around this
Use html5 localstorage to keep the value of your rows on the client, on every refresh recreate the rows from localstorage using javascript.
As a side note, unless you either have a LOT of rows or a lot of data in the rows, server side shouldn't be particularly slow and either case will make localstorage unusable.
Alternative, serverside store the data in a session variable, but do not return it as part of your main page, use ajax to retrieve it seperately client side and put it in your page (with paging if a lot of rows).
You need to make the server aware that you've added a column to the table. There are many ways to do this.
Each time you post-back to the server (because HTTP is stateless) it begins from the start, so it generates a fresh table for you.
To do this you need to execute some code on the server, the easiest way is to add the row on the server and not on the client as you currently are.
If you post how your table is being generated - we'll be able to point you in the right direction.
2 realistic methods here:
1) Don't reload the page. If you do a get from a script you can simply return json or xml and parse it within the javascript
2) Post to the server when you are adding a new row such that it is saved and can be used later when refreshing the page

Categories

Resources