Rectangle 27 9

Give the parent tag a widgetVar attribute, then add this little attribute to the <p:ajax event="change" ...> child tag:

onstart="if(widgetVarName.panel.is(':visible')) return false;"

When the question was written, we were on PrimeFaces version 3.5, if I recall correctly. Since then, we need to update the solution to:

with thanks to mwalter for pointing out the change.

onstart="if(PF('widgetVarName').panel.is(':visible')) return false;"

jsf - PrimeFaces autocomplete: itemSelect versus change events - Stack...

jsf javascript-events primefaces autocomplete
Rectangle 27 30

The HTML DOM change event is the wrong event when you want to listen on whether the radio button (or checkbox) is clicked. You should be using the click event for this.

The value of the radio button (and checkbox) basically never changes. It has always the same value. The question is more whether that value will be sent to the server side or not. This is determined by the "checked" state which is usually triggered by the DOM click event.

The actual behaviour of the change event on radiobuttons/checkboxes is dependent on the webbrowser used. The behaviour is particulary inconsistent in the IE browser. It not only depends on the version used, but also in the rendering mode used (quirks mode vs standards mode). Perhaps you were actually using IE while testing.

The default event type of the PrimeFaces <p:ajax> (and the standard JSF <f:ajax>), which is valueChange already automatically covers this:

<p:ajax update="msgQuestion" event="valueChange" />

This will autogenerate the right change event handler in text inputs and dropdowns and the click event handler in radiobuttons and checkboxes.

But as said, it's the default event type already. Just omit it altogether.

<p:ajax update="msgQuestion" />

jsf - Primefaces selectOneRadio ajax - Stack Overflow

jsf jsf-2 primefaces selectoneradio
Rectangle 27 30

The HTML DOM change event is the wrong event when you want to listen on whether the radio button (or checkbox) is clicked. You should be using the click event for this.

The value of the radio button (and checkbox) basically never changes. It has always the same value. The question is more whether that value will be sent to the server side or not. This is determined by the "checked" state which is usually triggered by the DOM click event.

The actual behaviour of the change event on radiobuttons/checkboxes is dependent on the webbrowser used. The behaviour is particulary inconsistent in the IE browser. It not only depends on the version used, but also in the rendering mode used (quirks mode vs standards mode). Perhaps you were actually using IE while testing.

The default event type of the PrimeFaces <p:ajax> (and the standard JSF <f:ajax>), which is valueChange already automatically covers this:

<p:ajax update="msgQuestion" event="valueChange" />

This will autogenerate the right change event handler in text inputs and dropdowns and the click event handler in radiobuttons and checkboxes.

But as said, it's the default event type already. Just omit it altogether.

<p:ajax update="msgQuestion" />

jsf - Primefaces selectOneRadio ajax - Stack Overflow

jsf jsf-2 primefaces selectoneradio
Rectangle 27 1

There are other events available like blur, keyup, keydown, keypress, mouseup, mousedown, mousemove, mouseout, mouseover, select, focus, change, click, dblclick. If available even action, valueChange

jsf - primefaces autocomplete input lose focus when selecting item wit...

jsf primefaces
Rectangle 27 5

The valueChange event is only triggered by HTML DOM change event. This is indeed not triggered when the input value is manipulated by JavaScript means.

You need the dateSelect event instead. And, in PrimeFaces components, you'd better use <p:ajax> instead of <f:ajax>.

<p:calendar ...>
    <p:ajax event="valueChange" listener="#{controller.onChange()}" />
    <p:ajax event="dateSelect" listener="#{controller.onChange()}" />
</p:calendar>

The downside to this is that both events will be send in PrimeFaces if you use the calendar component with the option to both use the 'calendar' part and the input field. Will investigate this and maybe file a patch to PF if I can 'fix' this

This solution only works as long as I don't use <f:converter converterId="myConverter" /> With a converter, the new date is not properly set in the backing bean for "valueChange" events. It only works for "dateSelect" events. I'll post this as a separate Question on SO: stackoverflow.com/questions/43150568/

jsf - Primefaces 5.1 calendar popup doesn't execute the valueChange ev...

jsf jsf-2 primefaces
Rectangle 27 26

First of all, onChange is the wrong event name. It's change. Secondly, if you intend to call the HTML attribute name, onChange is also the wrong attribute name. It's onchange.

Coming back to your concrete problem; the standard JSF <f:ajax> is not compatible with PrimeFaces components. You should be using PrimeFaces own <p:ajax> instead.

<p:selectOneMenu ...>
    ...
    <p:ajax listener="#{newOpProgramme.serviceChange()}" update="nomCdp" />
</p:selectOneMenu>

