I have a web page with employee records. In that page, there is a pagination. Each page has 10 rows of data.
I am thinking to implement the pagination in either of two ways.
I am planning to make an ajax call for every 20 pages. So that
whenever i make an Ajax call i will get 200 rows of data in my page.
I will show or hide the data when i click on pagination. After 20th
page, again i will make one more Ajax call to get another 200 rows
of data and i will have that data in my page and again i will do
show/hide to show the page content and so on.
I will make an Ajax call on every page click to get 10 rows of data.
I am not sure which method to choose. If i implement the first method, it might impact page performance. If i choose second option, the number of AJAX calls will be more.
Pls suggest the best one among these two.
Another approach would be to silently pre-fetch the next/prev page. eg. if the user is on page 3, silently pre-fetch page 4 (and page 2), so that when the user clicks on 'next page' the information is most likely there already.
Some care in race conditions needs to be taken with this approach, so that if the user clicks on 'next page' before the results from pre-fetch is returned, you do not make yet another duplicate call, but just spin/wait for the pre-fetch.
Related
I have a performance issue when I open ionic 3 Modal.
I need to show a list in the modal and the length of list is 1000.
It takes few seconds to open the modal while they are rendered.
I thought about using InfiniteScroll in the modal, But I use Searchbarwhich means server-side should develop more APIs for that.
Since the data of list is quite static, I would like to make like :
Preload the modal page and hide by default.
Show the modal when it should be opened.
When the modal is closed, DO NOT destroy it, just hide.
But according to the ionic docs, I can't reuse modal.
So my question is : Is there a better way to make searchable 1000 list in ionic3?
Thanks.
EDIT : I have tried with localStorage to save json (about 100kb) and stop using XHR to reduce loading time. However I don't feel loading time gotten faster. I tested with just 100 list instead of 1000 and opening modal was a lot faster.
There are a several options:
If it is actually static, just place it in web storage and retrieve it when the use reloads the page.
If it's "quite" static, whatever that means, just place it in the DOM somewhere so it only has to load once per page load. When the user clicks the link to open the modal, store the data in a hidden field. It might even be a good idea to load it asynchronously as the page is loading, which could potentially completely eliminate any loading times at all from the user's perspective.
Use your own modal, and just hide/show it. Load it async.
Example of cache
jQuery AJAX Example
Ok I made it by using <ion-infinite-scroll (ionInfinite)="doInfinite($event)">.
First of all, when modal is opened, get list data from the server
and save in local storage
In the beginning just show 20 items out of 1000. So the rendering
would be a lot faster.
When user scrolls down, doInfinite will be executed.
In the doInfinite function, check what is the next index in order to show
the data. Like pagination logic. And get proper data and push to
the list array.
About <ion-searchbar>, when you get list data from either server
or local storage, save an original list data for the search (In my case, I just used this.originalData = myData like that.). By doing so, whenever user searches by typing, you can filter from 1000 array but no slow rendering issue.
We have a website product that allows users to search rental inventory, view results and then click through to a details page.
On the results page, we also allow users the option to refine their search via bedrooms, bathrooms, price, etc. When the form changes, we do not reload the page, we use Ajax to run a new search query and load the new results into the container.
For example, when the user first did a search, they got back 100 properties. Then they refine their search for 3 bed, 5 bathrooms, view = oceanfront and they get back 10 properties. Once the user finds a property they like, they typically click through to the details page. But, let's say they change their mind and click the browser 'back button'.
When that happens, all of our search params that were loaded via Ajax are now gone and our property count is back to 100 instead of 10.
So what I have realized is any data loaded via Ajax is not being cached in the browser so the original search is loaded not the refined search.
After doing some research, I think using history.pushState() and history.popstate() might be the solution but I'm having trouble wrapping my head around how to implement it for our problem.
Is there a better solution? If not, will history.pushState() work?
Is there a 'right' way to load lists of data/classifieds/articles on a web page, I'm currently loading 8 items via an AJAX request with a view more option at the bottom of these 8 items which once clicked will load the next 8 items and so on until there are no more new items to display.
I was looking around and there is an almost 50/50 split between Ajax loading and pagination listing for data depending on what website you look at. I'm wondering is it easier for a user to use one or the other or is it all the same these days and it's just down to me as the developer to decided?
I know that if I go down the pagination route it removes the overhead of an javascript or jquery needed to be used which is a negligible difference.
Technically it doesn't matter either way to me as I've implement both options before numerous times.
This is more a question of user experience then a coding issue.
I have a page say "Main Page" (Page 1) which looks like a Outlook calendar page having a large number of rows displayed using . Actually, the columns represent "Weeks" and the rows represent "Products". The functionality is that the user can choose a product week combination and create offers for the chosen week.Ideally, as we have a lot of rows (products), we should have ideally implemented pagination but we have not.
We use JSF2 (Mojarra faces that comes with JBoss EAP 6.0). Main Page uses a different bean and Details page uses a different bean and both are in session scope.
When the user creates an offer, instead of refreshing the entire page (i.e. Page1), we just refresh the impacted cells using AJAX. However, the On double clicking the slot(offer), we redirect to a different page (Page2) that displays offer details.
Page 1 - Main Page and Page 2 - Details page.
There are 2 cases from here :
Case 1: User goes from Main page to the details page, just views information on the details page and clicks the close button. In this case, it is enough for me to display Main Page as it was before I opened the details page. To achieve this, we used browser history.back(). However, we faced the below issues :
(a) history.back() works only in Firefox and does not work in Chrome/IE.
(b) Even if we do history.back(), the page loading is cleary visible and as our page is heavy, it takes a few seconds. I would like to avoid re-rendering of main page again (i.e. make it look like opening a popup from the main page and closing it)
Case 2: User goes from Main Page to Details page and makes certain updates which require us to reflect those updates in the main page.(For example: change color of the slot from red to green on the main page).
Currently, when Details page is closed, we call an API that provides us with refreshed data (so that we do not need to maintain the list of actions that the user had performed) and we reload the entire Main page (Page1). However, as the page takes a long time to load, we are asked to refresh only the affected slots/rows.
So, the problem here is that if we have to achieve the refresh of Main Page through AJAX, we need to maintain a list of activities that has been done on the details page and feed it through AJAX which appears to be a complicated activity. (We also want to avoid calling the API.)
Is there any workaround which helps us to refresh only the selected rows on the Main Page to minimise the page load time. Can ui:repeat be partially re-rendered ?
PLease advise.
I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.