p:steps but enable click on all steps

user_4044787 0
Viewed 5811

I have primefaces steps using tag <p:steps> like below :

<p:steps activeIndex="3" styleClass="custom" readonly="false" style="padding: 20px;">
   <p:menuitem value="step 1." actionListener="#{masterController.menuSales(preferencesController)}" update="mainPanel"/>
   <p:menuitem value="step 2." actionListener="#{masterController.menuCustomer(preferencesController)}" update="mainPanel"/>
   <p:menuitem value="step 3." actionListener="#{masterController.menuItem(preferencesController)}" update="mainPanel"/>
   <p:menuitem value="step 4"/>
</p:steps>

And the result is like this :

enter image description here

I can click step 1 but not step 3 and 4. How can I enable click for all steps?

primefaces jsf
3 Answers

menuform:I may answer your question a bit late, but I will post it so if other persona have the same problem, may it work for them.

I use JavaScript for the solution, so may it not the solution that you need:

// That is your code. I added ids to capture them with the DOM.
<p:steps activeIndex="3" styleClass="custom" readonly="false" style="padding: 20px;">
   <p:menuitem value="step 1." actionListener="#{masterController.menuSales(preferencesController)}" update="mainPanel" id="step1"/>
   <p:menuitem value="step 2." actionListener="#{masterController.menuCustomer(preferencesController)}" update="mainPanel" id="step2"/>
   <p:menuitem value="step 3." actionListener="#{masterController.menuItem(preferencesController)}" update="mainPanel" id="step3"/>
   <p:menuitem value="step 4" id="step4"/>
</p:steps>

// Now we can make the script
<script>
  // First of all, we will capture all the steps with the DOM (you can also work with jQuery, but I will post the solution with DOM in case you do not have your code prepared to jQuery)
  var step1 = document.getElementById("menuform:step1");
  var step2 = document.getElementById("menuform:step2");
  var step3 = document.getElementById("menuform:step3");
  var step4 = document.getElementById("menuform:step4");

  // Then, we are going to set the attributes href and onclick, and give them some style to make the elements look like proper links
  step1.setAttribute("href", "[url]");
  step1.setAttribute("onclick", true);
  step1.style.cursor = "pointer";

  step2.setAttribute("href", "[url]");
  step2.setAttribute("onclick", true);
  step2.style.cursor = "pointer";

  step3.setAttribute("href", "[url]");
  step3.setAttribute("onclick", true);
  step4.style.cursor = "pointer";

  step4.setAttribute("href", "[url]");
  step4.setAttribute("onclick", true);
  step4.style.cursor = "pointer";
</script>

Is important to change href and onclick (click event), because the element 'steps' change both of them, thats like them looks like when you inspect the code with the console: - href="#" - onclick="return false;"

user_113112430
Related