Widget not available after ajax

takugian · 29 Oct 2014, 19:45

Hi, guys

My Primefaces Mobile application has been get some problems with widgets after ajax requests.

Basically, I have this problem in to different parts of my application.

First)

I have a table with some input columns and a button to send a request. This request updates my table. After this ajax, the message "Widget for var 'name_of_component' not available!" is printed on console.

Second)

I have a button that opens a simple dialog. When I click, the dialog does not open and the same message is printed.

Any ideias?

My xhtml is big, if anyone wants to help me, I will post here.

Thanks, guys!

takugian · 29 Oct 2014, 21:15

I think my problem is about p:datatable.

When I remove it from the page, my browser's console stops to show error messages.

"Uncaught TypeError: Cannot read property 'replace' of undefined"

Without this message, the ajax requests work fine.

I need to use p:datatable. Any ideas? Is there a compatibility problem between primefaces mobile and datatable?

Thanks!

soekris · 29 Oct 2014, 21:33

Hello takugian

I suppos you are using last public primefaces, aren't you? If I'm right, Datatable, under mobile, is only usable since 5.1.2, for now only for elite and pro users.

http://www.primefaces.org/showcase/mobi ... able.xhtml

For the next time you post something:

1)People in this list are very good in PF but not fortune-tellers, with the information that you have given is extremely hard to help you. Read your message again, is not it ?

2)If the xhtml is big, try to reduce it, not for the list but for you, "divide and conquer". Start with something that works and increase the difficult until you find where is the problem.

3)Read this -->http://forum.primefaces.org/viewtopic.php?f=3&t=1194

Hope it helps

takugian · 30 Oct 2014, 11:34

soekris wrote:Hello takugian

I suppos you are using last public primefaces, aren't you? If I'm right, Datatable, under mobile, is only usable since 5.1.2, for now only for elite and pro users.

http://www.primefaces.org/showcase/mobi ... able.xhtml

For the next time you post something:

1)People in this list are very good in PF but not fortune-tellers, with the information that you have given is extremely hard to help you. Read your message again, is not it ?

2)If the xhtml is big, try to reduce it, not for the list but for you, "divide and conquer". Start with something that works and increase the difficult until you find where is the problem.

3)Read this -->http://forum.primefaces.org/viewtopic.php?f=3&t=1194

Hope it helps

Thanks, soekris.

Well, I divided and I conquered hahaahah Read my second post again.

I restarted the xhtml and I found why the console is printing an Uncaught TypeError. The problem is p:dataTable.

When I use p:datalist for example, all of my ajax request work well.

As you said, p:datatable is since 5.1.2 and only for pro users, right?

So, I do not know what I can do. I need a table in my xhtml.

takugian · 30 Oct 2014, 11:35

Look my xhtml:

Code: Select all

<!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:pm="http://primefaces.org/mobile">

<f:view renderKitId="PRIMEFACES_MOBILE" />

<h:head>

	<title>Apontamentos de Horas</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<h:outputStylesheet library="estilo" name="mobile.css" />
	<h:outputStylesheet library="estilo" name="keyboard.css" />

	<h:outputScript library="javascript" target="body"
		name="jquery-1.10.2.js" />
	<h:outputScript library="javascript" target="body"
		name="jquery.keyboard.js" />
	<h:outputScript library="javascript" target="body"
		name="apropriacao_keyboard.js" />

	<link rel="shortcut icon"
		href="#{initParam['CONTEXT_ROOT']}/resources/imagens/favicon.ico" />

</h:head>

