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.
Related
My current setup looks like this(from here, mostly):
This is the result of my home view. What I intend on doing is keep those 2 sidebars in place and refresh only the content part.
My question: What is the obvious solution to this in django?
From what I read so far it seems to be using Ajax to see what exactly the user clicks on the sidebars and return only a part of the HTML which would be the div where all the content is. (or return a JSON and refresh that div depending on the JSON values?)
I need to avoid refreshing the entire page, it seems useless. I could forget about Ajax and just run on separate views but I would have to pass every time a context variable to populate the sidebars depending on the user and this seems to be an overkill.
Even more specific: On the push of a button on the navbar now that is a href- links to another page. In order to make it refresh only part of the page what should the button trigger? Should it trigger a jquery function or is there a better option?
If your concern is only about left sidebar calculations, then you can go with caching
Django allows to cache part of page - sidebar is ideal item for caching. If sidebar is different for users (I see at least playlists menu item), then it's also possible to implement fragment caching per user, check Vary on headers part of documentation.
Using ajax will complicate your development process - generate html/json encode/render it on user side, etc, etc. And now almost no one uses django in this way. If you want pure single page application, then I suggest you to take a look at some javascript framework like Angular, Vue or React + Django API backend.
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.
I have various tables with the following size : 12 columns and up to 1800 rows. It takes 8 seconds to render it to the user. I currently use h:dataTable. I tried ui:repeat to get the row data from a Java List object, managed by JSF. Although this works fine, the 8 seconds to render the table is unacceptable. I'm trying to find other ways to do this, but need to keep JSF as my controller for action buttons on the page. In other words I want to create the 'table markupto send to thepage myselfand then still associate actions onh:commandButtons` to the managed bean methods. Is there a way to do this?
The only ways I can think of is to use jquery or ajax to create the table markup, although I am new to technologies other than JSF for UI development.Maybe then I would somehow pass that to the client for render. The only problem is I don't know how to generate the markup from my list, and second how I would inject it between h:commandButtons that are in my XHTML file currently.
Does any one know how I can solve this without having to completely rip OFF JSF? One main problem I have is that the business requirement that says we can't page the datatable (i.e: Next / Back buttons displaying 100 at a time for example). So, possibly I was thinking I could do this by Ajax calls to the server and get 100 rows at a time after page ready, and append new rows behind the scenes to the user. This would be a "perceived" speed of load, but I don't know how to do this at all.
8 seconds isn't bad for a whopping 1800 rows on 12 columns. 10~100 rows is done in less than a second, right?
Before continuing with this, are you absolutely positive that all those 1800 rows are supposed to be shown at once? Isn't this very user unfriendly? Wouldn't the user have to need Ctrl+F to find the information it is looking for? Isn't that annoying? Why don't you introduce filtering (a search field) and pagination exactly like as Google is doing to present the zillion of results in a sane and user friendly manner?
Anyway, you could consider using "On-Demand data" option of PrimeFaces <p:dataTable>, wherein the data is loaded by ajax during scrolling via <p:dataTable liveScroll="true">. See also the showcase example. No homegrown code nor manually fiddling with jQuery necessary. PrimeFaces has done it all under the covers.
It you don't want to use PrimeFaces for some reason, then you could consider using OmniFaces <o:componentIdParam> in combination with some jQuery "live scrolling" plugin. See also the last example in its (snapshot) showcase page for a kickoff example (which should easily be adapted to be triggered by hitting the scroll bottom instead of by clicking).
I'm creating a pager for grid data. Basically, I can do it in two ways: when user clicks on a page number, load grid data by using ajax call, or, post back to server (GET or POST) and use query string parameters (or POST variables) to know which page to display. With both methods, sorting of grid items must be persisted.
What is better considering performance and SEO and why?
-- UPDATE --
I need pros and cons for both approaches. I know this is somewhat discussion rather than question, but I need your experiences.
Also, when using ajax, it is not only SEO that I'm wondering about. Will browser's back button behave as expected?
Why not do both.
Have the grid load with SEO friendly anchor GET links then implement some JavaScript to convert them to AJAX calls.
People without JavaScipt (like spiders) can then still navigate around while fancy people will get the enhanced AJAX experience.
With AJAX you can alter history and make the back button work as expected.
Your grids are loaded via AJAX? and you are worried that SEs won't pick them up?
What you can do to get your content indexed is to:
use segmented URLS like CodeIgniter and WordPress instead of query strings. SEs will (supposedly) see them as subfolders.
Instead of loading everything in AJAX, grid data can also be represented as tabular data. What you can do is to load the tabular format for the static page, then with JS, you can replace the table with your grid.
say for example i want to load sports stats, mysite.com/sports/stats should give me tabular data when JS is off, and if i had JS, that data is replaced with the grid.
A pleasant user experience requires a page to load very fast. This can be difficult when there is a large query taking place or when a web service is being used.
I deally, the entire page should be loaded first with loading images everywhere a cumbersome task takes place.
In ASP.NET, this can be accomplished using update panels and a 1 second trigger. The trigger would load some data and then the updatepanel will the update. This approach may be less popular if you do not require entire asp.net page life cycle events to fire. With this approach, allot of methods will fire consuming more resources and time. What if you simply want to display data?
Another aproach would be to create an .ashx httphandler that returns a representation of data in html format. A timer would go off one second after the page loads which triggers a div panel to be populated with the html returned from the .ashx handler. This would bring high performance but you would lose postbacks and viewstate. I suppose that is expected when losing the asp.net page-life cycle.
How would you go about creating a delayed task that uses viewstate and postback if possible that brings great performance?
Maybe creating an http handler to a custom extension, and in the implementation of the handler return the data (or pre-formatted html, json, or xml) that you then insert into an html element of the container page with a javascript ajax call.
Hugo