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
Related
I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!
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.
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
what is the easiest most efficient - from a performance standpoint - way to program an aspx that will have sections in it rendered as tabs and preferably to be loaded on demand?
I have a certain entity that can be edited by different groups of users, each user group being able to edit certain parts of it. I am thinking of rendering the parts accessible to a group in a tab on the page and then controlling access/load of the tabs based on user rights.
i know a couple of javascript frameworks that address this specific type of requirements do exist, however i am a novice js programmer, i never used it for anything more than handling control events and doing very basic stuff so i do not know how fast i can pick up and use one of them.
You don't really need tabs for that, have it a single page and just load/display data relevant to current user group.
One way to do this (since you're using ASP.NET) is to use MultiView control and display relevant View control for the current user group.
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.