Best way to enable/disable navigation items in JavaScript? - javascript

My project is a site with multiple sub pages. You should use the website like this:
Page 1: Choose some elements from a list. Save your selection.
Page 2: For each element you've chosen, set two parameters. Press on a button in order to calculate a score.
Page 3: Choose from three different options to export your result.
The navigation bar contains links to these sub pages.
I'd like to enable/disable the navigation items based on the user's progress. For example, you shouldn't be able to reach the export page if you haven't visited the other two pages previously.
At the moment I try to do it like this: I enable/disable the items based on the content of localStorage (more precisely the existence of an array. this is what I use to save the user's selection on page 1). This works pretty good, but I have one problem: If I leave the page and come back some time later, the array is still in the localStorage, which means that all menu items are enabled. I could delete on the last page, but what if the user tries to re-visit a previous page to modify his input?
Is there a better way to do this?
Greetings

you can do it with the help of jquery:
put condition according to your local storage and apply the following code:
$("#button").click(function () {
$("#item").attr("disabled", "true");
});

I would give the user the option to start a new progression (something like a button that clears the array) and that way to let him decide if he wants to change the previous progression or start a new one.

Related

How to fill shopping cart on page B with data from page A

I have a list of products on page A and want to add them to a shopping cart on an external page B (by clicking a button on page A). I already have the correct Ids from page B and their single product page url. I'm looking for the correct (and secure) approach on this one.
My current approach would be using a browser extension which passively listens to the specific button click on page A and then takes action (e.g. by automatically opening a new tab and submit every product page individually). Extending this idea a bit further I could check the form submit url of page B and make use of it automatically.
However using an extension limits this feature to desktop only.
I already thought about using a bookmarklet but using that approach a user always has to actively activate the bookmarklet (from what I know) instead of it listening passively ...
Am I on the right track here or is there another different way I could go?
You can try to add your item id to a variable array each time you select one and then pass the array variable to the page B either by using arguments or using a POST method.

How to add a class name to an element on a different page

I have an image slider where the class name 'current' changes when the next and previous buttons are clicked to display the current image. I wanted to create a separate Overview page which displays all the images in a grid, then when an image is clicked you are directed to the Slider page, and the selected image has the class of 'current'.
Because I can't access and add/remove the 'current' class from my Overview page, I'm not sure how to achieve the functionality I'm looking for. I'm hoping there's a way to load the Slider page and pass in a function which alters the class names on the page you're directed to.
Any help or suggestions on a different way to approach this would be appreciated.
Also, this is just using Vanilla JS. I'm relatively new and still trying to understand the basics.
Thanks!
The easiest solution that comes to mind is using GET parameter: https://example.com/overview?currentimage=1. This way you include the image id in the url and can act accordingly on the overview page. This however works only as you open the new page.
If you'd like the image to change in real time on the overview page as it changes on the slider, you have to look into cookies, session, and/or HTML5 Web Storage. These allow you to store and share data across multiple pages. You update the cookie/session/storage on slider change, and then retrieve the data on the overview page with a loop that checks for changes every second or two, and updates the grid.

Javascript function to remember what user had selected from a set of drop down menu options in his previous access

I'v an app in which i've 3 drop down menus which navigate to some specific page by those options of those three menus combination selected.
But every time the app is opened the user has to re-select that what he have selected in his previous visit.
So I want to give a feature like remembering the users choice.
Please provide some usefull code.
Thank You
You can use Window.localStorage to store data across sessions.

Coming back on a page with the same quicktab and fields expanded (items do not remain expanded)

I have a website with Drupal 7. On one page, we have two quicktabs (using quicktabs module), under each quicktab we have expendable fields. Those fields are expandables thanks to this code:
jQuery(".ideas-content").hide();
jQuery(".ideas-title").click(function () {
jQuery(this).toggleClass('ideas-closed').toggleClass('ideas-open').next(".ideas-content").toggle();
});
The user can click links inside these expandable fields to go to another inside page. When the user goes to the previous page (the page with these expandable fields), quicktabs are back to default and the fields the user previously expanded are not expanded anymore.
How can I do to have the user coming back on the page with the right quicktab and fields expanded? I was thinking to create anchor links but I do not know more.
I googled the issue with no success.
Thank you for any input and help.
If you are able to access the exact HTML of your page, through template.php function overrides, .tpl.php overrides, or by writing the HTML yourself within the page.tpl, you can add IDs and classes around the elements you want, and then since you are using javascript, you can try using a library such as https://github.com/browserstate/history.js in order to get functionality to take the user back to the state they were in -- with open sections -- after going to another page.

Browser back button and dynamic elements

I have a page that uses jQuery to create a number of <input> DOM elements dynamically based on what user picks from a <select> box.
Let's say the user picks 4 from the select box, my script dynamically shows 4 input boxes.
The problem is when the user refreshes or goes back to this page (with the browser back button). The elements that are created dynamically are not repopulated to their last values, while all the other 'static' elements are.
I was thinking I could create a hidden input that would be serialized through javascript with the contents of the dynamic boxes, then read from it on $document.ready and then repopulate my boxes.
Is there a better way?
legenden - there are a number of possible solutions to this, I would check out these history plugins for one:
History Remote
jQuery History plugin
Deep Linking plugin
They are a little fidgety, but you should be able to hack up something positive. I will also add, that this can probably be done by storing the dynamically elements in a cookie(s) and somehow repopulating. Check out the jQuery Cookie plugin. Hope that helped you get started.
You need to manage history yourself if you want things to work in this way. You need Really Simple History.

Categories

Resources