JS Local List Todo list which save even after reload - javascript

In this project, we will be a simple todo app, but saving them to local storage.
So it shows the items we have added even after refreshing the page.
When user clicks #add-todo button it adds the todo(which is written in input#todo-input) to ul#todo-holder element.
Also upon refreshing, all previously added todos, should be displayed in the ul#todo-holder element.
Note:- Use localstorage. All individual todo items to be displayed in li tags inside ul

Related

How to keep html file state the same when changing through files

I made 2 html files, one is mainly using javascript,(the index). And another that is for the info. So in the index.html file when opened it displays a main menu and a button called books and when clicked on it displays a list of book titles and etc. and when chosen one of them it will send you to the 2nd html file, the info.html file. I made a button on the info.html file where it will send you back to the index.html file, but when i click on it goes back to the main menu screen and not the books list screen.
Is there anyway to have the current state of the previous html file stay the same?
(I made the mainmenu dissapear and books tab reappear using javascript.)
When user navigated from Page 2 (info.html) to Page 1 (index.html) using back button, you need some identifier to trigger same functionality which you are triggering on Books button click to displays a list of book titles and etc.
So technically, you need to add a query string identifier on link of Back button
i.e Back
Now, read value of query string identifier in javascript of index.html and conditionally trigger the same functionality which your are triggering when user click on Books button.

How to display content from the current page on a new page

I have a webpage where a dynamic table is generated when the user specifies certain things. I want to display the results in a different format (in a report style) without running the queries again (to maintain consistent results).
I checked this question and related ones, but they pull content from a page, where as what I want is to push the content to a new page.
Basically what I want is to display #my-table on a new tab when the button is clicked.
You can store your data in localStorage or sessionStorage. later on, you can access same data on another page.

Jquery post issues

Ok, I'll try to explain this as best as possible.
I have a main html page with a dropdown. When the dropdown is clicked, the jquery loads another external html into a DIV on the page. There are a couple of dropdown items, so 2 different external htmls are being loaded into the same DIV depending on which dropdown selection was made. That works fine.
The issue I'm having is that on the additional html files that get loaded, I have some jquery that updates labels based on buttons or links clicked in the page. Everything works fine till I use the main dropdown to change the page/div selection, and then any jquery inside the additional HTML files seems to act multiple times, with the # of times equaling how many times the dropdown has been selected.
So for example, if I select "users" from the main dropdown, it loads an html with a list of users where I can remove or add new users and then add some groups to that user. The first time I load this template, things work fine. If I go back and reselect "users" from the main dropdown, now whenever I add a group or click a link to make user changes, it acts as if I have clicked it multiple times. If I reload the entire main page, this issue stops till I reselect the dropdown again more than once.
Is this an issue somewhere with jquery or could it be some other bug?
The fix was to add event.stopImmediatePropagation(); inside the click handler in the div template.
$(document).on('click',"[name=removeCategory]",function(event) {
event.stopImmediatePropagation();
...

Set focus on button that triggered page reload

I have a page with multiple buttons that can trigger a 'Add item to list'. This is a js function that after adding item to list will reload page so the total number of items is refreshed on shopping cart.
I need to set focus after reload on the button that triggered the refresh. (for accessibility)
How can I determine what triggered the refresh?
My suggested method for this:
As part of your JS procedure, get the id of the button in question. JavaScript - onClick to get the ID of the clicked button
Store the id of the button in a hidden variable (focusButton, etc) that persists on the page between refreshes (through being declared in the View and Model in question, and not wiped through the Controller method in question).
When loading the page, if that variable is set, set focus to the id listed in the variable, then set the variable to blank.

partial ajax update with back button

I'm doing partial update to the page with Ajax which is a shopping cart that updates with Ajax as users add items to it. The problem is that if users move to checkout and then hit the back button the shopping cart looks empty as it was updated with Ajax. Refreshing the page make items appear again.
Is there a way to force updating the page on back button?
If you use the history.pushstate in your ajax app, you can keep the contents of the card in a variable in the global namespace (e.g. window.cartItems = { item1, item2, ... }), and after back button is pressed and the previous button is rendered again, get your items from that global object.
I would recommend against altering the behavior of the back button itself. Users expect the Back button to take them back a page, not to do anything else.
I would suggest a different approach. For example, you could have a piece of JS that runs on the cart page itself. This script would grab all the cart data from the backend. The script could run once when the page loads, ensuring that the cart is up-to-date.

Categories