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
Related
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?
I have been using JQuery and AngularJS. One requirement I had was to show/hide divs and other widgets based on the login user role. I implemented the solution as below:-
On page load, get role of logged in user and store as a global variable in javascript
Show complete page
Hide divs using simple if statements based on security role
Is this the best way? Isn't there some framework or library for this? Doesn't AngularJS have anything to help?
Btw I understand that server side security is a must in spite of controlling what widgets login user can see in browser.
You could look at something like Angular Schema Forms. This takes a JSON object and will render it out using templates as HTML.
Another approach would be to use a template for each widget and then check the role before retrieving the template. If the template isn't retrieved then your custom tags will remain empty and have no content.
if isAuthorized
get template
else
do nothing or remove the element (your call)
The benefit of the first is that your markup is generated from server side data and thus has the extra benefit of being more secure. The second will work as well however.
Do note that you can change ANYTHING in javascript including global variable and javascript code in client side, so your server CANNOT TRUST THE CLIENT.
It's fine if you want to show/hide div based on the global variable, but your server should NEVER use that global variable to determine user permission. And for the div's that are hidden, you should NOT populate them with data from DB, so even when client change the CSS, they can't see data that is not permitted. Not to mention they can always inspect the network to see what is inside the JSON returned.
Usually you don't need to store as global variable, though. If your user does proper authentication, you should verify his identity for every transaction (every ajax request) and return only relevant content. In Angular view you can do ng-if when data exists only.
Is there any way to access the autocomplete suggestions that appear under HTML input fields in some browsers (representing previously submitted data)? Is this only available to the browser?
I ask as I want to make my own autocomplete implementation in javascript, but I want to intermingle my own suggestions with the users previous searches. A bit like how youtube does (but youtube stores all the data obviously, and it is tied to a login, there are no accounts on my website and never will be).
I was wondering more if there was a way to do it with the data stored in the users browser rather than storing all the data on my server. Is there is a way to grab the data the browser uses to present previous input to a user?
Is the data that appears in html input fields representing previously submitted data only available to the browser?
Yes - until it appears in the DOM.
Is there is a way to grab the data the browser uses to present previous input to a user?
It's a browser-specific feature, and you can't access the data [history] directly (Where do browsers save/store auto fill data). You only can disable storing anything.
I ask as I want to make my own autocomplete implementation in javascript, but I want to intermingle my own suggestions with the users previous searches. I was wondering more if there was a way to do it with the data stored in the users browser rather than storing all the data on my server.
Especially if you want to utilize all previous searches, the browser's autofill doesn't help you anyway. But yes, you can store them in the browser (on the client side) manually: Use DOM Storage, like localStorage. Though I would recommend sessionStorage only, you might run into privacy issues otherwise if everybody using a browser could see the search terms of previous users…
You can use jstorage. Jstorage lets you store up to 5Mb of data on the client side.
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
<script>
/* $.jStorage is now available */
// store some data
$.jStorage.set('yourkey', 'whatever value');
// get the data back
value = $.jStorage.get('yourkey');
</script>
The only way i see this working is with help of localStorage (html5) problem that it doesn't work in ie<8
Here's an example: http://jsfiddle.net/8NZY7/
So I have this webpage that I'm making which allows people to create elements on the page on the fly. And I want to be able to save those elements to my server and whenever someone else reloads that page, the webpage will have those saved elements.
I'm not a good web programmer by any means, so take it easy with the web jargon xD
The user created elements are nested 's or lists. Those elements can be deleted at anytime as well.
So I was reading about saving them as JSON but how would I go about doing that as my 's, most of the top level ones will have the same class. Never worked with JSON before, so I'm a real noob at that.
Will the server file keep replacing itself with a brand new copy with each addition/deletion?
And I'd like to get a little help with showing the new elements without updating. On other users page. I read about AJAX real-time updating, like APE, but have no idea how to go about with that. (This is not really needed but would be a nice one to have)
If someone can guide me a little at least, that will be great. Thanks.
The best suitable way to accomplish this is by saving your objects attributes to a database, however other options include XML files etc..
The process of accomplishing it through database is:
If you want to save data to database then you will have to use a server side language like Php or Asp.net, so first step will be to have a database then an active connection to your database on your intermediate file (lets say 'data.php')
Then you need to code your data.php file so that it can take input(usually through GET or POST method) and it can save it to your database
Then you need to pass your data (objects attributes) through AJAX to data.php and save them to your database
On the main file you will have to check whether already some data exists for user, if yes then fetch it from database and display objects accordingly, otherwise set the objects preferences to default
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.