Note that I omitted the event and the process attributes. They both have already the right default value of valueChange and @this respectively.

jsf - doesn't work on PrimeFaces component - Stack Overflow

ajax jsf events primefaces
Rectangle 27 26

First of all, onChange is the wrong event name. It's change. Secondly, if you intend to call the HTML attribute name, onChange is also the wrong attribute name. It's onchange.

Coming back to your concrete problem; the standard JSF <f:ajax> is not compatible with PrimeFaces components. You should be using PrimeFaces own <p:ajax> instead.

<p:selectOneMenu ...>
    ...
    <p:ajax listener="#{newOpProgramme.serviceChange()}" update="nomCdp" />
</p:selectOneMenu>

Note that I omitted the event and the process attributes. They both have already the right default value of valueChange and @this respectively.

jsf - doesn't work on PrimeFaces component - Stack Overflow

ajax jsf events primefaces
Rectangle 27 8

You ultimately need a hook on the HTML DOM change event of <input type="file">. Without ajax (via <p:ajax>) that gets tricky with <p:fileUpload mode="simple"> for 2 reasons:

  • It doesn't support onchange attribute. It might be worth an enhancement request to PF guys. Fortunately, since JSF 2.2 you can specify passthrough attributes.
  • skinSimple="true" generates a <span><span><input /></span></span> and the passthrough attribute would render onchange on all those elements. You need an additional check if this is the <input> element.

All in all, here's how it could be done:

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:form enctype="multipart/form-data">
    <p:fileUpload label="choose file" mode="simple" skinSimple="true"
        value="#{bean.file}"
        a:onchange="if (tagName == 'INPUT') { if (!!value) PF('button').enable(); else PF('button').disable(); }" />

    <p:commandButton widgetVar="button" value="upload" 
        action="#{bean.upload}" ajax="false"
        disabled="#{facesContext.renderResponse or not facesContext.postback}" />
</h:form>

The condition in the disabled attribute of the button makes sure that it's only disabled during render response phase and an initial GET request. Otherwise JSF would refuse to queue the action event as per point 5 of commandButton/commandLink/ajax action/listener method not invoked or input value not updated.

The button is tied to the document as widgetVar so that JS could enable/disable it via its enable() and disable() functions.

unfortunately it's not working as expected, i get an error: Error Parsing XXX.xhtml: Error Traced[line: XXX] The prefix "a" for attribute "a:onchange" associated with an element type "p:fileUpload" is not bound. Using primefaces 5.2 by the way and jsf 2.2.12

So you didn't click the "passthrough attributes" link to learn about it? I'll update the answer.

i clicked it, but didn't read it carefully enough it seems. Thanks again for this great answer, you seem to know everything about jsf.. respect

You're welcome. JSF is much easier if you know a bit of HTTP/HTML/CSS/JS (after all, that's what JSF is consuming and producing under the covers).

jsf - Check whether a file has been chosen in p:fileUpload - Stack Ove...

jsf file-upload primefaces
Rectangle 27 2

My problem were that we were using spring securyty, and the previous page doesn't call the page using faces-redirect=true, then the page show a java warning, and the control doesn't fire the change event.

Solution: The previous page must call the page using, faces-redirect=true

jsf - Primefaces valueChangeListener or jsf jsf-2 primefaces

Rectangle 27 34

You seem to be expecting that the valueChangeListener method in the server side is called immediately when a change event occurs on the client side. This is not correct. It will only be invoked when the form is submitted to the server and the new value does not equals() the old value.

Add onchange="submit()" so that JavaScript will submit the form whenever you change the value:

This is however very JSF-1.x-ish and poor for user experience. It will also submit (and convert/validate!) all other input fields which may not be what you want.

Make use of an ajax listener instead, for sure if you are not interested in the actual value change (i.e. the old value is not interesting for you), but you're actually interested in the change event itself. You can do this using <f:ajax> or in PrimeFaces components using <p:ajax>:

<p:selectOneMenu style="width: 220px;" 
   value="#{customerProfileSessionBean.selectedAccount}">
    <p:ajax listener="#{customerProfileSessionBean.accountValueChange}" />
    <f:selectItems value="#{sessionBean1.custAccountList}"/>
</p:selectOneMenu>
ValueChangeEvent
AjaxBehaviorEvent

Thanks. I was exxpecting the PrimeFaces component to do the submit() as part of the component's ajax behavior.

Your selcond solution worked very well for be, but only if i changed the <f:ajax to <p:ajax... also I think it's good to point out what the signature or the callback method should be. so in this case it would be public void accountValueChange(ValueChangeEvent event){...}

