First: <ui:include src="folder/header.xhtml" /> for headers page.
Second: <ui:include src="#{changePageBean.page}" /> for change contents page.
Third: <ui:include src="folder/footer.xhtml" /> for footers page.
I have a doctors dataTable (in my "select-doctor.xhtml"), when I click on a dataTable row, a ajax requisiton is triggered, then the value of changePageBean changes and a calendar (in my "select-date.xhtml") appears as new content.
My calendar uses beforeShowDay for disable some days, without ajax/facelets it works, but with ajax/facelets not, to make it work I need refresh my browser.
Before I refresh the page, a message appears in js console saying:
"[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end users experience.
For more help, check https://xhr.spec.whatwg.org/"
After refreshing the page, my calendar works perfectly and the message goes away.
The problema is when I use ajax with beforeShowDay, without facelets its works perfectly because I dont need use ajax.
select-doctor.xhtml
Code: Select all
<p:dataTable value="#{atendimentoOnlineBean.listarMedicos()}" var="m" scrollable="true" reflow="true" scrollHeight="300" selectionMode="single" selection="#{atendimentoOnlineBean.medico}" rowKey="#{m.id}" style="text-align: left !important;" styleClass="medico-datatable">
<f:facet name="header">
<i class="fa fa-user-md" />
<h:outputText value="Médicos" />
</f:facet>
<p:ajax event="rowSelect" listener="#{changePageBean.trocarPaginaAndIndex('../WEB-INF/agendamento-online/select-date.xhtml', 2)}" process="@this" update="panel-ajax steps" ></p:ajax>
p:column style="text-align: center;" headerText="Nome">
<h:outputText id="nome" value="#{m.nome}" />
</p:column>
</p:dataTable>
select-date.xhtml
Code: Select all
<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="seleciona-horario.xhtml"></f:param>
<f:param name="index" value="3"></f:param>
<p:ajax event="dateSelect" listener="#{changePageBean.trocarPaginaAttribute()}" process="@this" update="panel-ajax steps"></p:ajax>
</p:calendar>
Code: Select all
<?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>Atendimento</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) {
disabledDays = [
<ui:repeat var="days" value="#{atendimentoOnlineBean.diasDisponiveis}" varStatus="loop">
"#{days}"#{loop.last ? "" : ","}
</ui:repeat>
];
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="header.xhtml"></ui:include>
<div id="content" class="content js-content">
<p:outputPanel id="panel-ajax">
<ui:include src="#{changePageBean.page}" />
</p:outputPanel>
</div>
<ui:include src="footer.xhtml"></ui:include>
</h:body>
</html>
Regards,
Mike.
JSF 2.2, PrimeFaces 6.2, Glassfish 4.0
