title: Primefaces AJAX update="@form" calls listener twice
body: <p>I have a page that has some options at the top that when changed updates some chart on the same page. Here is the relevant filters part:</p>
  
  <pre><code>&lt;p:fieldset id="filtrosDashboard" legend="Filtros" toggleable="true" toggleSpeed="500" collapsed="#{beanJanela.filtroCollapsed}"&gt;
  
  &lt;!--Site filter--&gt;
  &lt;div class="ui-g-12 ui-md-12 ui-lg-8"&gt;
      &lt;p:outputLabel for="ObrasPickList" value="#{beanJanela.tituloLabelSelecaoObrasFiltro}" styleClass="tituloFiltro"/&gt;
      &lt;p:pickList id="ObrasPickList" value="#{beanJanela.obras}" var="obra" effect="slide"
                  itemValue="#{obra}" itemLabel="#{obra.descricao}"
                  showSourceFilter="true" showTargetFilter="true" showCheckbox="true"
                  filterMatchMode="contains" converter="obraConverter" responsive="true"
                  addLabel="Adicionar" addAllLabel="Adicionar tudo" 
                  removeLabel="Remover" removeAllLabel="Remover tudo"
                  rendered="#{beanJanela.showMultiplasObrasFiltro}"&gt;
  
          &lt;f:facet name="sourceCaption"&gt;Obras&lt;/f:facet&gt;
          &lt;f:facet name="targetCaption"&gt;Selecionadas&lt;/f:facet&gt;
  
          &lt;p:ajax event="transfer" listener="#{beanJanela.atualizaGraficos}" update="@form"/&gt;
  
          &lt;p:column style="width: 92%"&gt;
              &lt;h:outputText value="#{obra.descricao}" /&gt;
          &lt;/p:column&gt;
      &lt;/p:pickList&gt;
  &lt;/div&gt;
  
  &lt;!--Date filter--&gt;
  &lt;div class="ui-g-12 ui-md-12 ui-lg-4"&gt;
      &lt;p:outputLabel for="periodo" value="Período" styleClass="tituloFiltro" rendered="#{beanJanela.showPeriodoFiltro}"/&gt;
      &lt;div class="ui-inputgroup"&gt;
          &lt;p:inputText id="periodo" value="#{beanJanela.periodo}" rendered="#{beanJanela.showPeriodoFiltro}"&gt;
              &lt;p:ajax event="change" listener="#{beanJanela.atualizaGraficos}" update="@form"/&gt;
          &lt;/p:inputText&gt;
          &lt;span class="ui-inputgroup-addon"&gt;&lt;i class="fa fa-fw fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/p:fieldset&gt;
  </code></pre>
  
  <p>As you can see there are two filters, one is a <code>pickList</code> with working sites and the other is a <code>inputText</code> that is transformed into a data range picker using a javascript library called daterangepicker.</p>
  
  <p>I defined one <code>&lt;p:ajax/&gt;</code> with the event <code>transfer</code> for the <code>pickList</code> and another <code>&lt;p:ajax/&gt;</code> with the event <code>change</code> for the <code>inputText</code>, the both call the same listener <code>#{beanJanela.atualizaGraficos}</code> and they both update the form that contains the filters and the graphs.</p>
  
  <p>The problem is the following, when I use the <code>pickList</code> it works as expected, the method <code>atualizaGraficos</code> is called on the backing bean only once; however, if I try to filter using the date filter, the method <code>atualizaGraficos</code> is called twice.</p>
  
  <p>Why does this happen? I've seen some other posts relating problems similar to this one, but in my case I have two ajax calls with two different events on two different components inside the same form.</p>
  
  <p>Here is the full page code in case it is needed:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:po="http://primefaces.org/omega"&gt;
  
      &lt;h:head&gt;
          &lt;f:facet name="first"&gt;
              &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
              &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/&gt;
              &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
              &lt;meta http-equiv="refresh" content="#{session.maxInactiveInterval};url=#{request.contextPath}/index.xhtml"/&gt;
              &lt;title&gt;Evop&lt;/title&gt;
          &lt;/f:facet&gt;
  
          &lt;link rel="shortcut icon" type="image/png" href="/evop/resources/imagem/icone_evop.png"/&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function () {
                  $("form").bind("keypress", function (e) {
                      if (e.keyCode === 13) {
                          return false;
                      }
                  });
              });
  
              $(document).ready(function () {
                  $(window).keydown(function (event) {
                      if (event.keyCode === 13) {
                          return false;
                      }
                  });
              });
          &lt;/script&gt;
  
          &lt;h:outputScript name="js/nanoscroller.js" library="resources" /&gt;
          &lt;h:outputScript name="js/layout.js" library="resources" /&gt;
          &lt;h:outputScript name="js/script.js" library="resources" /&gt;
          &lt;h:outputScript name="js/all.js" library="font-awesome" /&gt;
  
          &lt;h:outputStylesheet name="css/layout.css" library="resources" /&gt;
          &lt;h:outputStylesheet name="css/primeflex.css" library="resources" /&gt;
          &lt;h:outputStylesheet name="css/animate.css" library="resources" /&gt;
          &lt;h:outputStylesheet name="css/nanoscroller.css" library="resources" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /&gt;
          &lt;h:outputStylesheet name="css/all.css" library="font-awesome"/&gt;
          &lt;h:outputStylesheet name="css/styleCadastro.css" library="resources"/&gt;
          &lt;h:outputStylesheet name="css/styleDashboards.css" library="resources"/&gt;
  
          &lt;ui:insert name="head"/&gt;
      &lt;/h:head&gt;
  
      &lt;h:body styleClass="main-body"&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="topbar clearfix"&gt;
                  &lt;a id="omega-menu-button" href="#"&gt;
                      &lt;span class="fa fa-bars"&gt;&lt;/span&gt;
                  &lt;/a&gt;
  
                  &lt;span class="topbar-title"&gt;Dashboard&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;h:form id="menuform"&gt;
                  &lt;div class="sidebar"&gt;
                      &lt;div class="nano"&gt;
                          &lt;div class="nano-content sidebar-scroll-content menu-flex"&gt;
  
                              &lt;!--MENU--&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/h:form&gt;
  
              &lt;div class="main"&gt;
                  &lt;ui:param name="beanJanela" value="#{comprasDashboardsBean}" /&gt;
  
                  &lt;h:form id="dashboardCompras" prependId="false"&gt;
                      &lt;p:growl id="growl" showDetail="true" showSummary="true" sticky="false" escape="false"&gt;&lt;p:autoUpdate/&gt;&lt;/p:growl&gt;
  
                      &lt;div style="margin-top: 15px;"&gt;
                          &lt;div class="ui-g ui-g-fluid dashboard"&gt;
  
                              &lt;!--Filterns--&gt;
                              &lt;div class="ui-g-12 filtro_obras filtro_obras2"&gt;      
                                  &lt;div class="filtro_card clearfix chatSummary"&gt;
                                      &lt;p:fieldset id="filtrosDashboard" legend="Filtros" toggleable="true" toggleSpeed="500" collapsed="#{beanJanela.filtroCollapsed}"&gt;
  
                                          &lt;!--Site filter--&gt;
                                          &lt;div class="ui-g-12 ui-md-12 ui-lg-8"&gt;
                                              &lt;p:outputLabel for="ObrasPickList" value="#{beanJanela.tituloLabelSelecaoObrasFiltro}" styleClass="tituloFiltro"/&gt;
                                              &lt;p:pickList id="ObrasPickList" value="#{beanJanela.obras}" var="obra" effect="slide"
                                                          itemValue="#{obra}" itemLabel="#{obra.descricao}"
                                                          showSourceFilter="true" showTargetFilter="true" showCheckbox="true"
                                                          filterMatchMode="contains" converter="obraConverter" responsive="true"
                                                          addLabel="Adicionar" addAllLabel="Adicionar tudo" 
                                                          removeLabel="Remover" removeAllLabel="Remover tudo"
                                                          rendered="#{beanJanela.showMultiplasObrasFiltro}"&gt;
  
                                                  &lt;f:facet name="sourceCaption"&gt;Obras&lt;/f:facet&gt;
                                                  &lt;f:facet name="targetCaption"&gt;Selecionadas&lt;/f:facet&gt;
  
                                                  &lt;p:ajax event="transfer" listener="#{beanJanela.atualizaGraficos}" update="@form"/&gt;
  
                                                  &lt;p:column style="width: 92%"&gt;
                                                      &lt;h:outputText value="#{obra.descricao}" /&gt;
                                                  &lt;/p:column&gt;
                                              &lt;/p:pickList&gt;
                                          &lt;/div&gt;
  
                                          &lt;!--Date filter--&gt;
                                          &lt;div class="ui-g-12 ui-md-12 ui-lg-4"&gt;
                                              &lt;p:outputLabel for="periodo" value="Período" styleClass="tituloFiltro" rendered="#{beanJanela.showPeriodoFiltro}"/&gt;
                                              &lt;div class="ui-inputgroup"&gt;
                                                  &lt;p:inputText id="periodo" value="#{beanJanela.periodo}" rendered="#{beanJanela.showPeriodoFiltro}"&gt;
                                                      &lt;p:ajax event="change" listener="#{beanJanela.atualizaGraficos}" update="@form"/&gt;
                                                  &lt;/p:inputText&gt;
                                                  &lt;span class="ui-inputgroup-addon"&gt;&lt;i class="fa fa-fw fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                                      &lt;/p:fieldset&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!--End of filters--&gt;
  
                              &lt;!-- SOME GRAPHS THAT ARE UPDATED WHEN THE FILTER CHANGES --&gt;
  
                              &lt;!-- SCRIPTS FOR THE DATE FILTER --&gt;
                              &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"&gt;&lt;/script&gt;
                              &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"&gt;&lt;/script&gt;
                              &lt;h:outputScript name="js/dashboardExtender.js" library="resources" /&gt;
                              &lt;script&gt;
                                  $(document).ready(function () {
                                      var start = moment().subtract(29, 'days');
                                      var end = moment();
  
                                      function cb(start, end) {
                                          $('#periodo').text(start.format('L') + ' - ' + end.format('L'));
                                      }
  
                                      $("#periodo").daterangepicker({
                                          startDate: start,
                                          endDate: end,
                                          "locale": {
                                              "format": "DD/MM/YYYY",
                                              "separator": " - ",
                                              "applyLabel": "Salvar",
                                              "cancelLabel": "Cancelar",
                                              "fromLabel": "De",
                                              "toLabel": "Para",
                                              "customRangeLabel": "Definir Período",
                                              "weekLabel": "S",
                                              "daysOfWeek": [
                                                  "Dom",
                                                  "Seg",
                                                  "Ter",
                                                  "Qua",
                                                  "Qui",
                                                  "Sex",
  
  
                                   "Sab"
                                          ],
                                          "monthNames": [
                                              "Janeiro",
                                              "Fevereiro",
                                              "Março",
                                              "Abril",
                                              "Maio",
                                              "Junho",
                                              "Julho",
                                              "Agosto",
                                              "Setembro",
                                              "Outubro",
                                              "Novembro",
                                              "Dezembro"
                                          ],
                                          "firstDay": 1
                                      },
                                      ranges: {
                                          'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
                                          'Últimos 15 Dias': [moment().subtract(14, 'days'), moment()],
                                          'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
                                          'Esse Mês': [moment().startOf('month'), moment().endOf('month')],
                                          'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                                      }
                                  }, cb);
  
                                  cb(start, end);
                              });
                          &lt;/script&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/h:form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;p:ajaxStatus onstart="PF('statusDialog').show();" oncomplete="PF('statusDialog').hide();"&gt;
          &lt;p:dialog widgetVar="statusDialog"
                    modal="true"
                    draggable="false"
                    closable="false"
                    resizable="false"
                    showHeader="false"
                    style="margin: 0; padding: 0;"&gt;
              &lt;p:graphicImage name="/imagem/ajax-loader.gif" /&gt;
          &lt;/p:dialog&gt;
      &lt;/p:ajaxStatus&gt;
  &lt;/h:body&gt;
  </code></pre>
  
  <p></p>