BalusC is spot on.Even more fun, although I am not sure if it is legit., is just to insert <p:ajax></p:ajax> inside the menu and leave the valueChangeListener attribute of the menu intact. For some reason the ajax will fire the valueChangeEvent when the item changes. I have tested this exhaustively to make an immediate change to a locale and it works a dream.

@Tim: The value change listener is fired when the submitted value differs from the initial value. All what ajax does is submitting the form. That's not so weird as you seem to imply. However, if you're not intersted in the change itself, but only in the newly submitted value, then a value change listener is the wrong tool for the job. See also stackoverflow.com/questions/11879138/

jsf 2 - How do I get PrimeFaces to call valueChangeL...

jsf-2 primefaces
Rectangle 27 2

Propably onkeyup event sends string with incomplete value instead the converted plant.

<f:facet name="filter">
                    <p:autoComplete forceSelection="true" itemValue="#{plant}" converterMessage="Select a value"
                                    completeMethod="#{inboundShipmentController.completeSuppliers}"
                                    var="plant" itemLabel="#{plant.plantName}"
                                    converter="plantConverter" a:placeholder="Start typing ...">
                        <p:ajax event="itemSelect" onstart="PF('datalist').filter()" />
                    </p:autocomplete>
                </f:facet>

jsf - Primefaces autocomplete as a datatable filter - Stack Overflow

jsf primefaces
Rectangle 27 2

I think this is happening because the inputText loses it's focus before the old value being changed with the one from DB. Try something else beside blur. I must say I've never encountered this problem.

Also it would be for the best for you to learn some English...

thank you for your answer. what do you mean by "Try something else beside blur"

jsf - primefaces autocomplete input lose focus when selecting item wit...

jsf primefaces
Rectangle 27 2

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:

  • Find the JavaScript file, where your component is defined (for example, most form components such as SelectOneMenu are defined in forms.js)
this.cfg.behaviors
SelectCheckboxMenu
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);
    }
},

jsf - List of events - Stack Overflow

ajax jsf jsf-2 primefaces
Rectangle 27 9

  • To intercept on "change" in radio buttons (and checkboxes) You need the click event instead.
  • The <p:commandButton> is by default an ajax button which isn't prepared for synchronous submits like as performed by JS submit().

Just use <p:ajax> instead so that the submit is performed by ajax. Note that you don't need to specify the event attribute, it defaults to click already.

<p:selectOneRadio value="#{contentEditorBacking.selectedNews}" layout="pageDirection">
    <f:selectItem itemLabel="Public" itemValue="Public" />
    <f:selectItem itemLabel="Member" itemValue="Member" />
    <p:ajax listener="#{contentEditorBacking.addNewsArticle}" />
</p:selectOneRadio>
<p:commandButton value="submit" action="#{contentEditorBacking.addNewsArticle}" />

Update as per the comments, you seem to want to navigate to another page with a parameter. The addNewsArticle() method should then look like as follows so that it is compatible with both <p:ajax listener> and <p:commandButton action>.

public void addNewsArticle() throws IOException {
    ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
    ec.redirect(ec.getRequestContextPath() + "/next.xhtml?action=add");
}

In my addNewsArticle, I'm returning a string with the url + a query string so i can't do an ajax submit.

You wasn't clear about that in your initial question. You have nowhere stated the concrete functional requirement. Just go for the first approach then. By the way, if the method does nothing else than just returning a string, then you could also just put that sole string straight in action attribute like so action="next.xhtml?action=add" or so. Don't forget to disable the ajax behaviour :)

Sorry for not specifying that, i was trying to keep the question short and to the point. I'm actually checking a couple of things and then generating a string so i need to use the backing method.

If i change onchange to onclick, nothing happens, but if i leave it at onchange, it refreshes the page, but it doesn't get in my backer. If i actually click the submit button, it does get into my backing method

Please describe "does not work" in detail. What exactly happens and what exactly not? I do not have your webapp/code in front of me so I could debug/track it myself. I have by the way updated the answer how the second approach would work out for you.

java - JSF how to submit a form via onchange of a selectOneRadio - Sta...

java jsf jsf-2 primefaces
Rectangle 27 7

Forget about adding extra jQuery code and just go with the JSF validator along with the PrimeFaces client validator tag. You'll see how the input field turns red for values greater than 50000. I personally tend to use the change event instead of keyUp, I consider it to be more user friendly:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:comp="http://java.sun.com/jsf/composite/comp"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<h:body>
    <h:form>
        <p:messages autoUpdate="true" />
        <p:inputText value="#{val}" maxlength="5" required="true">
            <f:validateLongRange maximum="50000" minimum="1" />
            <p:clientValidator event="change" />
        </p:inputText>
        <p:commandButton value="Check" />
    </h:form>
