Develop Reference

Retain Dynamically Added DOM Elements when logging out

I recently came across a feature that Salesforce Applications have, i.e. when we log out, the tabs opened during the session are preserved and are displayed again when we log back in at a later point of time.
I would like to implement something similar in my web application where I would like to retain the dynamically created DOM elements so that if I refresh the page or logout, those elements still are displayed unless the end user decides to delete/close/destroy those elements.
Has anyone implemented anything that sounds familiar? If yes, what would be the ideal way to go about it?
Appreciate the help!

I have a webapplication that holds users and adresses as well as various different values. I have implemented a review function as a helper if you go through your data on an infrequent basis. It marks each value as reviewed or not. As this feature is only a helper and a review flag or timestamp is not needed and implemented in the DB, I save an array of data as a JSON string locally using localstorage.
This is enough for my case. You could do the same for your datamodell. You can of course also save this data per user on a separate table in the db. Consider something like: id, userid, featurename, etc.. with this generic layout you can save the state for each feature of your app, be it a tab, a modal, a setting or whatever.
Of course, you need a (preferably JS) function that gets these settings and then can recreate the DOM elements or fetch them via AJAX. You need as well a function that sends an AJAX request to save the information that a feature/window/tab has been opened/closed/etc.
A lot of work for a "nice feature". Might not be a top priority on your bucketlist, but definitly enhances your user experience.

I refresh the page or logout, those elements still are displayed
unless the end user decides to delete/close/destroy those elements.
That can only be possible if before refresh/logout those dynamically created elements are stored.
That can be possible by either storing the value in database or using local/session storage.
Values of the dynamically generated elements can be stored in localStorage like
localStorage.set('someKeyName' ,'value of dynamically generated Elements in string format')
Then after refresh retrieve the values and create those elements and append it to dom

Check for changes in the data of a form without using javascript

I currently have the below javascript to detect changes in my form.
form.addEventListener("input", function () {
ChangesMade = true;
console.log("Change");
});
I now need to include whether or not a change has been made in a call to the controller which means that the value can no long be stored in javascript as this is client side.

You have a couple options...
1. Construct a view model with two instances of your model. One the "original" instance, one the "changed" instance. Bind the "original" fields to hidden inputs in your form, and bind the "changed" fields to your normal form elements.
Then, when the form is posted to the server, your controller action's input would have two instances to compare. If the "changed" values are different from the "original" values, then the user changed something.
Note however that users can still change hidden inputs if they want to. This is not a secure measure, but can be an effective one if "security" isn't a concern here.
2. Keep your view and controller interaction the same as it is, but when the data is posted to the controller you would use the identifier from that record to fetch the original from the database.
Using the posted model and the database-fetched model, compare the two. If values are different then the user changed something.
Note however that this doesn't cover race conditions. It's possible that another user changed the database values since this model was originally shown to this user. You can get around this by adding timestamps of when data was changed, but it might not be enough to tell you what data was changed unless you keep audit copies of old records. The complexity of that escalates quickly.
It's a trade-off between the two options of which one meets the actual needs of the system with acceptable drawbacks.

Send the form data to the server
On the server side load current data from the DB
Compare and test for changes

Save user selections for a web application using ajax

I am building a web application using ColdFusion and traditional web technologies (html, css and javascript).
I have 2 divs:
Div one contains a table that is updated through Ajax and pulls information from sql server (a list of documents that the user can select one by one).As the user is selecting rows, I want them to be shown in the 2nd div (so the user can see what has been selected).
When a user selects a row I pass the data for that selection to a javascript function that updates the 2nd div with ajax. Obviously with this approach I can only send information for a single row (the one selected).
My doubt is, how can I keep track of all the items selected so the 2nd div can show all of them and not the only one that is being selected? Should I use cookies to save them? What other option I may have? Below an image of the application
Application layout:
Thanks in advance for the help

You have multiple options to save data that it is accessible from your client side application, but it depends on your current architecture. A few that come to mind:
Use localStorage if you want to persist the values on the same browser. This will not communicate with the backend: localStorage.setItem('selectedItems', JSON.stringify(selectedItemsArray));
Use a global variable namespaced by your application. For example: window.myApp = {}; window.myApp.selectedItems = [...]
Use indexedDB , a database that lives in your Browser.
Because you are using the ColdFusion framework, you may be limited in the options. This answer describes how to add application scoped variables.

Best way to differentiate tabs with session id's in JS/HTML(and ruby)

I have some code that does a jQuery post to my API, does some magic, and then uses Pusher to push data back to the browser.
Currently I am using Sinatra, pulling the session id, and putting it in a hidden value on the html. And then when my JS function is triggered by my button push, it pulls this value, and passes it to the API. Then my code just remembers and sets this as the channel ID and pushes data back.
It works quite well...except if I have more than one browser open, both have the same session id. So triggering my API on one pushes data to all open instances I have. My question is: is there a "best practice" way to do this and differentiate between tabs?
I could of course just generate a random number with JS and use that as my value, but for some reason it just seems wrong. Thoughts?

How do I use cookies to store complex information and subsequently dynamically trigger an action based on the data?

I have a simple (yet somehow convoluted) issue. Basically I'm adding items to make my web app more "desktop-like". For instance, right now I'm trying to get a page to dynamically load info into a DIV based on previously selected items. I'm currently using a cookie to handle saving the data, but I can't for the life of me get my brain to work this problem out.
I have a scenario with the following relationships:
SITE has_many BUILDINGS
BUILDING has_many METERS
METER
All entities can have associated charts. So, in an effort to make it generic, I set up a "has_many" relationship for each to CHARTS and abstracted it like so.
SITE has_many CHARTS, as chartable
BUILDING has_many CHARTS, as chartable
METER has_many CHARTS, as chartable
Once the user selects an item from the menu on the left, I then use a method to determine what item needs charts found and I display the particular item's charts. That all works fine.
My issue now is working with cookies in order to either save data to independent keys (or perhaps Marshal objects) in order to dynamically reload the previously selected item's data whenever the page reloads. The ajax call requires several values in order for the "update" action to find the correct item and display it. I'm having trouble with whether to use Javascript directly, try to trigger an action, or use some kind of combination.
As I said, I'm sure the issue is rather simple or straightforward, but I'm just not seeing it. If this description is a bit vague, I do apologize. Feel free to ask for more info.
Best

When the user selects an item from the menu, save all the necessary information to re-select that item to a cookie. Bind a Javascript method to the page load and check the value of that cookie. If the information is there indicating that an item should be preselected, just call the same Javascript method that is called when the user selects a new item from the menu. If you're using JQuery, for example, you might do something like this to bind to the page load:
$(document).ready(function() { /* check cookie and do stuff */ }
Another thing you could do is pre-render that stuff in your RoR code if that cookie exists so you don't immediately execute an AJAX call on page load (since that is sometimes considered bad form due to the page load performance hit).

This is too big for storing in cookies, you should either:
Store an id cookie client-side and store the data on the server-side which can be accessed with a corresponding id cookie and valid authentication credentials.
Use HTML5 client-side storage such as localStorage or a local database.