I've searched the Internet and I cannot find a list of <p:ajax> events. Can anyone provide a complete list of events for the <p:ajax> tag?
I'm particularly interested if there is an onblur event or something similar.
You might want to look at "JavaScript HTML DOM Events" for a general overview of events:
http://www.w3schools.com/jsref/dom_obj_event.asp
PrimeFaces is built on jQuery, so here's jQuery's "Events" documentation:
http://api.jquery.com/category/events/
http://api.jquery.com/category/events/form-events/
http://api.jquery.com/category/events/keyboard-events/
http://api.jquery.com/category/events/mouse-events/
http://api.jquery.com/category/events/browser-events/
Below, I've listed some of the more common events, with comments about where they can be used (taken from jQuery documentation).
Mouse Events
(Any HTML element can receive these events.)
click
dblclick
mousedown
mousemove
mouseover
mouseout
mouseup
Keyboard Events
(These events can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for these event types.)
keydown
keypress
keyup
Form Events
blur (In recent browsers, the domain of the event has been extended to include all element types.)
change (This event is limited to <input> elements, <textarea> boxes and <select> elements.)
focus (This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.)
select (This event is limited to <input type="text"> fields and <textarea> boxes.)
submit (It can only be attached to <form> elements.)
You can search for "Ajax Behavior Events" in PrimeFaces User's Guide, and you will find plenty of them for all supported components. That's also what PrimeFaces lead Optimus Prime suggest to do in this related question at the PrimeFaces forum <p:ajax> event list?
There is no onblur event, that's the HTML attribute name, but there is a blur event. It's just without the "on" prefix like as the HTML attribute name. You can also look at all "on*" attributes of the tag documentation of the component in question to see which are all available, e.g. <p:inputText>.
Schedule provides various ajax behavior events to respond user actions.
"dateSelect" org.primefaces.event.SelectEvent When a date is selected.
"eventSelect" org.primefaces.event.SelectEvent When an event is selected.
"eventMove" org.primefaces.event.ScheduleEntryMoveEvent When an event is moved.
"eventResize" org.primefaces.event.ScheduleEntryResizeEvent When an event is resized.
"viewChange" org.primefaces.event.SelectEvent When a view is changed.
"toggleSelect" org.primefaces.event.ToggleSelectEvent When toggle all checkbox changes
"expand" org.primefaces.event.NodeExpandEvent When a node is expanded.
"collapse" org.primefaces.event.NodeCollapseEvent When a node is collapsed.
"select" org.primefaces.event.NodeSelectEvent When a node is selected.-
"collapse" org.primefaces.event.NodeUnselectEvent When a node is unselected
"expand org.primefaces.event.NodeExpandEvent When a node is expanded.
"unselect" org.primefaces.event.NodeUnselectEvent When a node is unselected.
"colResize" org.primefaces.event.ColumnResizeEvent When a column is resized
"page" org.primefaces.event.data.PageEvent On pagination.
"sort" org.primefaces.event.data.SortEvent When a column is sorted.
"filter" org.primefaces.event.data.FilterEvent On filtering.
"rowSelect" org.primefaces.event.SelectEvent When a row is being selected.
"rowUnselect" org.primefaces.event.UnselectEvent When a row is being unselected.
"rowEdit" org.primefaces.event.RowEditEvent When a row is edited.
"rowEditInit" org.primefaces.event.RowEditEvent When a row switches to edit mode
"rowEditCancel" org.primefaces.event.RowEditEvent When row edit is cancelled.
"colResize" org.primefaces.event.ColumnResizeEvent When a column is being selected.
"toggleSelect" org.primefaces.event.ToggleSelectEvent When header checkbox is toggled.
"colReorder" - When columns are reordered.
"rowSelectRadio" org.primefaces.event.SelectEvent Row selection with radio.
"rowSelectCheckbox" org.primefaces.event.SelectEvent Row selection with checkbox.
"rowUnselectCheckbox" org.primefaces.event.UnselectEvent Row unselection with checkbox.
"rowDblselect" org.primefaces.event.SelectEvent Row selection with double click.
"rowToggle" org.primefaces.event.ToggleEvent Row expand or collapse.
"contextMenu" org.primefaces.event.SelectEvent ContextMenu display.
"cellEdit" org.primefaces.event.CellEditEvent When a cell is edited.
"rowReorder" org.primefaces.event.ReorderEvent On row reorder.
there is more in here https://www.primefaces.org/docs/guide/primefaces_user_guide_5_0.pdf
As the list of possible events is not tied to p:ajax itself but to the component it is used with, you'll have to ask the component for which ajax events it supports.
There are multiple ways to determine the ajax events for a given component:
1) Ask the component in xhtml:
You can output the list directly in xhtml by binding that component to a request scoped variable and printing the eventNames property:
<p:autoComplete binding="#{ac}"></p:autoComplete>
<h:outputText value="#{ac.eventNames}" />
This outputs
[blur, change, valueChange, click, dblclick, focus, keydown, keypress, keyup,
mousedown, mousemove, mouseout, mouseover, mouseup, select, itemSelect,
itemUnselect, query, moreText, clear]
2) Ask the component in java code:
Figure out the component implementation class and invoke its' implementation of javax.faces.component.UIComponentBase.getEventNames() method:
import javax.faces.component.UIComponentBase;
public class SomeTest {
public static void main(String[] args) {
dumpEvents(new org.primefaces.component.inputtext.InputText());
dumpEvents(new org.primefaces.component.autocomplete.AutoComplete());
dumpEvents(new org.primefaces.component.datatable.DataTable());
}
private static void dumpEvents(UIComponentBase comp) {
System.out.println(
comp + ":\n\tdefaultEvent: " + comp.getDefaultEventName() + ";\n\tEvents: " + comp.getEventNames());
}
}
This outputs:
org.primefaces.component.inputtext.InputText#239963d8:
defaultEvent: valueChange;
Events: [blur, change, valueChange, click, dblclick, focus, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup, select]
org.primefaces.component.autocomplete.AutoComplete#72d818d1:
defaultEvent: valueChange;
Events: [blur, change, valueChange, click, dblclick, focus, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup, select, itemSelect, itemUnselect, query, moreText, clear]
org.primefaces.component.datatable.DataTable#614ddd49:
defaultEvent: null;
Events: [rowUnselect, colReorder, tap, rowEditInit, toggleSelect, cellEditInit, sort, rowToggle, cellEdit, rowSelectRadio, filter, cellEditCancel, rowSelect, contextMenu, taphold, rowReorder, colResize, rowUnselectCheckbox, rowDblselect, rowEdit, page, rowEditCancel, virtualScroll, rowSelectCheckbox]
3) 'rtfm' ;-)
Best option is to look into the documentation of the particular component in use as hopefully provided by the component developers, not limited to PrimeFaces btw. (p:ajax can be attached to any component providing ajax behaviors).
The advantage over previous suggestions is that the documentation not only provides the event names, but also enhanced description of the event potentially enriched with an event type class that can be caught by a listener.
For example the org.primefaces.event.SelectEvent in case of
<p:ajax event="itemSelect" listener="#{anyBean.onItemSelect}"/>
and listener method signature public void onItemSelect(SelectEvent) provides additional event contextual data.
Where there is no explicit list of ajax events on a compoment in the PrimeFaces documentation, the list of on* javascript callbacks can be used as events by removing the 'on' and using the remainder as an event name. The other answers in this question provides help on these plain dom events too.
Unfortunatelly, Ajax events are poorly documented and I haven't found any comprehensive list. For example, User Guide v. 3.5 lists itemChange event for p:autoComplete, but forgets to mention change event.
If you want to find out which events are supported:
Download and unpack primefaces source jar
Find the JavaScript file, where your component is defined (for example, most form components such as SelectOneMenu are defined in forms.js)
Search for this.cfg.behaviors references
For example, this section is responsible for launching toggleSelect event in SelectCheckboxMenu component:
fireToggleSelectEvent: function(checked) {
if(this.cfg.behaviors) {
var toggleSelectBehavior = this.cfg.behaviors['toggleSelect'];
if(toggleSelectBehavior) {
var ext = {
params: [{name: this.id + '_checked', value: checked}]
}
}
toggleSelectBehavior.call(this, null, ext);
}
},
I've got the list in debug mode;
first I saw the point at which the error was thrown
javax.faces.view.facelets.TagException: /showcase/partial_submit.xhtml
#26,36 Event:changed is not supported.
org.primefaces.component.behavior.ajax.AjaxBehaviorHandler.applyAttachedObject(AjaxBehaviorHandler.java:179)
org.primefaces.component.behavior.ajax.AjaxBehaviorHandler.apply(AjaxBehaviorHandler.java:157)
and then I debugged AjaxBehaviorHandler
so if you want discover the right list of supported event, you can generate an error (using an event name that is wrong), and follow this way
Here's what I found during debug.
Related
I have an Accordion Panel whose summary is a search field:
When the content of the search field change, the panel shall be opened and show search result.
It happens that the events in the search field pop-up to the the tab that consequently opens and closes the tab when space or enter keys are pressed. I tried to wrap the summary in a special div that prevents pop-up:
class MyDiv extends Div {
public MyDiv(Component... components) {
super(components);
getElement().executeJs("addEventListener('keydown', (e) => {console.log('pop up prevented'); e.stopPropagation();});");
}
}
...
accordion.add(searchAccordionPanel = new AccordionPanel(new MyDiv(searchField),
searchItemsPage = new MenuItemsPage(this)));
And in fact I see the events intercepted ("pop up prevented" on console) but for some reason the accordion still responds to keypress. I have also tried keyup and keypress events, same result.
Maybe Vaadin transmit another event? Can anybody suggest a solution?
By default TextField is in eager value change mode, i.e. it emits value change after each key stroke. This does not fit in your use case. You can use textField.setValueChangeMode(ValueChangeMode.LAZY) for example. Then TextField will emits value change after user has paused typing. There are also couple of other modes, pick the one that fits the use case the best. Some times it requires trial and error.
I'm using a RadComboBox in the load on demand (lazy) mode with a web service.
I'm using a client side item template of this form: <input type='checkbox' id='cb_#= Value #'/><span>#= Text #</span> (adding a checkbox before each item's text)
In the itemDataBound client side handler for this RadComboBox I'm retrieving the particular item's DOM element and the nested checkbox'es DOM element and adding a click handler function for each of them (using jquery's $(element).click(function() {})).
The click handler functions work fine until I scroll the items out of view and then scroll back, after that the click handlers are not called anymore (the checkbox selection is also lost).
I suppose this is because the DOM elements representing the items get re-created as they are scrolled in and out of view. But the itemDataBound event is raised only once and is not raised again when an item is scrolled back in view.
The only workaround I can think of is to use the onclick attribute in the HTML and reference a global function from there, but this is ugly.
Is there a nicer solution for this then using the onclick attribute?
What it does actually it appends to innerHtml of the list element, but this is effectively re-moving and re-adding every node under the list element.
I worked around this by assigning my click hander and doing the databiding in the itemsRequested client side handler, iterating over the entire list of items obtained with the get_items() method of the RadCombobBox client side object.
itemsRequested is called every time after new items are added to the list and therefore every time after the DOM is re-created.
I am using cell editing in jqgrid and for that, i am using many different jqgrid events, as mentioned below ...
1) beforeSelectRow, 2)beforeEditCell, 3)afterEditCell, 4)onCellSelect, 5)ondblClickRow, etc...
Now, when i doubleClick on any of the row, the beforeselectRow code gets executed first.. which i want to prevent... but how to do that ??
Some example code is as below :-
ondblClickRow: function(id,irow,icol,e)
{
........
},
beforeSelectRow : function(rowid, e)
{
if(rowid==lastSelected)
{
$sampleDialog.dialog('open');
}
}
Different web browsers process the double-click event in a little different ways. So in general you can't prevent 'click' event before 'dblclick'. The callback beforeSelectRow will be called inside of click enevt handler defined inside of jqGrid code. In jQuery documentation of dblclick event handler you can read the following (see here):
It is inadvisable to bind handlers to both the click and dblclick
events for the same element. The sequence of events triggered varies
from browser to browser, with some receiving two click events before
the dblclick and others only one. Double-click sensitivity (maximum
time between clicks that is detected as a double click) can vary by
operating system and browser, and is often user-configurable.
What you currently do is just not recommended way to binding both 'click' and 'dblclick' handles.
You don't describe the original problem which you has which is probably somewhere inside of ondblClickRow callback implementation. The only solution will be to examine reorganization of the program to have no collisions between the actions inside of beforeSelectRow and ondblClickRow callbacks.
I have been following this example, http://www.ok-soft-gmbh.com/jqGrid/DependendSelects2.htm, as it is just what I need. I have got it working but it doesnt work when scrolling through records. If you bring up the form and scroll from a UK record to a US record, the list doesnt change. The onChange event only fires when the user selects from the select drop down.
Is there a way around this?
Thanks for your help.
James
My old demo uses 'change' event handler defined in the dataEvents property of the editoptions. In the dataEvents array one can define other event handlers.
You need just bind keyup to the column exactly like it's described in the answer. In the body of the event handler you can do the same actions as in the body of the 'change' event handler (you can place the code in a function and call it from the both handlers). In the way you should be able to solve the problem.
UPDATED: I updated the old answer and another one which was origin for the demo which you used. The new demo support the navigation buttons (the buttons to edit the 'next' or the 'previous' row) in the editing form.
I am trying to find a list of all the possible values I can pass to the attribute event of the f:ajax tag.
I know that I can also pass function names from my .js files, but what I need just the ones that come with JSF.
I only know about click mouseover and keyup, but I am sure there are more. Just don't know where to find them.
The event attribute of <f:ajax> can hold at least all supported DOM events of the HTML element which is been generated by the Faces component in question. An easy way to find them all out is to check all on* attribues of the Faces input component of interest in the Faces tag library documentation and then remove the "on" prefix. For example, the <h:inputText> component which renders <input type="text"> lists the following on* attributes (of which I've already removed the "on" prefix so that it ultimately becomes the DOM event type name):
blur
change
click
dblclick
focus
keydown
keypress
keyup
mousedown
mousemove
mouseout
mouseover
mouseup
select
Additionally, Faces has two more special event names for EditableValueHolder and ActionSource components, the real HTML DOM event being rendered depends on the component type:
valueChange (will render as change on text/select inputs and as click on radio/checkbox inputs)
action (will render as click on command links/buttons)
The above two are the default events for the components in question.
Some Faces component libraries have additional customized event names which are generally more specialized kinds of valueChange or action events, such as PrimeFaces <p:ajax> which supports among others tabChange, itemSelect, itemUnselect, dateSelect, page, sort, filter, close, etc depending on the parent <p:xxx> component. You can find them all in the "Ajax Behavior Events" subsection of each component's chapter in PrimeFaces User's Guide.
I just input some value that I knew was invalid and here is the output:
'whatToInput' is not a supported event for HtmlPanelGrid.
Please specify one of these supported event names: click, dblclick,
keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover,
mouseup.
So values you can pass to event are
click
dblclick
keydown
mousedown
mousemove
mouseover
mouseup