</h:body>
</html>

Don't forget to enable the client side validation in your web.xml:

<context-param>
    <param-name>primefaces.CLIENT_SIDE_VALIDATION</param-name>
    <param-value>true</param-value>
</context-param>

Probably that is the solution, I forgot to edit web.xml but why -1 '-(

But does this mean that it won't technically be evaluated server-side?

@Andrew, JSF performs server side validation, Primefaces goes the extra mile adding the client-side piece.

javascript - Client validation in Primefaces - Stack Overflow

javascript jsf jsf-2 primefaces
Rectangle 27 2

i have post the entire code, actually i am using p:ajax tag, and even if i delete teh change event it not working, thank for responding

@NickHol 1. Namespace is right, given that OP on fact used <h:selectOneMenu>. 2. There is change event, but as in showcase it can be omitted, as it's basically the default one.

@skuntsel His topicname states : p:ajax, then his first post was using f:ajax.. is code is just really unreadable. Weird that you downvote me for that.. solarie, remove '_' from youre class names, show us what 'SelectedDirection' is (why capital S?) and put a <h:messages> at top of your page to see if it displays any errors. Since you should be atleast able to see the system out.

@NickHol I know that OP posted extravagantly unformatted code with no respect to java naming conventions. But still your points, especially the second one, is plain wrong.

@skuntsel youre right the change event is available.

jsf 2 - PrimeFaces p:ajax event=“change” not fired - Stack Overflow

ajax jsf-2 primefaces
Rectangle 27 1

you can use the change ajax event.

<h:selectOneMenu value="#{RequestBean.field1Value}"
     rendered="#{result.level_id==itm.level_id}">
    <f:selectItems value="#{RequestBean.indField}" />
    <f:ajax event="change" listener="#{yourBean.yourMethodToChangeSomeValue}" />
</h:selectOneMenu>

and in your method you can use the value of fieldValue or pass with parameter to another Bean method in you xhtml.

jsf - setPropertyActionListener with h:selectOneMenu - Stack Overflow

jsf primefaces
Rectangle 27 2

I would append an AJAX on change event to the selectOneMenu which calls a method on your bean and redirects through it similar to a combination of the respective accepted answers of selectOneMenu ajax events (AJAX event) and Sending a redirect from inside an ajax listener method (redirect).

list - JSF Primefaces selectonemenu page navigation - Stack Overflow

list jsf primefaces navigation
Rectangle 27 1

I think this will fulfill your requirement. I add one extra attribute styleClass="tblTipoCarteraGeneric" to your <p:dataTable> and add two <p:ajax> with events page(because after page change to keep previous page's user interaction record as same) and toggleSelect(if user select header checkbox instead of using singe chek box of each row).

Suppose if your <p:dataTable> is wrapped like this :

<h:form>
<p:dataTable id="tblTipoCarteraGeneric" styleClass="tblTipoCarteraGeneric" ......>
    <p:ajax event="rowSelectCheckbox" oncomplete="abcd()" />
    <p:ajax event="page" oncomplete="abcd()" />
    <p:ajax event="toggleSelect" oncomplete="abcd()" />

    <p:column></p:column>
    ..
    ..
    ..
    <p:column></p:column>
</p:dataTable>
<h:outputScript>var abcd = function(){

    $('div.tblTipoCarteraGeneric >div > table > tbody > tr').each(function(){
        if($(this).hasClass('ui-state-highlight')){
            $(this).css({'pointer-events': 'none'});
        } else {
        $(this).css({'pointer-events': 'auto'});
        }
    });
    };
</h:outputScript>
</form>

thanks for your response, I would prefer a solution more in the primefaces way (i.e no hardcoded javascript)

@Chechus According to me there are no attribute in <p:dataTable> by which you can disable, enable a row. So there is no possible way to disable, enable a <p:dataTable>'s row without using javascript. If you find any better way please let me know. Thank you

jsf - get row id dataTable primefaces - Stack Overflow

jsf jsf-2 primefaces datatable
Rectangle 27 7

Looking at PrimeFaces version 3.5, it appears that the selectListener attribute is no longer available for the AutoComplete component. The link in BalusC's answer leads to the correct place, where it shows the new approach to be to include a <p:ajax> tag inside the <p:autocomplete>:

<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}" completeMethod="#{autoCompleteBean.complete}">  
  <p:ajax event="itemSelect" listener="#{autoCompleteBean.handleSelect}" update="messages" />  
</p:autoComplete>

jsf - Listening to onSelect events from Autocomplete (Primefaces) comp...

jsf primefaces