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 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 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 30

This is the way how onchange event works in HTML. It is happening when text in input element is changed, but is fired when component loses focus (in your case that is the moment when you click somewhere else in the page).

You can define p:remoteCommand for test method and just write:

<p:remoteCommand name="test" actionListener="#{statusBean.test}"/>
<p:inputText id="commentInput" rendered="#{status.haveComment}" 
  value="#{statusBean.newComment}"
  onkeypress="if (event.keyCode == 13) { test(); return false; }"/>

and in backing bean:

public void test() {
 System.out.println("Pressed enter!");
}

It's working like a charm! Thanks!

jsf 2 - Jsf calling bean method from input text when pressing enter - ...

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 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 1

Change onclick for oncomplete, the oncomplete event is fire after the update, for more info check this

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - How to call js function after ajax update finished - Stac...

javascript jsf primefaces
Rectangle 27 2

You're basically trying to send 2 responses back to 1 request. This is not ever going to work in HTTP. If you want to send 2 responses back, you've got to let the client fire 2 requests somehow. You were already looking in the right direction for the solution, with little help of JavaScript it's possible to fire multiple requests on a single event (click). Your attempt in onclick is however not valid, the change of window.location on click of the submit button, right before the form submit, completely aborts the original action of the button, submitting the form.

Your best bet is to directly navigate to the result page which in turn invokes JavaScript window.open() on page load, pointing to the URL of the PDF file which you'd like to open. It's namely not possible to send some HTML/JS code along with the PDF file instructing a navigation (as that would obviously corrupt the PDF file). This also means, that you can't return the PDF directly to the form submit request. The code has to be redesigned in such way that the PDF can be retrieved by a subsequent GET request. The best way is to use a simple servlet. You could store the generated PDF temporarily on disk or in session, associated with an unique key, and pass that unique key as request pathinfo or parameter to the servlet in window.open() URL.

Here's a kickoff example:

<h:form>
    ...
    <p:commandButton ... action="#{bean.submit}" />
</h:form>
public String submit() {
    File file = File.createTempFile("zertifikat", ".pdf", "/path/to/pdfs");
    this.filename = file.getName();

    // Write content to it.

    return "targetview";
}
<h:outputScript rendered="#{not empty bean.filename}">
    window.open('#{request.contextPath}/pdfservlet/#{bean.filename}');
</h:outputScript>
Files#copy()
@WebServlet("/pdfservlet/*")
public class PdfServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        File file = new File("/path/to/pdfs", request.getPathInfo().substring(1));
        response.setHeader("Content-Type", "application/pdf");
        response.setHeader("Content-Length", String.valueOf(file.length()));
        response.setHeader("Content-Disposition", "inline; filename=\"zertifikat.pdf\"");
        Files.copy(file.toPath(), response.getOutputStream());
    }

}

javascript - Refresh/navigate current page while opening/downloading f...

javascript jsf primefaces download new-window
Rectangle 27 11

if you need, add style class and data in the same event.

String id="2";
DefaultScheduleEvent evento = new DefaultScheduleEvent("titule", new Date(), new Date(), id);
evento.setStyleClass("event-close");

In the CSS, Damian's response is good.

i have color saved in db, how can i give color to that styleclass?

jsf 2 - Change the color of primefaces Scheduler Event - Stack Overflo...

jsf-2 primefaces
Rectangle 27 1

I think you can use processattribute with a dynamic selector on tabChange event.

jsf - Primefaces submit form on p:tabView tab change - Stack Overflow

forms jsf primefaces jsf-2 tabview
Rectangle 27 6

If you don't want values from user previous sessions you can use attribute autocomplete="off".

Otherwise you can use onmouseup event, it works for me.

onmouseup does not work for me either, however autocomplete="off" is excatelly what I'm using as a work around. Thanks!

jsf - Which event to use on a to cover all changes - Sta...

jsf jsf-2 richfaces ajax4jsf
Rectangle 27 2

There's a constructor for DefaultScheduleEvent that takes a CSS class as parameter:

eventModel = new DefaultScheduleModel();  
eventModel.addEvent(new DefaultScheduleEvent("Event for employee 1", new Date(), laterToday(), "emp1"));
eventModel.addEvent(new DefaultScheduleEvent("Event for employee 2", tomorrow(), laterTomorrow(), "emp2"));

emp1 and emp2 are the style classes. Then add the following css to your style sheet:

.emp1 .fc-event-skin {
    background: red;
}
.emp2 .fc-event-skin {
   background: green;
 }

jsf 2 - Change the color of primefaces Scheduler Event - Stack Overflo...

jsf-2 primefaces
Rectangle 27 1

In mi case I can not use event="save", so I use p:event event="valueChange". In the managedBean I have properties that it will be modified and the object owner this properties. I see many people use event="save" but in my case this event throw render view error, for this reason I use valueChange

