First of all I'm still learning the structure and how it works.
I searched around the web to get an suitable and easy answer to the following question:
Is there a way to regonize all other basic ajax events, like hovering and clicking on Primefaces Components?
For example, i would know the event which get invoked if you click on the previous or next button on an <p:schedule>. The documentation says there are only "dateSelect, eventMove, eventResize" and "eventSelect" as callable ajax events. But this is not enough, if you want to build an complex application and you combine an <p:calendar> with an <p:schedule>. There you need to know when the schedule switches the month or year.
I hope someone can give me an clear and understandable answer to this.
Thanks and best regards.
Since you did not specify what event you need, your answer is going to be as clear as the question.
The primefaces objects can only recognize the events they are programmed to. If you need to get a specific type of event, you can:
1) see if the primefaces support that event. put it in a <p:ajax tag, and see if it works.
2) see if the standard JSF ajax API support it.
3) If all else fails, you can try to put a jQuery script along with the page, to handle the event and make a call from the client side.
The <p:calendar and <p:schedule makes heavy use of jQuery plugins to render it, I doubt you can get the events on the month selector or anything else in the rendered interface without client-side jquery.
Related
I need to use InputTextarea PrimeFaces component, wich allow use autocomplete mechanism between text. All works great, except for p:statusAjax, when I'm typing, my loading var animation blocks screen.
I resolve this for AutoComplete PrimeFaces component by adding next lines between p:autoComplete:
<p:ajax event="query" global="false"/>
But when I try put this line between p:inputTextArea JSF shows error:
javax.servlet.ServletException: /notificaciones/edit.xhtml #162,50 Event:query is not supported.
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:606)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:303)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)...
I've read PrimeFaces User Guide but for inputTextArea component there is no Ajax Behavior Section.
So, how can I know which event is firing when autocomplete method executed on p:inputTextArea
Most of the time, the documentation is up-to-date so most likely there is no ajax event. But to be sure, you can always check the javascript source and/or the java source of the component (the source is open and freely accessible).
You can always try without an event name to see if ajax is supported at all since all (most?) components have a default event.
I'm in a good mood and A quick check for you in the java source and the forms.js javascript source of 6.1 (which contains the js for this component and which is split in its own forms.inputtextarea.js in the 6.1.3 Elite and upcoming 6.2 release) does not show any ajax events being used, so I think you are out of luck on this and need to file an enhancement request in github
I have used JSF 1.2 but new to JSF 2.0 . It seems like JSF 2.0 seamlessly supports ajax functionality via <f:ajax> but I am not clear yet how ? I would like to understand what makes these two powerful technologies to work so nicely together ? How does the two lifecycles interact ?
P.S: I am familiar with ajax and javascript. So you can base your answer on that premise.
The question is really broad and I would suggest to search for the appropriate tags to understand its usage in real situations. BalusC has contributed much here on stackoverflow and has also written excellent tutorials that Xtreme Biker made a reference to.
Due to abscence of answers I would offer a basic vision of how ajax works within JSF. There is a special Javascript library in JSF which makes it possible to perform ajax calls to the server with jsf.ajax.request(...). To ease development, there are components that you may attach ajax behaviour to. Typically you will use <f:ajax> tag on the component of your choice, like <h:commandButton>, to add ajax functionality to it.
In the old times we would send an asynchronous XMLHttpRequest via get or post to the server and wait until server sends us postback data which we will get most typically in JSON or XML format for client'side processing and update the view via document.getElementById(...) or by more convenient methods introduced by modern Javascript libraries. I think that in the end this is what JSF does behind the scenes.
In JSF 2.0 <f:ajax> tag was introduced which helps partially submit data, process it on server and partially update your view. For this the ajax tag has the following most important features/attributes: <f:ajax execute="..." render="..." event="..." listener="..." onevent="..." />. Let's take a closer look on all of them.
execute attribute tells JSF about what elements should be updated/processed on the server during this request by specifying a list of element ids;
render attribute tells JSF which components shall be replaced after ajax call is finished - the new elements that were rendered on the server shall replace the old ones with specified ids after partial page update;
event attribute defines events on which an ajax call shall take place, for instance, in case of a command button the event may be a click event, in case of an input text field the event may be a keyup, or blur event;
listener attribute defines a binding to a managed bean method of type public void processAjaxRequest (AjaxBehaviorEvent event) { } that will be triggered on ajax request and executed on server, before partial page update is done;
onevent attribute defines a javascript function to call during different phases of ajax request.
You may consult another excellent tutorial written by Marty Hall on ajax here.
I didn't intend to make an overview of ajax features in JSF 2.0, but rather to make a short introduction to get a basic grasp of ajax functionality.
I have becommen the SocketTimeoutException, which is quite hard to replicate now, but it is not the most important here. What is troubling me is the reaction of the PrimeFaces UI on such happening. The UI got frozen, so no AJAX clicks were processed (one could click what one will but nothing happened).
I don't know the PrimeFaces internals well, but with my experience with AJAX apps, it could happen where we have the AJAX queue and the job is not released after unexpected error happens. Is it the case here?
And how to prevent such behaviour? Or if prevention is not possible, is it possible to "restart" the AJAX engine of PrimeFaces in Javascript? As the last resort I could provide the special button to "reset" the AJAX state without "refreshing" (which should be rather called destroy-all-my-changes) the site?
I'm trying to make the "Google Instant" like experience (I'm not looking for Auto-complete).
Google instant is the dynamically change the "search result" as you type (not the suggestions, which can be achieved with auto complete).
The page will simply have a text input control, in which as your type, you get result below the text input control.
I know, I must make some async calls on "onKeyPress": So first how can I do that in jquery?
Second, any good tutorials on combining asp.net MVC with Razor and Ajax?
edited: as people were confusing auto-complete with instant result
The term that you should use is 'autocomplete'
Have a look at the link below:
http://docs.jquery.com/Plugins/autocomplete
It's server independant. Basically, on the server side, you must create a service, given a string return the possible values that relate to that string.
Hope this helps.
There is a great article here on how to create an instant search with Jquery, PHP and HTML
http://woorkup.com/2010/09/13/how-to-create-your-own-instant-search/
The one caveat I encountered was that you need to put the Javscript code inside a
$(document).ready(function(){
/*Your JS Instant Search goes here */
});
which wasn't clear from the article.
For ASP.NET MVC 3, create a controller/action that returns a JSON or JSONP object. If you're a beginner, this might trip you up as you will get CrossSiteJson errors. This link will help:
Ajax json post to Controller across domains, "not allowed by" Access-Control-Allow-Headers
From doing these two, I was able to do the instant search in MVC3 and it works really well.
Using Firebug or WebKit Web Inspector and Fiddler really helps.
It is still a variant of autocomplete, if you break it down:
Fire autocomplete on key presses.
Fire Ajax search on autocomplete success/load (whatever the event might be).
Writing number 2 is minimal work for you unless somebody has written a plugin that does both. It's a nice little project - write a plugin that combines a text box and div and does autosearch.
I have my fullCalendar functioning well, however, I need to allow the users to remove events from the calendar. I can use the clickEvent method to bring up a confirmation window with a "do you want to remove" message. But this seems kind of clunky. Is there a better UI way of removing events?
Google calendar uses a qTip on click that offers "edit event details" and "delete". At first I didn't like sending users to a different "event details page" but after thinking about this for awhile it is a really good way to go.
It is always safer to ask for a confirm before removing something.
Anyway you can customize the rendering of the event using the eventRender callback
In particular you can:
attach custom markup to render an X image that when clicked will ajax call a delete function
you can attach other jQuery plugins to reproduce exactly the qTip effect
Have a look at the link for more details. Hope it helps