I'm using Richfaces 4 and Mojarra 2.0.4. So I'll be glad if the answer is specific to Richfaces 4 framework :)
I understand that the JSF components are processed at the server side. Some of my pages are really data centric. So when I load that page (eg: inside a richTab with switchType ajax), it takes a lot of time for my bean to execute the method marked with #PostConstruct to execute and fetch data. And hence the time period between user clicking on the tab's header and actual page rendering is quite large, a really bad user experience. I've implemented lazy loading for the dataTables in the page but that still doesn't optimize my page load time since #PostConstruct is still there.
Is there anyway I can load the page first and THEN fetch the data with ajax and update the page? This loading time is really annoying for the user.Any help appreciated :)
PS: I thought of using the oncomplete and onbeforedomupdate client side events of rich:tab and call ajax functions declared with a4j:function. But it seems that these events are fired before the page is actually switched.
use onload event of <body> tag in html along with <a4j:jsFunction>
If you still feel your page is not rendering completely before the method called then use setTimeout('a4jfunctionName',10) javascript function in onload to complete the rendering first.
Related
I'm developping a jqm application with spring mobile in the back-end.
Whenever I hit the browser refresh button on my mobile phone the page is completely devastated afterwards. Browsers back-button works properly.
The data are still available due prg pattern (flashAttributes in Spring) after refresh. Only the view is malformed.
Any ideas how to solve this problem?
From jQuery Mobile docs :
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax
So what happens is - in jQuery Mobile, the scripts and styles defined in the head are loaded only once. So, in normal conditions, it works fine, as all the pages will use the scripts loaded from the first page.
But. When you refresh a page in-between, it triggers a page-reload instead of the ajax navigation model thatjqm uses. So all the scripts and styles loaded from the first page will not be included from here on out.
What you need to do is "reference the same set of stylesheets and scripts in the head of every page", so that even if you hit refresh in the middle, the scripts and styles that had been loaded from the head of the first page are loaded again.
I recommend you read the docs from the above link fully to gain a better understanding.
It hadn't been doing that. Nothing seems to be triggered when the page is loading. What would trigger SSJS validation to run upon opening an xpage?
Your question is too vague to give an exact answer. I recommend watching the XPages Master Class. It will explain the JSF life cycle and show you how to use the XPages toolbox to diagnose your application to get the answer.
Check any partial refresh calls. Use firebug to view network traffic
See if any Ajax calls are being made when page loads. Also check
If you have any converters altering data that might trigger the validation
I have created an MVC application that uses webgrids to display data on my views. In my grid's toolbar I have drop downs, text boxes and a search button that call Jquery to perform various actions. For example, if I click the search button, I refresh the grid via Ajax based on a text entry. This all works well until interaction with the webgrid (page or sort) occurs. We noticed that if any ajax calls are made, then the sorting and paging do not work anymore. Also, if I load the page and page or sort first, then none of my JavaScript works. I have been researching this issue, but have not seen any concrete solutions. Does anyone have recommendations for a solution?
I would wager to guess that you are attaching your jquery handlers in the document.ready function using something like $("#Sort").click(function(){});. When you reload the grid via an AJAX call, the jquery handlers are not reattached since the DOM was not reloaded. Try using something like this $("#Sort").live('click', function(){}); which will attach the handler to any instance of your identifier once it is present on the page.
This is was a complete guess since you posted no code, but this and the post you referenced above (SO post) seems to have fixed your issue.
Can I refresh the whole page after making ajax calls. kindly check my code on this link for details. Actually I am saving on different server and I am making calls from different url and to see the changes refreshing the page is a must. Kindly let me know if you need more details.
problem in refreshing the page after making two ajax calls
Thanks
No point in using AJAX if you are just going to refresh instantly after. Might as well just POST and let it do the refresh there. I realize this is what was said on the other thread but it's because it makes sense. For whatever reason though, if you still want to refresh, try using the jQuery AJAX call and in your success function just do window.location.reload(), that should work.
check out my answer
problem in refreshing the page after making two ajax calls
I read some paragraphs in a book saying that it is not possible to do a partial postback for web, even AJAX is employed. Ajax will postback everything and update only ajaxfied controls.
However, on pages I made using ajax, I used Fiddler to monitor the transportation. I found when the page initial load, it loaded everything include pictures .... However, when I click a button and do a ajax postback. I can only see the some data were loaded.... Looks like it doesn't need to reload the whole page again.
I don't know if what I see is correct? Or the book I read is correct?
Thank you guys.
That depends what you put in the term "postback".
The AJAX call will send the complete form data back to the server, just as if the form was posted normally. The server will answer with a partial response that only contains the parts of the page that should be updated.
So, the request is not partial, but the response is.
I am not sure how you are posting back from the client side. I am guessing you are using UpdatePanels. How well you 'AJAX-ify' a web page depends on what method you employ.
UpdatePanels - Read Dave Ward's posting on them - http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
PageMethods to post back to a web service, get the data and update the DOM to display the result
JQuery and other such AJAX frameworks to post back to a web service
I am sure the link above should clear things up a bit
I'm having a hard time understanding your terminology. I'm not really sure what a "postback" is, much less a "partial" one. I do know that one of the basic ways to transmit information to an HTTP server is via a POST request, which is usually used when submitting forms. If you mean to say that the entire form is transmitted when you click a submit button, I believe you'd be right.
You also seem to be doing something with AJAX, but it's difficult to tell. The whole point of AJAX is to have dynamic data displayed on a page without resorting to reloading it. Defining what to send and what to do with the results is entirely up to your own JavaScript. So unless you're using a framework, which you don't specify, there is no such thing as "ajaxified controls."
In any case, "AJAX" usually means using the XMLHttpRequest() method of modern browsers to send data to servers without refreshing the page. When you call this function, you specify exactly what data to send. This has nothing to do with HTML forms. One caveat: if you are indeed using a library for AJAX, it might impose additional limits on how you structure information to send.