Bom dia, em minha aplicação estou utilizando facelets dinamico para incluir paginas no meu index.xhtml, assim eu mantenho o header/footer, troco o conteúdo sem “piscar” a tela, via ajax.
Eu possuo um formulário dividido em varias partes(páginas), assim que um componente for preenchido, o ajax é disparado trocando o conteúdo da página.
Em uma dessas páginas, eu possuo um p:dataTable, seleciono a linha e então, o ajax troca a tabela por um p:calendar, nesse p:calendar eu utilizo o atributo beforeShowDay para fazer uma chamada Javascript me retornando os dias disponíveis,
só que os dias disponiveis só mostram caso eu de um refresh no navegador.
Logo quando eu seleciono a linha no p:dataTable, a tela do p:calendar é carregada e aparece a seguinte mensagem no console js:
"[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/ ."
Quando eu dou o refresh, a mensagem some.
Isso só acontece quando eu uso ajax/facelets, quando eu não uso fica tudo certinho
O meu código JS esta no index.xhtml
<h:outputScript>
function disponibilizarDias(date) {
disabledDays = [
<ui:repeat var="days" value="#{atendimentoOnlineBean.diasDisponiveis}" varStatus="loop">
"#{days}"#{loop.last ? "" : ","}
</ui:repeat>
];
//<![CDATA[
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
return [true, ''];
}
}
return [false, ''];
//]]>
}
</h:outputScript>index.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<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:c="http://java.sun.com/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<title>XXX</title>
<h:outputStylesheet library="style" name="layout.css"></h:outputStylesheet>
<h:outputStylesheet library="style" name="components.css"></h:outputStylesheet>
<h:outputScript library="js" name="localeCalendar.js"></h:outputScript>
<h:outputScript library="js" name="toggle.js"></h:outputScript>
<h:outputScript>
function disponibilizarDias(date) {
console.log("algoo");
disabledDays = [
<ui:repeat var="days" value="#{atendimentoOnlineBean.diasDisponiveis}" varStatus="loop">
"#{days}"#{loop.last ? "" : ","}
</ui:repeat>
];
//<![CDATA[
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
return [true, ''];
}
}
return [false, ''];
//]]>
}
</h:outputScript>
</h:head>
<h:body>
<ui:include src="../WEB-INF/header.xhtml"></ui:include>
<div class="side-bar">
xxx
<div>
<div id="content" class="content js-content">
<p:outputPanel id="panel-ajax">
<ui:include src="#{trocaPaginaBean.paginaAtual}" />
</p:outputPanel>
</div>
<ui:include src="../WEB-INF/footer.xhtml"></ui:include>
</h:body>
</html>Pagina da tabela:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<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">
<h:form>
<h1 style="text-align: center">xxx</h1>
<p:panelGrid columns="1" layout="grid" columnClasses="ui-grid-col-12" styleClass="panelgrid-noborder">
<p:dataTable value="#{atendimentoOnlineBean.listarxxx()}" var="x" scrollable="true" reflow="true" scrollHeight="300" selectionMode="single" selection="#{atendimentoOnlineBean.xxx}" rowKey="#{x.id}" style="text-align: left !important;" styleClass="xxx-datatable">
<f:facet name="header">
<i class="fa fa-xxx" />
<h:outputText value="xxx" />
</f:facet>
<p:ajax event="rowSelect" listener="#{trocaPaginaBean.trocarPaginaAndIndex('xxx.xhtml', 2)}" process="@this" update="panel-ajax steps" ></p:ajax>
<p:column style="text-align: center;" headerText="Nome">
<h:outputText id="nome" value="#{x.nome}" />
</p:column>
</p:dataTable>
<p:commandButton icon="fa fa-arrow-left" value="Voltar" action="#{trocaPaginaBean.trocarPaginaAndIndex('xxx.xhtml', 0)}" process="@this" update="panel-ajax steps" ></p:commandButton>
</p:panelGrid>
</h:form>
</html>Pagina do calendario:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<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:c="http://java.sun.com/jsp/jstl/core">
<h:form>
<div>
<h1 align="center">Selecione uma data abaixo</h1>
<h:panelGrid columns="1" style="margin: 0 auto;">
<p:calendar id="calendar-agendamento" value="#{atendimentoOnlineBean.diaAgendamento}" beforeShowDay="disponibilizarDias" mode="inline" locale="pt" navigator="true" yearRange="c:c+1" style="margin: 0 auto;" >
<f:param name="pagina" value="xxx.xhtml"></f:param>
<f:param name="index" value="3"></f:param>
<p:ajax event="dateSelect" listener="#{trocaPaginaBean.trocarPaginaAttribute()}" process="@this" update="panel-ajax steps"></p:ajax>
</p:calendar>
<p:commandButton style="margin-top: 10px;" icon="fa fa-arrow-left" value="Voltar" action="#{trocaPaginaBean.trocarPaginaAndIndex('xxx.xhtml', 1)}" process="@this" update="panel-ajax steps"></p:commandButton>
</h:panelGrid>
</div>
</h:form>
</html>