I've searched alot about this issue but haven't got any solution, thats why posting here. I've a form In Gravity Forms which has lots of fields and also conditional fields. Say more than 100. Its loading fine but it took over 20 minutes to on website, which really annoying.
So i want something AJAX like solution, mean when page loads, than only first input field will show than on clicking on that further fields should be show via AJAX (or from database). So please help me our on this issue. And thanks in advance :)
You can use the "Page Break" field to break your form into multiple pages.
This way you can have only one or several fields in your first page, then the next set of fields on the next page, etc.
This will not use AJAX by default, but will certainly make your form load faster. And you can implement AJAX loading for the page steps with some custom coding if this is a requirement.
Related
in my view I have the list of bills , and I need to add a field in order to filter the list by client as bellow :
so that if I choose client rgg it will get only show bill of that client.
To do so, I need some orientation if I should do it with Ajax call , because I dont want to reload the page each time I change my choice.
I really need to know the best way to do such thing.
Thank You so much for your help
You do not mention if you are using a javascript component for the table allready.
If not, you can search for one that meets your needs (there are a lot of them). For example, DataTables.
Or you can create your own filtering logic, like this w3schools page shows.
I used handsontable to load thousand of records. When i load page, it will take lots of time to load. So, my question is: Is there any buffer functionality to buffer some data once then some other while scroll?
I am trying to load "100" data while first time refresh. Then while scroll, it will fetch another "100" records. But it will not work. Please help me out.
Thanks
What you are looking for is called infinite scroll and handsontable seems to have all the tools needed to build support for it. Read their documentation's Function datasources section. You will need to implement the lazy loader yourself though.
The feature has been requested couple of years ago, but has not been implemented yet. Some have written plugins with a support.
Alternatively, implement it in the form of pagination. Handsontable already has the support. When user clicks on the other page link, load it through AJAX and feed it back to Handsontable. The link above has an example, just add your ajax call.
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 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 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>}, ... ]}