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.
Related
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 2 dropdown in a view. First drop down is automatically populated when the view get's loaded with the list of options. when an item is selected I would like to populate the dropdown # 2.
What's the best way of doing this?
A couple ways of doing this. You can either do an AJAX call (responding to the selection of a value in dropdown #1). The downside to this is that it requires a round-trip call to the server, then updating the value of dropdown #2 with the result.
The other way is to pre-load all possible values for dropdown #2 when the page first loads, and just change it in the browser with JavaScript as soon as the value is changed (rather than making a call all the way back to the server to get the values).
Either way, you're modifying the DOM, most likely, so it'll be some kind of JavaScript solution. Whether you choose AJAX, or preload and change it immediately will probably depend on how it affects the original page load speed, how much data you want to load onto the client, etc. If it's a relatively small number of options possible in dropdown #2, then pre-loading might be your best bet.
I have a dropdown, that contains some list of StudentCode...
when user select any studentcode student data should be displayed in form with student's Image...
for displaying Student Image, Im putting student image in cache memory... and I have one Iframe that gets the byte data from cache memory and render that image on my page... problem is... this thing need at least 1 postback...
can I make some partial postback to render this image?
I see couple problems with the implementation.
1) You should avoid using IFrames in general as there are better ways of handling rendering parts of the webpage.
2) Storing images in cache means that you actually downloaded all of them for each Student in the dropdown list and placed them in the cache. What if there are 100 students? Getting images for all of them and storing them might take a lot of resources.
I suggest you to do the autopostback on dropdown selected value change (via ajax call) which calls a method that will return a partial view with all the information you need for the particular student, including the image.
I found using Ajaxify library (http://max.jsrhost.com/ajaxify/) very easy and convenient for ajax calls.
You can do the same thing without ajax at all in which case the whole page will reload with the same result.
I am having huge data, to display this I am using grid with paging enabled,
and loading the first page data.
How i can load the next page data in the back ground ??
so that when the user clicks next button I will show the data which is preloaded.
Any work around.
Thanks in advance,
kkchaitu
The simpliest solution could be a loading whole set of data to the store and use Paginating Toolbar for filtering purpose, however you refering that amount of data is "huge" - this could make solution uneffective...
or
Have 3 set of data ready (before - empty at start, actual, and after) and overwrite onload events:
after loading - display and load next, (or previous),
before load check is next (or previous) is avaible - use it, change what is prevoius, actual, next, prepare what should be loaded after (in background)
keep in mind that Ajax requests are asinchronic and clicking could be faster than loading and this should be predicted in logic... However this is just an idea
I am familiar with several approaches to making the back button work in AJAX applications in various situations, but I have not found a solution that will work gracefully in my specific scenario.
The pages I am working with are the search interface for a site. You enter terms in a normal search box, click "go and wind up at a search results page. On the search results page there are a ton of UI controls for filtering/sorting the search results to find what you are looking for. Some of the operations triggered by these controls may take a (relatively) long time to complete (e.g. several seconds).
This latency is fine in case where the user is initially filtering/sorting their results... there's a nice AJAX spinner and so on... however when the user clicks on a search result and then clicks on the BACK button, I would like the page to instantly be restored to the state it was in when they clicked through.
I can restore the states using IFRAMEs/fragment identifiers as a dictionary of page history, but what ends up happening is that when the user first hits the back button the initial page is loaded, then it (re) makes the AJAX query to get the page state back, which triggers the AJAX spinner and another wait of possible several seconds.
Is there any approach that does not require this kind of two-stage load of the page when the user returns to the page via the BACK button?
Edited to add: I am partial to jquery but I'd be happy with solutions that depend on other libraries/toolkits or that are standalone/raw javascript.
Edited to add: I should've added that I'm trying to avoid cookies/sessions because this prevents people having multiple brower windows/tabs open and manipulating different sets of search results at the same time.
Edit: Matt, can you elaborate on your proposed solution (triggering a page change event via fragment identifer)? I see how this would help with BACK button clicks across the same page but not coming BACK to the search results page after clicking on a specific result.
Just use a cookie.
Have you investigated the YUI Browser History Manager?
Try to use localStorage object. Here is crossbrower libs jStorage and WEBSHIMS json-storage
Would it help to trigger a page change event using the "Add some info to the # at the end of the URL approach".
That way, clicking the back button shouldn't actually change the page, and you should be able to restore state without the first page load.
Use something persistent that is tied to the user's profile.
Cookies and sessions are good ideas, but you can also keep those stuff in the database. That gives you an added advantage of being able to save the user's filtering preferences accross different browsing session.(if, for exampple, he was looking for something in the office and then decided to continue searching when he is back at home).
It all depends on the complexity of the filters and weather or not it is something you think that the user will want to use accross diffrent browsing sessions..
Edited to add: I should've added that
I'm trying to avoid cookies/sessions
because this prevents people having
multiple brower windows/tabs open and
manipulating different sets of search
results at the same time.
You can create a random token and assign it to the fragment identifier.
on first page load create a token if no fragment identifier is set
before navigating out, store all the temporary ajax data in a cookie with that token as index.
when hitting back, if you have a fragment identifier set, load the data from the corresponding token in the cookie.
you can even add a "time" field to expire tokens, etc...
sample cookie (JSON):
{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}