Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I programmatically hide a step in jWizard?

Tags:

jquery

jwizard

I am using the jWizard jQuery plugin to implement a wizard in my application.

Standing on my requirements I have a total of four steps in the wizard

  1. Choose configuration
  2. Configuration of A
  3. Configuration of B
  4. Summary page

In the first step (Choose Configuration) I simply have two check boxes which the user can mark as checked. Every check box stands for a Configuration. The user can then select one or both of them. So, for example, if the user just select the "configuration A" check box I need to hide step 3 from the wizard. In the same case, if the user check both the boxes, I need to show first stepp 2 and then step 3 of the wizard.

Is there any way to achieve this behaviour with the jWizard plugin?

Thanks very much for helping.

like image 289
Lorenzo Avatar asked Oct 21 '13 16:10

Lorenzo


Video Answer


2 Answers

As mentioned in the other answer, there is not currently a way to do this using the normal functions of jWizard. So, if you need to do this you'll have to implement it yourself. You have a few options.

Ask first

One option is you could ask them to select A and/or B before you launch the wizard, and launch one of three different wizards (A & B, A, B) based on this. You could also remove the step elements from the DOM before launching the wizard.

Put A & B on one Page and hide the ones you don't need

Merge step 2 and 3. Then, based on your selection in step 1, use jQuery to hide/show sections A and B in what is now step 2:

$('#checkboxa').click(function () {
         var $this = $(this);
         if ($this.is(':checked')) {
             $('#sectiona').hide();
         } else {
             $('#sectiona').show();
         }
     });

Write the logic yourself

I wish I could give you a better answer on this, since it seems to be what you're looking for, but it's hard to tell how to accomplish this from the jWizard documentation. You could try removing a step altogether from the wizard (and reinserting it if the user changes his or her mind) or manually 'skip' a step by triggering a next event (or a click event if no next events are available).

like image 53
ramblinjan Avatar answered Oct 10 '22 01:10

ramblinjan


Feature you are looking for is yet to be implemented. BTW, I'm waiting for that feature too.

enter image description here

As for now the framework simply collects all the steps during construction phase:

   /**
     * Initializes the step collection.
     *
     * Any direct children <div> (with a title or data-jwizard-title attr)
     * or <fieldset> (with a <legend>) are considered steps, and there should
     * be no other sibling elements.
     *
     * Lastly, a <div class"jw-steps-wrap"> is wrapped around all the steps to
     * isolate them from the rest of the widget.
     */
    _buildSteps: function () {

I didn't notice any way to manage that collection. So let's home that functionality will come up soon.

like image 36
Renat Gilmanov Avatar answered Oct 10 '22 03:10

Renat Gilmanov