Wizard prev and next not showing

UI Components for JSF
Post Reply
jmcollin92
Posts: 145
Joined: 05 Nov 2009, 22:32

11 Mar 2010, 16:20

Hello,

I've got a problem with the wizard component with primefaces1.0.0.
When I navigate to the right until the last tab and then come back with the previous button, the next button is not showing anymore. So when I come back in the first tab I have no navigation button at all.

It works fine in the showcase but nit in my environment.

I've got no Javascript error.
With firebug I can see that the answer is the following when come back to the first tab :

Code: Select all

<wizardresponse><wizardtab><success>true</success><content><![CDATA[
<script type="text/javascript">PrimeFaces.onContentReady('j_id4:wizard:j_id6', function() {
j_id4_wizard_j_id6_widget = new PrimeFaces.widget.Panel('j_id4:wizard:j_id6', {});});</script>
<div id="j_id4:wizard:j_id6" class="pf-panel">
<div id="j_id4:wizard:j_id6_hd" class="pf-panel-hd">Personal Details</div>
<div id="j_id4:wizard:j_id6_bd" class="pf-panel-bd">
<table class="grid">
<tbody>
<tr>
<td class="label">Param1 : *</td>
<td class=" value"><input type="text" name="j_id4:wizard:j_id10" value="1" /></td>
</tr>
</tbody>
</table>
</div></div>]]></content></wizardtab>
<state><![CDATA[<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1:j_id12" />]]>
</state></wizardresponse>
In firebug I see that navigation button are masked (display : none) :

Code: Select all

<html xmlns:a="http://www.andromda.org/cartridges/jsf" xmlns="http://www.w3.org/1999/xhtml"><head>
	
		<title>Formulaire 1</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="/testjsf/primefaces_resource/1.0.0/primefaces/wizard/assets/wizard.css" type="text/css" rel="stylesheet">
<script src="/testjsf/primefaces_resource/1.0.0/yui/utilities/utilities.js" type="text/javascript"></script>
<script src="/testjsf/primefaces_resource/1.0.0/jquery/jquery.js" type="text/javascript"></script>
<script src="/testjsf/primefaces_resource/1.0.0/jquery/plugins/tabswitch/tabswitch.js" type="text/javascript"></script>
<script src="/testjsf/primefaces_resource/1.0.0/primefaces/core/core.js" type="text/javascript"></script>
<script src="/testjsf/primefaces_resource/1.0.0/primefaces/wizard/wizard.js" type="text/javascript"></script>
<link href="/testjsf/primefaces_resource/1.0.0/primefaces/panel/panel.css" type="text/css" rel="stylesheet">
<script src="/testjsf/primefaces_resource/1.0.0/primefaces/panel/panel.js" type="text/javascript"></script>
<link href="/testjsf/primefaces_resource/1.0.0/jquery/plugins/gritter/assets/gritter.css" type="text/css" rel="stylesheet">
<script src="/testjsf/primefaces_resource/1.0.0/jquery/plugins/gritter/jquery.gritter.js" type="text/javascript"></script>
<script src="/testjsf/primefaces_resource/1.0.0/primefaces/ajaxstatus/ajaxstatus.js" type="text/javascript"></script>


	</head><body class="yui-skin-sam">
<form enctype="application/x-www-form-urlencoded" action="/testjsf/test/page1-formulaire1.jsf" method="post" name="j_id4" id="j_id4">
<input type="hidden" value="j_id4" name="j_id4">
<script type="text/javascript">PrimeFaces.onContentReady('j_id4:wizard', function() {
wizard = new PrimeFaces.widget.Wizard('j_id4:wizard',{type:'toggle',actionURL:'/testjsf/test/page1-formulaire1.jsf',size:3,formId:'j_id4',viewportClass:'pf-wizard-viewport',speed:175,width:600,height:250});
});
</script>
          <div style="height: 250px; width: 600px;" id="j_id4:wizard"><div class="pf-wizard-nav"><div onclick="wizard.previous();" style="display: none;" class="pf-wizard-prev" id="j_id4:wizard_prev"></div> <!-- HERE you can see display : none !!! -->
          <div class="pf-wizard-next" onclick="wizard.next();" id="j_id4:wizard_next" style="display: none;"></div> <!-- HERE you can see display : none !!! -->

</div><div id="ViewPortj_id4_wizard" style="width: 600px; height: 250px; display: block; overflow: hidden; position: relative;" class="pf-wizard-viewport"><div id="WideDivj_id4_wizard" style="position: relative; width: 600px; height: 250px;"><div class="pf-wizard-tab" id="j_id4:wizard_tab0" style="width: 600px; height: 250px; position: absolute; left: 0px; top: 0px; opacity: 1;"><div class="pf-panel" id="j_id4:wizard:j_id6"><div class="pf-panel-hd" id="j_id4:wizard:j_id6_hd">Personal Details</div><div class="pf-panel-bd" id="j_id4:wizard:j_id6_bd"><table class="grid">
<tbody>
<tr>
<td class="label">Param1 : *</td>
<td class=" value"><input type="text" value="1" name="j_id4:wizard:j_id10"></td>
</tr>
</tbody>
</table>
</div></div></div><div class="pf-wizard-tab" id="j_id4:wizard_tab1" style="width: 600px; height: 250px; position: absolute; left: -999px; top: 0px; opacity: 0;"><div class="pf-panel" id="j_id4:wizard:j_id12"><div class="pf-panel-hd" id="j_id4:wizard:j_id12_hd">Adress Details</div><div class="pf-panel-bd" id="j_id4:wizard:j_id12_bd"><table>
<tbody>
<tr>
<td class="label">PrenomNom : </td>
<td class=" value"><input type="text" value="12" name="j_id4:wizard:j_id16"></td>
</tr>
</tbody>
</table>
</div></div></div><div class="pf-wizard-tab" id="j_id4:wizard_tab2" style="width: 600px; height: 250px; position: absolute; left: -999px; top: 0px; opacity: 0;"><div class="pf-panel" id="j_id4:wizard:j_id18"><div class="pf-panel-hd" id="j_id4:wizard:j_id18_hd">Confirmation</div><div class="pf-panel-bd" id="j_id4:wizard:j_id18_bd"><span id="j_id4:wizard:growl"></span><table id="j_id4:wizard:confirmation">
<tbody>
<tr>
<td>Param1 : </td>
<td><span class="outputLabel">1</span></td>
</tr>
<tr>
<td>PrenomNom : </td>
<td><span class="outputLabel">12</span></td>
</tr>
</tbody>
</table>
<span id="j_id4:wizard:j_id23"><input type="submit" onclick="PrimeFaces.ajax.AjaxRequest('/testjsf/test/page1-formulaire1.jsf',{formId:'j_id4',global:true},{'j_id4:wizard:j_id23_submit':'j_id4:wizard:j_id23_submit','primefacesPartialUpdate':'j_id4:wizard:growl'});return false;" value="Submit" name="j_id4:wizard:j_id23_submit" id="j_id4:wizard:j_id23_submit"></span></div></div></div></div></div></div><script type="text/javascript">PrimeFaces.onContentReady('j_id4:j_id24', function() {
j_id4_j_id24_widget = new PrimeFaces.widget.AjaxStatus('j_id4:j_id24');
j_id4_j_id24_widget.bindFacet('ajaxStart', 'j_id4:j_id24_start');
j_id4_j_id24_widget.bindFacet('ajaxComplete', 'j_id4:j_id24_complete');
});</script><div id="j_id4:j_id24"><div style="display: none;" id="j_id4:j_id24_start"><img src="../design/ajaxloading.gif"></div><div style="display: block;" id="j_id4:j_id24_complete"></div></div><input type="hidden" value="j_id1:j_id16" id="javax.faces.ViewState" name="javax.faces.ViewState">
</form>
    
</body></html>
My code :

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:a="http://www.andromda.org/cartridges/jsf"
	  xmlns:p="http://primefaces.prime.com.tr/ui">
	
<f:view contentType="text/html">
	<head>
		<title>Formulaire 1</title>
		<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
		<p:resources />
	</head>
	
<body>
	<h:form>
		<p:wizard id="wizard" widgetVar="wizard" height="250" width="600" speed="175" effect="toggle">
			<p:tab>
	
				<p:panel header="Personal Details">
				
					<h:messages errorClass="error"/>
					
					<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
						<h:outputText value="Param1 : *" />
						<h:inputText value="#{controllerTest.param1}" required="true" label="Firstname"/>						
					</h:panelGrid>
				</p:panel>
			</p:tab>
				
			<p:tab>
				<p:panel header="Adress Details">
				
					<h:messages errorClass="error"/>
					
					<h:panelGrid columns="2" columnClasses="label, value">
						<h:outputText value="PrenomNom : " />
						<h:inputText value="#{controllerTest.prenomNom}" />
					</h:panelGrid>
				</p:panel>
			</p:tab>
				
			<p:tab>
				<p:panel header="Confirmation">
					<p:growl id="growl" sticky="true" showDetail="true"/>
					<h:panelGrid id="confirmation" columns="2">
						<h:outputText value="Param1 : " />
						<h:outputText value="#{controllerTest.param1}" styleClass="outputLabel"/>
						
						<h:outputText value="PrenomNom : " />
						<h:outputText value="#{controllerTest.prenomNom}" styleClass="outputLabel"/>						
					</h:panelGrid>
					
					<p:commandButton value="Submit" actionListener="#{controllerTest.operation3}" update="growl" />
				</p:panel>
			</p:tab>
			
		</p:wizard>
		
	 <p:ajaxStatus>  
         <f:facet name="start">  
             <h:graphicImage value="../design/ajaxloading.gif" />  
         </f:facet>  
           
         <f:facet name="complete">  
             <h:outputText value="" />  
         </f:facet>  
     </p:ajaxStatus>  
	</h:form>
    
</body>
</f:view>
</html>
Do you have an idea of what happens ?
Did someone experiment the same error ?

Thank's for your answer.
----
Primefaces 2.0.1-SNAPSHOT
JBoss 6.0.0-M2
Mojorra 2.0.2
---

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

11 Mar 2010, 17:15

I say, let's not spend much time on this issue as Wizard will be reimplemented in upcoming version.

http://code.google.com/p/primefaces/iss ... ail?id=594

jmcollin92
Posts: 145
Joined: 05 Nov 2009, 22:32

11 Mar 2010, 17:28

OK.
----
Primefaces 2.0.1-SNAPSHOT
JBoss 6.0.0-M2
Mojorra 2.0.2
---

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

11 Mar 2010, 17:51

Cagatay, just a hint. Did you already see this jQuery wizard plugin? http://thecodemine.org/
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

11 Mar 2010, 18:13

Oleg, this made my day, awesome!

Handles most of the stuff I had to implement in current wizard by itself. I was planning to use something else but after seeing this, I'm really impressed.

Thank you :)

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

11 Mar 2010, 18:21

cagatay.civici wrote:Oleg, this made my day, awesome!

Handles most of the stuff I had to implement in current wizard by itself. I was planning to use something else but after seeing this, I'm really impressed.

Thank you :)
FYI: This is the most voted jQuery plugin of all wizard plugins (rating is really great).
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

11 Mar 2010, 18:25

Cool, where do you check the ratings?

jmcollin92
Posts: 145
Joined: 05 Nov 2009, 22:32

15 Mar 2010, 13:16

I try the new Wizard today and it's OK for me. Great job ...
----
Primefaces 2.0.1-SNAPSHOT
JBoss 6.0.0-M2
Mojorra 2.0.2
---

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

15 Mar 2010, 13:29

Thanks,

Just to note, It is not backward compatible with the old one and documentation is not ready yet.

For now online showcase can help;

http://www.primefaces.org:8080/prime-sh ... wizard.jsf

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 32 guests