<h:body style="overflow: hidden;" onload="teclado()">

	<p:growl id="growl" showDetail="true" autoUpdate="true" />

	<!-- PRIMEIRA PÁGINA -->

	<pm:page id="first">

		<pm:content>
			<h:form id="form">

				<div class="intro">
					<div class="row">
						<h:graphicImage name="imagens/logoUsiminas.png" />
						<h:graphicImage name="imagens/logoAPH.png" />
					</div>
					<div class="row">
						<h2>Aproxime seu crachá do dispositivo de leitura ao lado</h2>

						<p:button id="btnToFiltro" styleClass="botaoEntrar"
							value="#{msg['LB_ENTRAR']}" outcome="pm:second?transition=slide" />
					</div>
				</div>

			</h:form>
		</pm:content>

	</pm:page>

	<!-- SEGUNDA PÁGINA -->

	<pm:page id="second">

		<pm:content>
			<h:form id="form">

				<header>
					<div class="row">
						<div class="grid2 logo">
							<h:graphicImage name="imagens/logoUsiminas.png" />
						</div>
						<div class="grid5">
							<h3>
								<strong class="txtVerde">Operador: </strong>
								#{procApontamentoHorasMDB.funcionario.nmFuncionario}
							</h3>
						</div>
						<div class="grid1">
							<h3>
								<strong class="txtVerde">CT: </strong>
								#{procApontamentoHorasMDB.funcionario.cdCentroTrabalho}
							</h3>
						</div>
						<div class="grid2 data">
							<h3>
								<p:clock pattern="dd/MM/yy HH:mm:ss" mode="server" />
							</h3>
							<h:graphicImage name="imagens/icoAPH.png" />
						</div>
					</div>
				</header>

				<h:panelGrid id="pnlgTabelas" columnClasses="clnTabelas, clnTabelas"
					columns="2">

					<p:dataTable id="tabelaAtividades" width="100%" widgetVar="tableAtividades" var="item"
						value="#{procApontamentoHorasMDB.apropriacoesProdutivas}">

						<f:facet name="header">
							<header class="produtivo">
								<h2>Produtivo</h2>
								<h4>Selecione a Atividade e defina a Hora Inicial e Hora
									Final</h4>
							</header>
						</f:facet>

						<p:column id="clnAtividades" headerText="Atividades">
							<p:selectOneMenu id="comboAtividades"
								rendered="#{not item.jaAdicionado}"
								converter="planejamentoConverter"
								value="#{procApontamentoHorasMDB.apropriacao.planejamento}">
								<f:selectItem itemLabel="#{msg['LB_SELECIONE']}" />
								<f:selectItems value="#{procApontamentoHorasMDB.atividades}"
									var="item" itemLabel="#{item.dsTextoAtividade}"
									itemValue="#{item}" />
							</p:selectOneMenu>
							<p:inputText id="txtAtividades" rendered="#{item.jaAdicionado}"
								disabled="true" value="#{item.planejamento.dsTextoAtividade}" />
						</p:column>

						<p:column id="clnInicial1" headerText="Inicial">
							<p:inputText id="txtInicio1" rendered="#{not item.jaAdicionado}"
								converter="horarioConverter"
								value="#{procApontamentoHorasMDB.apropriacao.dtHoraInicio}" />
							<p:inputText id="txtInicioOut1" rendered="#{item.jaAdicionado}"
								disabled="true" value="#{item.dtHoraInicio.time}">
								<f:convertDateTime pattern="HH:mm" timeZone="America/Sao_Paulo" />
							</p:inputText>
						</p:column>

						<p:column id="clnTermino1" headerText="Final">
							<p:inputText id="txtTermino1" rendered="#{not item.jaAdicionado}"
								converter="horarioConverter"
								value="#{procApontamentoHorasMDB.apropriacao.dtHoraTermino}" />
							<p:inputText id="txtTerminoOut1" rendered="#{item.jaAdicionado}"
								disabled="true" value="#{item.dtHoraTermino.time}">
								<f:convertDateTime pattern="HH:mm" timeZone="America/Sao_Paulo" />
							</p:inputText>
						</p:column>

						<p:column id="clnTotal1" headerText="Total">
							<p:inputText id="txtTotal1" disabled="true"
								value="#{item.totalMinutosApropriado}" />
						</p:column>

						<p:column id="clnAcoes1">
							<p:commandButton id="btnSalvar1" styleClass="botaoSalvar"
								rendered="#{not item.jaAdicionado}"
								update="tabelaAtividades @form:outPutFooter :growl"
								oncomplete="onTeclado()"
								action="#{procApontamentoHorasMDB.salvarApropriacaoProdutiva}"
								value="Salvar" />
							<p:commandButton id="btnRemover1" styleClass="botaoRemover"
								rendered="#{item.jaAdicionado}"
								update="tabelaAtividades @form:outPutFooter"
								oncomplete="onTeclado()"
								action="#{procApontamentoHorasMDB.removerApropriacaoProdutiva(item)}"
								value="Excluir" />
						</p:column>

					</p:dataTable>

					<p:dataTable id="tabelaParadas" width="100%" var="item"
						value="#{procApontamentoHorasMDB.apropriacoesParadas}">

						<f:facet name="header">
							<header class="paradas">
								<h2>Paradas</h2>
								<h4>Selecione a Atividade e defina a Hora Inicial e Hora
									Final</h4>
							</header>
						</f:facet>

						<p:column headerText="Atividades">
							<p:selectOneMenu id="comboParadas"
								disabled="#{item.jaAdicionado}"
								converter="planejamentoConverter" value="#{item.planejamento}">
								<f:selectItem itemLabel="#{msg['LB_SELECIONE']}" />
								<f:selectItems value="#{procApontamentoHorasMDB.atividades}"
									var="item" itemLabel="#{item.dsTextoAtividade}"
									itemValue="#{item}" />
							</p:selectOneMenu>
						</p:column>

						<p:column id="clnInicial2" headerText="Inicial">
							<p:inputText id="txtInicial2" disabled="#{item.jaAdicionado}"
								converter="horarioConverter" value="#{item.dtHoraInicio}" />
						</p:column>

						<p:column id="clnTermino2" headerText="Final">
							<p:inputText id="txtTermino2" disabled="#{item.jaAdicionado}"
								converter="horarioConverter" value="#{item.dtHoraTermino}" />
						</p:column>

						<p:column id="clnTotal2" headerText="Total">
							<p:inputText id="txtTotal2" disabled="true"
								value="#{item.totalMinutosApropriado}" />
						</p:column>

						<p:column id="clnAcoes2">
							<p:button id="btnSalvar" styleClass="botaoSalvar" value="Salvar" />
						</p:column>

					</p:dataTable>

				</h:panelGrid>

				<p:outputPanel id="outPutFooter">
					<footer>

						<div class="actionBar">
							<div class="grid1"></div>
							<ul class="grid8">
								<li>
									<h3>Útil:</h3>
									<h2>00:00</h2>
								</li>
								<li class="produtivo">
									<h3>Produtivo:</h3>
									<h2>#{procApontamentoHorasMDB.horasProdutivas}</h2>
								</li>
								<li class="paradas">
									<h3>Parado:</h3>
									<h2>#{procApontamentoHorasMDB.horasParadas}</h2>
								</li>
								<li>
									<h3>Total:</h3>
									<h2>#{procApontamentoHorasMDB.horasTotais}</h2>
								</li>
								<li class="finalizar"><p:commandButton id="btnFinalizar"
										styleClass="botaoFinalizar"
										onclick="PF('dlgFinalAprop').show();" type="button"
										value="Finalizar" /></li>
							</ul>
							<div class="grid1"></div>
						</div>

					</footer>
				</p:outputPanel>

			</h:form>

			<p:dialog id="dialogFinalAprop" widgetVar="dlgFinalAprop"
				header="#{msg['LB_FINALIZAR_APROPRIACOES']}" modal="true"
				resizable="false" showEffect="clip" hideEffect="clip">

				<!-- <header>
					<h:graphicImage name="imagens/icoAlerta.png" />
					<h4>Você tem certeza que deseja confirmar as apropriações?</h4>
				</header>

				<p:commandButton id="btnSim" styleClass="botaoFinalizar"
					action="#{procApontamentoHorasMDB.finalizarApropriacao}"
					value="Sim" />

				<p:commandButton id="btnNao" styleClass="botaoFinalizar"
					action="#{procApontamentoHorasMDB.finalizarApropriacao}"
					value="Não" />-->
					
			</p:dialog>

		</pm:content>

	</pm:page>

	<script>
		function onTeclado() {
			$("input").on("click", function() {
				teclado();
				document.getElementById('second:form:tabelaAtividades:0:txtInicio1_input').onclick();
			});
		}
	</script>

</h:body>

</html>

soekris · 30 Oct 2014, 13:17

Hello

I think if you need to work with datatables in a PF mobile project that can't wait 5.2 you should move to elite subscription. It's primefaces business model.

About your code, I haven't found any bug (I'm just lerning PF), the only thing I have found is that you have two forms with same id, 'form', I am aware you are in a multi-page model but I think HTML will change one of them and can affect the behaivour

Hope it helps

takugian · 30 Oct 2014, 14:47

soekris wrote:Hello

I think if you need to work with datatables in a PF mobile project that can't wait 5.2 you should move to elite subscription. It's primefaces business model.

About your code, I haven't found any bug (I'm just lerning PF), the only thing I have found is that you have two forms with same id, 'form', I am aware you are in a multi-page model but I think HTML will change one of them and can affect the behaivour

Hope it helps

I change p:datatable to h:datatable.

The ajax requests are working now, but console still prints some JS errors.

I think I will wait for 5.2 and I will start to read PF blog too. hahaaha

Thanks so much, soekris!

Widget not available after ajax

Who is online