How to detach and restore jQuery Mobile pages - javascript

I am working on a jQuery Mobile app that has a known set of distinct thematic pages, e.g.:
<div id="theme1_page" data-role="page" class="ui-page" data-theme="c">
The pages have values I populate via a spatial query. I'd like the user to be able to choose which of the pages they see and restore or change their preference of visible pages at any time.
On a Settings panel I want to use a series of check boxes, e.g.:
$('input[id^="checkbox_"]').on( "change", function ()
To turn off a page via detach() rather than hide() or remove() (which cause other problems) and turn the page back on later or even in another session.
I want to store the state (on/off) and order of all pages for use at another time.
As I'm quite new to this, would placing the page into localStorage somehow be the means to keep track of things and then be the means to retrieve the page on demand to insert at the proper index?
How does one store each detached page’s values, events, position in the array of pages, and visible state?

It is possible to store it in a variable/namespace if you do not need to have it saved across sessions.
If you do need it saved across sessions, the. you'll definitely need localstorage or some way of keeping track of it server side either through the DB or the session object might be a good idea.
Localstorage is pretty much like namespacing , learn a bit more about it here : http://www.w3schools.com/html/html5_webstorage.asp

Related

Working with multiple views using HTML and jQuery

I have two tabs user and admin that render their own tables with separate sets of data. The tables have checkboxes on both tab views. How do I maintain the state of the data and the checkboxes in each view while I am constantly switching between them.
Also, I have noticed that I have a lot of duplicate HTML and JS code since the IDs of the HTML elements have to be unique in both tabs while they are very similar in appearance on both views (needs to be).
So far I have tried HTML5's LocalStorage to save the state of each tab contents but its not really getting me anywhere. Is JQuery's .clone() good enough to maintain what I want?
***Note: I am expecting some suggestions based on industry practices since I think this would be a very common problem.***
What would be an efficient solution for tabbed layout using HTML and JS?
if you are using a single page application you can simply save the state in a simple js object (model).
if its on different web pages local storage or session storage would give you the solution. what is not working for you with LocalStorage? its an adequate solution, especially if you want the state to be saved after you close and reopen the browser

saving web page settings configuration

so i building web apps based on almsaeedstudio adminlte template (it is awesome by the way), and i like the way the sidebar collapse into mini sidebar but when i refreshed the page to navigate to other page the sidebar won't stay collapse and i still want a full size sidebar
so i thinking there must be a way to make my site remember what state it is, so it maybe like saving something to browser or database and then i just check it in my html tags with css class.
well the first thing that come to my mind is saving to database to my user table, but doing so mean i need to do some post/get process that won't work seamlessly or maybe there is a way to do that? since it just a simple toggle to change full sidebar and mini sidebar so maybe a light operation that won't affect performance....
by the way i am using laravel (maybe there is laravel-ish way? lol)
if you want to keep this setting, you will have to save it on the database side.
and since it just a small flag it wont take that much to be updated on the database.
you can always save the value in the session/cookie and just get the data when he login to the system
I would suggest saving the current state in the localStorage or in the cookie.

Save the state of page. Cookie or session?

I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)
Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.

Maintain View State After POST

I am creating a site that utilizes the jQuery UI tabs. Whenever the user flips between the tabs, the tab they just left is posted back to the server in order to save the state.
One of the tabs in particular is a bit complicated in that, if I select a particular data option, other options need to be disabled. However, because of the POST, those options reenable themselves in the view when I go back to the tab. The current solution I have found to fix this problem is to check to see if the specific option was selected and to disable the other options appropriately (which happens as the user flips back to the tab). However, this seems like too much work. I am wondering if there is any way for the disabled attribute to remain on the various options even through the POST. (If the answer is "No," I'll accept that, but I wanted to see if there was another alternative to ensuring the view is correct for the user.)
Edit: I wanted to add some code demonstrating the post that I am doing when the user switches tabs. (Particularly based on the responses.)
$.post($(form).attr("action"), $(form).serialize(), function (data, success) {
if (success) {
// Inject the resulting form back into the parent of the page.
var parent = $(form).parent();
parent.removeData($(form));
parent.html(data);
processTabAfterLoad(tab_index);
}
});
The processTabAfterLoad function does all of the selections and setting the state of the tab back to what it previously was.
If I were you, I'd take a different approach. It seems like your goal in posting back to the server when navigating is to preserve a user's location in an application so when they return, you can restore this state. Rather than reloading the whole page through a POST, what you could do instead is do an "AJAX" post to tell the server to store the user's UI location but do all of your UI enabling logic client-side. That way, not only will UI transitions look smoother, but you'll reduce server load and make the application more responsive.
It'd only be when the user does the initial GET of the page that you'd need to look up the last-known UI location. If there's something stored for that user, you would add logic to set the UI's initial state when the page loads.
Update:
Indeed you are doing an AJAX post, but you're also apparently inserting the HTML response from that post into your UI. That is a somewhat unusual pattern (excepting ASP.NET update panels). Typically, you'd either POST the data and expect no content in the response or you'd receive data back from the post which you'd apply to the UI rather than receiving a fragment of the UI.
If you're committed to the way you're currently handling form submittal, you could look into the jQuery live function which can apply changes to elements as well as newly-inserted elements that match the criteria.
Tabs are usually navigation techniques. Imho, its a bad practice to postback and redirect when a GET (i.e. an ordinary link) would do. A GET resets viewstate back to a known point, is a small payload, doesn't require a page life cycle that gets discarded anyhow before the redirect, etc.
I could also be completely wrong here-- I'm making some guesses since I can't see any code.

Handling GUI after clicking the Back Button

I use a small JS to mark entries as Read upon click, before the user goes to the entry page.
When the user clicks Back, the removeClass I used doesn't seem to keep its effect.
Is there a way to force this on Back behavior?
IE 8, Firefox and other browsers remember form entries on a back button press. You can use this to store some state in a page for when the user hits refresh or back.
Create a hidden textarea on the page somewhere and store your extra state in there. I use onbeforeunload to stash the state and then pull it out again with onload.
Unfortunately IE6 and 7 don't support remembering your form values on back or reload, so you would have to resort to something like cookies if you care about those browsers. Remember to keep the amount of data you store in the cookies small since it will be sent to the server on every request. You will also want to have some way of clearing out that cookie.
When I want to keep a large amount of disparate state, I use JSON.stringify from Douglas Crockford's json2.js.
When the user clicks Back, the browser reloads the page from scratch (except Firefox, which remembers form values), and the old page's Javascript and its effects are gone.
To work around this, you can persist the page's state in a cookie, then read the cookie when the page loads and restore the state, using a Javascript cookie library.
As suggested, you can use cookies. Or if you don't want to do that, you can store the info in hidden form field(s), and on page load (or domready) read the value and set the page state as necessary.
The only way to do this with JS is by storing a cookie with the items a user accesses and mark the entries in the cookie as "visited" when the page is loaded. The drawback is that there will be a small delay between the items loading into view and them being marked as visited (kinda like the one here on StackOverflow with a user's ignored and favorite tags).
Other than this, you could use some server side code to remember the visited entries in session.
If the entries are <a> elements, you can style them with:
a:visited {}

Categories

Resources