I am working in AngularJS application with Spring rest as backend. I am pretty new to angularjs.
I have a UI page where i display some list of objects in table.There is an edit button against every record.When i click edit, another page opens which set the data accordingly.
The issue is, being on edit page, if I refresh the browser, I loss my data. One way I can think is to make another rest call but I want to avoid making any rest call.
Is there any way to retain data on the page on refresh or making rest call is better solution?
I would think the cleanest way to do it is to make a REST call, as the data could have changed on the server. However, if you want to avoid the call anyway, you may use localstorage. Just store the data in your table in localstore with key value pairs (assign some unique key to every row). You could use this plugin: Angular LocalStorage
Related
For testing purposes, I am trying to re-create the situation where a new user enters the website for the first time. So all existing data should be reset. I tried to use the id of the data I wanted to remove using data.remove(id) syntax in a ready() method but that did not seem to work. How can I clear out all data when the page is reloaded? Do I manually have to remove each data item using remove or removeAll or is there a simpler way to do sort of a clear browser history which will clear all data from previous sessions?
The easiest way would be to use removeAll. There's no equivalent of clearing browser history because multiple users may be able to read and write to the same document depending on your permissions scheme, so it's hard to define a general rule for what should be cleared.
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 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.
I'm looking to capture and save the state of a page (Django template + backend) after the user makes some modifications (through JQuery) to the appearance of the page. Now that I've gotten hold of the innerHTML using a JS variable, I need to send it over to the Django view that will do the saving. How do I call this Django view and pass it the JS variable?
P.S: First ever question on stackoverflow, please let me know if the question isn't clear or is improperly formatted.
Handiest way to get started is to first make a proper form and a django view that reacts to it ("request.post"). The form should have fields for whatever you're changing in the page.
Next up, submit that form's variables from your page with jquery.ajax.
So the idea is to isolate the various problems:
What should be the form parameters?
Get a view running that makes the actual changes.
Get the javascript working.
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.