This problem is similar to Angular uiRouter open state in new window or tab with stateParams, but the only answer does not seem to work.
I'm displaying a grid where users can select up to 1000 rows. There's a print button which is supposed to open a new tab in the browser with these rows in a printable format.
In my controller, I'm setting these rows (articles) in a service, then I open the new window:
articlesService.setArticles(selected);
$window.open($state.href('newwindow', {}, {absolute: true}), '_blank');
This does open the new tab, however, the data in my service is lost. I'm really supposed to use a new tab. I was thinking about storing the data in a cookie, but as I could have more than 1000 rows, that's not really an option. I'm also not passing anything in the url, as the user can select whatever he wants.
Is there any way to achieve this functionality?
You need to store data using ngStorage:
http://ngmodules.org/modules/ngStorage
This module enables you to store data in the browser and use it from different tabs and even across sessions; it provides access to the browser's Local Storage in proper Angular fashion. Local storage is a persistent (key, value) tuple storage mechanism.
Related
I'm trying to replace history.push to window.open (to of course open in a new tab). I tried to use query params to access my state's data to be fetched in the new tab.
window.open(`/${db}/endpoint?var1=${link.var1}&var2=${link.var2}`)
Anyone has a tip for this problem? Thank you!
If you use window.open then the script will be loaded from scratch in a new tab (will not be connected to the previous tab in anyway), so either you have to load data from local storage if you want to share some data between sessions or tabs.
I'm using a localStorage to store some stuff ( profile visits history ).
Every time profile is open, i get object, add more entries and update object.
This can lead to data loss (example: tab1:open, tab2:open, tab1:save, tab2:save).
Now, if I hold cntrl and open many new tabs at once, how to pervent data loss?
Didn't find anyhing about localStorage locking.
You can increment a variable instead of getting a whole new object, or push that new object into an array and calculate the total views getting the length of that array. The localStorage is shared across the different tabs as long as they are in the same domain.
Option 1.
Check and put a variable (e.g. editing) to localStorage when a tab is opened. So if another tab is open, you can create a warning on new tab. Clear that variable onPageUnload event. (Pessimistic Lock)
Option 2.
Update/put a variable (e.g. saveTime or saveCount) on save action. When a tab is opening, retrieve this variable and on save action check if the variable is remaning the same. If value is not the same, warn the user that he/she is editing an oldest version of the data. (Optimistic Lock)
Optimistic Lock vs Pessimistic Lock
I work on an admin-side database and we want the admin to open clients' account. Since we use session variables, we want to restrain the admin to one client account at a time.
So here's the plan, when selecting a first client, the client-side page loads in a new tab. If the admin selects a new client, the new tab reloads for this client.
For now, I tried using a global variable named clientWindow and when a client is selected, I do
clientWindow = window.open('site.html?playerid='+playerid, '_blank');
clientWindow.focus();
But it still opens a new tab. Perhaps I'd need a name to put instead of _blank!
Thanks for you help.
Give the window an actual name, rather than _blank. Then it becomes part of the DOM, and you can access it directly. Including refreshing it
With HTML5 and local storage, can JavaScript be used to save the state of a web page?
For example, some sites have increase font size buttons that are most likely controlled with JS. How can the property be saved so that on a refresh the size stays the same? Or is this done without JS?
Your best bet is probably to use localStorage, unless you do not want the settings to persist upon new sessions (you would use sessionStorage in that case). If you have multiple settings, you can store a serialized representation of your settings.
E.g.
var settings = {
fontSize: '11px',
otherConfig: 'test'
};
localStorage.setItem('settings', JSON.stringify(settings));
//then you can retrieve it
settings = JSON.parse(localStorage.getItem('settings'));
console.log(settings.fontSize); //11px
Note that if you want the settings to persist when users connects from multiple computers, you will have to use some server-side support.
Yes, it is done with Javascript. You can use
Cookies
Sessionstorage
This is a global object (sessionStorage) that maintains a storage area that's available for the duration of the page session. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated.
Localstorage
localStorage is the same as sessionStorage with same same-origin rules applied but it is persistent.
The better/easier ones are sessionStorage and localStorage. The problem is that they aren't supported by old browsers.
Instead, dealing with cookies can be a nightmare, but they work on old browsers too.
Yes can save state to localStorage.
assume you have an object :
var settingsObj={
pageClass:'bigFont',
widgetSortOrder : [1,5,3,7]
}
You could save that whole object to one local storage key by stringifying the object. When page loads you would see if that key exists in localStorage and have your javascript do whatever it neds to with those settings
To stringify and store:
localStorage.setItem('mySettings', JSON.stringify(settingsObj) );
To retrieve from storage and convert to js object
var settings=JSON.parse(localStorage.getItem('mySettings'));
I am opening a window and passing set of parameters to it. In this case, I am sending json string. At time, the info is toolarge, and Request-URI Too Large occurs.
window.open('../pssops21/php/createPhonePdf.php?strSelectedItems='
+ strSelectedItems + '&strQBNumbers=' + arrQBNumbers, 'mywindow',
'resizable=1, scrollbars=1, left=80,top=60, width=650, min-height=400')
Window.open does not have option to post. Jquery ajax only posts info retrieves, results and does not open a new window.
Are there any methods to do this?
Thanks.
Unfortunately this is tricky situation in web applications. The limit on the size of a URI is typically dictated by the browser you are using and the option to POST data is not a standard available. As for doing an Ajax post and then "loading" the results, is typically not supported for security reasons.
A workaround I have used in the past is to make it a two-step process. Basically use Ajax to post your json data to the server. As a response, have the server send back some kind of token to retrieve the stored data. Then, use that token as a parameter to the new window you are opening, who can then retrieve the data.
I know it is a little bit more work to get the data over to your new page, but it does eliminate these size/security restrictions, and is a cross-browser safe.
You could open a new window to a temporary page, then POST from that page in the new window using a form filled out by JavaScript in the original page.
You could use a hidden form that has your destination page as its target. Use hidden fields for your post values, and submit the form using the Javascript submit() method.
I believe this will only work if you're trying to redirect the current window, not open a popup, although there may be a way around that restriction as well.
Rather than embedding information to pass to the window in the querystring, you can use javascript directly. Using window.opener on the newly opened window, you can access info from the child page:
var selItems = window.opener.strSelectedItems;
Keep in mind that strSelectedItems in this case would need to be globally scoped in the parent page. To keep things clean, I would consider functions on the main page that will return the information the child page needs.