Develop Reference

Live updating table with mySQL data

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).

Update part of page automatically when the data from an object changes without reloading the page

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.

Saving the Dynamically Changed HTML

I have done some changes in HTML page dynamically by using jQuery. And if I reload the same HTML it will gets to its initial state. But i don't want that to happen. Is there any way to get it done or save the changes made using jQuery?
Thank you.

If you wish to make changes to a file using jQuery and load it back on the reload you need to use a database in order to save those changes. You can use AJAX or even pure JavaScript to transfer those changes from your form to the database.
And once the changes are saved you can use a combination of PHP, MySQL query and JavaScript or AJAX to dynamically load the changes from the database on to your HTML page or if you want to make it more simple then just use a JavaScript function on page reload to fire a PHP code which will check for changes and if there is any, those will be loaded on to your page.
HTML5 local storage is a temporary solution this will also get retested once you close your browser or clean the browsing data.

You would need to get the innerHTML string and save it to the database or via HTML5 localStorage.
Then onload, all you have to do is check for an existing page state and then insert that as an innerHTML to your parent container:
if(savedState){
myParentContainer.innerHTML = savedState;
}
Where savedState is the variable that holds your html code.
To save the state, you would need to design a save function that would fire every time changes are made or when the user clicks on a save button. As I have said, you can save via HTML5 LocalStorage or via a database. Be wary that HTML5 LocalStorage is very small and can only accommodate several megabytes.

You must need to save your HTML after made changes using Jquery. you could save it by ajax call and save into database. so when you reload page HTML fetches from database so it would work.

Apex - Clear form when leaving page (also on redirect)

Currently, if I populate a form and leave the page, the form entries will still be present when I return to the form. Is it possible to prevent these entries from being saved?
The items' default values are populated using PS/SQL, but the content can be adjusted.
I tried creating a dynamic action to clear the items on 'Page Unload', but this didn't do anything. Is this the correct browser event, or did I simply get the implementation wrong?
Update: To provide a bit of context...
Pages:
Home
Form
DML Form (insert) - I want any modifications to not be stored
Page 3 can be accessed via Page 1 or Page 2.
If the user accesses the form via Page 2 (a different form), they will have selected a specific value and this is used to populate default values on Page 3 (via item and PL/SQL Function Body).
If the user accesses the form via Page 1, the same PL/SQL will run - this may result in Page 3 form items being empty (NULL default values).
HOWEVER, when the user edits Page 3 items (changing from default values), these values will persist when the user next accesses the form. How can I prevent this state from being captured?

You will need to clear the cache of the page. This will clear the session state of the items on the page and thus result in items being empty once again.
You may need to add this clear on several locations. If you have used column links to access the page, buttons with redirects, branches, etc. The apex URL has a part which states which pages have to be cleared, and you can generally define this clearing of a page cache declaratively.
You can also create processes where you can define which page (or pages) has to be cleared. For example, if you always want the cache to be cleared when entering the page, no matter where you came from, you could add a process on the page doing just that.
Session state is ultimately what is causing this behavior: go to the page, change some things, page gets submitted for whatever reason and causes session state to be saved.
Usually, on DML forms generated through the wizard, the cache would only be cleared when using the "create" button coming from another location (usually the overlying report).
Here is the (apex 5.0) documentation on session state and managing it.

You can do it with something like this, but first you need to add jQuery to your page. I recommend using a content delivery network (CDN). You can edit the code to clear the value in your type of forms. I hope this could help you!
jQuery CDN example
$(document).ready(function() {
$("body")
.find("input").val("")
.end()
.find("select").val("-")
.end()
.find("textarea").val("");
};
});

reload page I lose all values in form

I have made a web form that has some fields that are manually entered, others that are a dropdown, and some calendar fields that are in javascript. My latest addition has a dropdown that is populated from a selected value of a previous dropdown. When it reloads the form, I lose all of the previously entered values and only retains the value to the one dropdown. Do I have to capture all the values, or is there a way to just populate the 2nd dropdown without reloading the form?

-.- one word. AJAX. use it.
any time you reload a form you will lose all unrecorded data period.
If you must reload the page save all the data in a cookie or something.

There's a way to save data without ajax and whithout sending anything to the server. It's called sessionStorage.
// store item
localStorage.setItem("index", "value");
// retrieve item
var data = localStorage.getItem("index");
So you just have to save the datas with sessionStorage after any action (click on a button, keydown, mouseleave…) and whe you reload the page, you just have to populate it again from the data you have stored in session!

I assume that by reloading the form you mean submitting it, which then returns a version of the page with the second dropdown populated according to the submitted first dropdown. If that's the case, you might consider having all possible values of the second dropdown hidden and then populating it with JavaScript after a selection in the first one is made. If the amount of possible values is very big or has to be computed server side (as in, you cannot know all the values initially) then you could use AJAX to submit the form and avoid reloading of the entire page.

Check your page's cache-control. This attribute tells the browser to rely on its own cache to reload pages.
This can be set as a meta tag. For example:
<meta http-equiv="Cache-control" content="public">
But a better approach (in my opinion) is through the server-side, using the header()function.
Note that some prefer to set it to no-cache when it comes to forms, in order to avoid spam and also for security reasons.