How to save selection state in multipage results view? - javascript

I am trying to figure out how I can save selection state in a web app. To be more specific I am making some query interface that queries a mongo backend. The results are are rendered in a image gird type view with checkboxes on each image and a download button to download selected images. Now, I am anticipating dealing with a lot of results for a given search. To handle this I am going to use paging. I am wondering how I would even save the selection state as I am flipping through paged results. I am totally new so if anyone can so much as provide an answer with some supporting information I can look into; that would be great.

Use AJAX to fetch the results on the next pages and append it into a separate section in the page rather than navigating away from the first page. This way the selected results are maintained as they are. You may need to do some calculation around your pagination and some toggling logic to show/hide divs when the pagers are clicked.
Useful link you could use (maybe ignoring the PHP/MySQL parts): http://www.sitepoint.com/pagination-jquery-ajax-php/

Related

Dynamically show/hide subset of records?

I am writing a web app using PHP, MySQL, jQuery, and some miscellaneous add-ons like jEditable and DataTables. On most pages, the user will submit a form which will query the DB and bring back records matching my query rules. This works for 95% of my users 95% of the time. It's the other 5%/%% I am trying to help.
I am excluding records that are no longer being processed (completed/cancelled/accepted/rejected/etc.), leaving only "live" records. However, sometimes the leadership team needs to see the records I exclude. I could write a whole other page or report for each case, but that seems a huge waste of time.
Is there a way to add a "show all records" checkbox or button to my page? When clicked, the button would get and display the rest of the data, so users don't have to refresh/go to another page/etc.
you should add a toggle switch - it could be just a check box, or you could use something fancy like this: http://simontabor.com/labs/toggles/
Bind an event to it that preforms a table.ajax.reload() in datatables to pull in the new records. Also, for the datatables ajax request, provide a callback that returns the toggled state of the toggle control as a post variable, then handle the filtering in your sql on the back end.
Note, this solution means you will have to configure datatables to source data via ajax, which, from what you described sounds like you should be doing anyway.

Is it possible for Angular.JS to save someone's previous activity?

I have an app I've been building that displays products from an array. Using Angular.JS, I can pull this array to generate on my view. In my view, a client can sort and filter the list to find exactly what they want. Is there a way to save those filters, so if they were to click an item, go to that corresponding page, then come back?
As of right now, it will always load all results without filters, even if a client has clicked a filter or two before hand.
Is there anyway to save their selections or previous activity?
There's more than one way to do what you want:
Using $cookies(https://docs.angularjs.org/api/ngCookies/service/$cookies);
Using localstorage( I use this module, it's very good - https://github.com/gsklee/ngStorage);
using $cacheFactory(https://docs.angularjs.org/api/ng/service/$cacheFactory), but with this option you will lose the data if user leaves the session;
In all cases, the idea is to save the filters and selection on the desired location and retrieve i when necessary.
hope it helps

Best ASP.NET dynamic user control load approach

I have a food menu ASP.NET Web app. I use a datagrid to display the menu items. When the user clicks an item in the grid, a user control opens up below the item to allow the user to enter item details and add the item to an order. The item detail user control in turn contains several user controls with RadioButtonLists, DataLists and TextBoxes. The RadioButtonLists and DataLists are populated from a database. The user should be able to open and close several items at a time, like Windows Browser with sub-folders.
I've tried doing this with strait ASP.NET AJAX using ScriptManger, etc.. I set the item detail user control Visible property to True, and populate the list controls during the OnPreRender event. This is slow and sort of complicated because of the ASP.NET page/control life cycle.
I've been looking into using JQuery requests to ASHX files or Page Methods on the server to generate the item detail controls with maybe RenderControl and sending the generated HTML back to JQuery.
Questions:
Am I on the right track?
Would this sort of approach work for rendering and sending back HTML that may be complex and long?
Would JQuery requests be more efficient than my current approach?
Can anybody point me in the right direction for references and/or examples?
Thanks for the bandwidth.
I found a lot of help that led to my solution at:
http://weblogs.asp.net/sanjeevagarwal/archive/2008/07/22/Dynamically-create-ASP.NET-user-control-using-ASP.NET-Ajax-and-Web-Service.aspx

Dynamic Loading Grids; Javascript or Tag library

I am looking for a grid implementation on my dashboard. The requirement here is that if the data that the grid might be fetching changes while a user is looking through the grid, the changes should be reflected. So the row present in page 1 may be present in page 2 after sometime. If the user clicks on page 2, he should be shown a fresh page that is fetched from database and that item should be in page 2. So, I need to use a pagedObjectList to get the data and show that data when user looks for the next page. The same requirement is for sorting too.
So I am looking for a javascript Grid like jqGrid or DHTMLX grid or a Tag Library which has some sort of ajax calling mechanism for sorting and paging instead of showing the old data which is fetched first.
Please suggest any grid/ tag library implementation which can fulfill the above mentioned requirement. Thanks in advance
I finally went with DHTMLXGrid, it has all the configurable actions I needed, like onPageAction, onSort etc. I could simple write my custom code for those trigger events. I would also recommend it to others, pretty handy and solid.

Searching, sorting, paginating and filtering DIVs using Jquery/AJAX/Javascript

I'm working on the front-end of my project and doing the back-end later. I've ran into a snag though. I have a list of DIVs (want them to be collapsible as well) that are suppose to show various apartments around a given zip code. Problem is, I don't know where to go to look for these things:
Firstly, I wish to sort these divs by name or ranking.
Secondly, I
want to be able to search these results and toss out the ones that
they do not want, i.e. I type in A, all apartments that begin with
letters B-Z disappear in the list. I think in p after A, all Aa-Az
letters disappear from the list, etc.
Thirdly, should I use jQuery to paginate my results or should I use PHP instead?
Lastly, I have a filter box. I want to do the same as above except with different selectable options (on the fly using AJAX). User selects, 1 to 3 bedroom apartments, no pets,
and hits filter... boom, list of apartments with values.
Is there anything that I can use using jQuery/Javascript to speed up this process that also degrades when Javascript's disabled? I know this sounds like a lot, but any help would be greatly appreciated.
Well for this to work without javascript, and still behave like you want, i guess you have to build this in pure old html (with form post's / links) and then add jquery ajax functionality to make it prettier and faster when javascript is enabled.
If i were doing this, i would build it with form post's that return the whole page (when javascript is disabled) and add jquery events on page load to prevent default form post and instead use ajax post to only partial load your pages and aply transition effects.
One last thing, if you have a lot of data to show on page use pagination and sorting at database level, return only the visible content of your page. This will work with and without javascript, and is scalable (with lots of results it becomes unmanageable to it in javascript)

Categories

Resources