Make checked checkboxes stay checked after coming back to the page - javascript

I have a page of items which are loaded by angularjs with $http.get.
On that same page, there are checkboxes of categories. For example, if user presses the checkbox men, angular fetches the items belonging to the men category without reloading the page.
Also, a user can click on some item and he will get to the detail page for that item.
The problem is that, when a user checks a category checkbox, chooses some item, gets to the detail page and presses the back button in the browser, all checkboxes are unchecked and he will see all the items, not the ones he filtered out a while ago.
How can I 'remember' what checkboxes he checked?

I assume that you currently store the category checkbox state in your controller, which is why when the user goes to the item details and then returns to the list of items the state is lost, since the controller is reloaded. In order to "remember" which checkboxes where checked you will need to create a service in which you will store the state of your checkboxes. Every time the user visits the item list page the controller will read the last state from the service and initialise the checkboxes accordingly. If the user then selects / deselects one or more checkboxes the controller will update the service in order for the new state to be stored.

Related

Refresh previous page dropdown selection

I'm quite new to C# and asp.net and have been struggling for a few days to sort out what seems to be something simple. I've got two pages lets call it page1.aspx and page2.aspx
page1.aspx
I've got two dropdownlists with a continue button. Once the continue button is clicked it will populate data specified in my sql statement. On the first column I've got a hyperlink 'view' and in the last column I've got checkboxes which are disabled. Once I click on the view hyperlink it takes me to page2.aspx which has a button Tick and Untick which ticks the checkbox on page1.aspx
page2.aspx
On this page I've got three buttons (back, tick, untick) the tick and untick buttons is just to tick or untick the disabled checkboxes on page1.aspx. On the back button I'm trying a response.redirect('page1.aspx'); however when I get redirected the dropdownlist is empty and it doesnt repopulate the previous selected criteria to show the newly ticked or unticked checkbox.
What I've tried
I tried a function
function fnHistory() {
window.history.go(-1);
}
on the back button of page2.aspx this does keep my dropdownlist values on page1.aspx however it doesnt display the newly ticked checkbox since the page needs to be refreshed and refreshing the page takes away the dropdown values.
I tried to do a page refresh every 5 seconds on the div where the sql data gets displayed this is however not a option as its just bad practice.
I've tried update panel on page 1 for the div where the sql data gets displayed however the trigger which should be the tick and untick button is on page2.aspx
Your help and advice will be highly appreciated.
Is there anything unique on page2 that you have to open it in another window?
What about opening the 2nd page in a modal? So you can get access to page1 directly.

How to save state of multiple checkboxes to the backend?

I have multiple checkboxes e.g. 50 in my SPA that I show on one of the views. The user can select/unselect any number of checkboxes and then click on save.
Send http request on every change on checkbox
Send all the data bound to checkboxes on save regardless of whether user changed something or not
Send only the changed data bound to checkboxes (dirty checking? diffing on save?)

Angular Radio Button not checked on page load/click

I am having trouble with a radio button in angular. When the page loads I click on the radio and I want it to be selected with the current employee's team.
I am having trouble with a radio button in angular. When the page loads/ I click the radio I want it to be selected with the current employee's team. Right now it does not select at all unless you press it twice. Any help would be GREATLY appreciated!
I am writing a feature where there is a button dropdown menu with a list of teams. As an employee I can belong to one team only. When I click the button dropdown I want to see the radio button selected that is next to the team I belong to. I won't know for sure how many teams there will be, so I'm not able to hard code it. I've tried different things with ngValue, ngChecked, ngInit with no success.
This code snippet is inside of a ngRepeat for employee in employees.
html code is here: http://jsbin.com/wasihecave/edit?html
employee.team is an id (ex: "1a2b3c4d")
team.id would be the same (ex: "1a2b3c4d")
employee.profile_uid is an id in the same format but a different id.

Angular keep selection between controllers and support routing

I have a LIST view that shows a set of items. In this view the user can select the items.
Then I have a DETAILS view that shows the details about the selected items.
The application moves from LIST view to DETAILS view changing the location. The selected items are passed as URL parameters (for example /cars/ids=1,2,3).
Putting the ids in the URL lets the user bookmark the URL of DETAILS view and see the elements when he opens the bookmarked URL again.
The DETAILS view has a back button that lets the user go back to the LIST view. When the user go back to the LIST view I want that previous selected elements are shown as selected.
How to pass back the selected items from DETAILS to LIST?
I see two solution:
Keep the selection state in a service. When the application is open using the DETAILS view URL, the controller set the selected items in the service taking them from the URL.
Using the same mechanism used for moving from LIST to DETAILS: put the selected items in the URL as parameter. Then the LIST controller retrieve it from the URL.
Which solution is better?
First off I think both of your solutions might work.
1) is sensitive to the user doing a page reload
2) it's good generally but beware if the amount of data grow in the url
Ultimately it's a matter of taste more..
Do you want the user to bookmark a listpage with selected ids? If not then I would like to introduce a third possible solution
var parameters = [ id1, id2, id3 ];
// set in detail view
localStorage.setItem('params',JSON.stringify(parameters));
// to retrieve in list view
var selectedParameters = JSON.parse(localStorage.getItem('params'))
This way you don't have to worry that the user does refresh on page..
Best of luck..

AJAX CakePHP Pagination save data from different pages

I have a view that lists items, and it's a long list so I use Paginator to limit items to 10-to-a-view.
Each item has a checkbox and each checkbox stores the "item ID" of corresponding item. Each page also have a submit button, Now what I want to implement is:
on click of submit button, all selected items's id get save into database but selected items from older pages get lost when next page has been selected. Please help me out how can I implement it in cakephp
Any ideas would be appreciated.

Categories

Resources