<p:column>
<p:inplace id="inplaceNombre" emptyLabel="#{registro.usuario.nombre}" editor="true">
    <p:inputText id="nombre" required="true" 
              requiredMessage="#{msg['editar.nombre.required']}"
               alt="#{msg['editar.alt.nombre']}" title="#{msg['editar.title.nombre']}"
               tabindex="1" value="#{registro.nombre}" 
                styleClass="#{component.valid ? '' : 'invalid'}" maxlength="30">

                 <f:validateBean for="nombre" />
            <p:ajax event="valueChange" update="@this messageNombre" />
    </p:inputText>                        
    </p:inplace>                                        
</p:column>

          <p:row>
    <p:column>
    <p:commandButton value="#{msg['editar.value.enviar']}"
                    title="#{msg['editar.title.enviar']}" alt="#{msg['editar.alt.enviar']}"
                     actionListener="#{registro.actualizarUsuario}" tabindex="7"  />
    </p:column>
       </p:row>
//property that can be modified in the User
            @Size(min=5 ,max=30 ,message="Este campo no es correcto: tamao mximo [30]")
        @Pattern(regexp="^[a-zA-Z]+[a-zA-Z ]+",message="Este campo no es correcto")
        private String nombre;

            //User get by database with f:event type=preRenderView in xhtml view
            private Usuario usuario;

Then, I check the changes and update user.

The event="valueChange" is by the way the default event for all UIInput components. You can safely omit the attribute altogether.

I unknown this behavior. And why I can not use event="save"? I have see code with this behavior in tag p:ajax but in my case the view doesnt render because it dont acknowledge this event.

I have no idea. Perhaps the OP tried random event names and accidently left a bogus one in his question.

BalusC the event="save" or "cancel" is used into a tag p:inplace.

java - Saving changed values from PrimeFaces inplace - Stack Overflow

java jsf primefaces
Rectangle 27 16

You should add an update to your p:ajax. I had problems when selecting a date with the datepicker and when manually typing it in the field. The change event was not triggerd both ways. Therefore I used an p:ajax and a f:ajax with different events.

<p:calendar value="#{caseUitility.caseMaster.fileDate}" id="fileDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true">
    <p:ajax event="dateSelect" listener="#{caseUitility.dateSelect}" update="lastDate"/>
    <f:ajax event="change" execute="@this" render="lastDate" listener="#{caseUitility.dateChange}"/>
</p:calendar>

And in the bean

public void dateSelect(DateSelectEvent event) {
    caseMaster.setFileDate(event.getDate());
    System.out.println("File Date: " + caseMaster.getFileDate());
    System.out.println("Hello... I am in DateChange");
}

public void dateChange(AjaxBehaviorEvent event) throws MWSException {
    System.out.println("File Date: " + caseMaster.getFileDate());
    System.out.println("Hello... I am in DateChange");
}

What is the reason for the use of 2 different ajax tags, one p:ajax and one f:ajax. Why not both p:ajax ?

ajax - Value Change listner not working in primefaces calendar - Stack...

ajax jsf-2 primefaces
Rectangle 27 2

<p:remoteCommand name="fnc" actionListener="#{playgroundController.showDialog()}"/>

<p:chart type="pie" model="#{playgroundController.pieModel1}" style="width:400px;height:300px">
    <p:ajax event="itemSelect" listener="#{playgroundController.itemSelect}" oncomplete="fnc()" />
</p:chart>
public void showDialog() {
    RequestContext.getCurrentInstance().openDialog("pieChartDrillDownDialog");
}

public void itemSelect(ItemSelectEvent event) {
    FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item selected",
                    "Item Index: " + event.getItemIndex() + ", Series Index:" + event.getSeriesIndex());
    FacesContext.getCurrentInstance().addMessage(null, msg);
}

OK, the remote command clue definitely helped. I was able to get my code to work. I'll add an answer later that shows all of the code.

jsf - Primefaces: open a dialog when an element in a pie chart is clic...

jsf primefaces
Rectangle 27 1

<p:ajax event="change" listener="#{caseUitility.dateChange}"/>

And in the bean:

public void dateChange(SelectEvent event) 
{   
      date = (Date)event.getObject();
}

ajax - Value Change listner not working in primefaces calendar - Stack...

ajax jsf-2 primefaces
Rectangle 27 1

<pm:field>
    <p:outputLabel value="Age" />
    <p:inputText id="age" value="#{patreg.age}" onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));" >
        <f:ajax event="change" listener="#{patreg.generate_DOB_FromAge}" render="dob_field"/>
    </p:inputText>
    </pm:field>

In PrimeFaces 6.0, this behavior is still present, even though KeyFilter was moved from PrimeFaces Extensions and became part of the official suite.

jsf 2 - keyfilter is not working in primefaces mobile - Stack Overflow

jsf-2 primefaces primefaces-extensions primefaces-mobile