Sub-Elements Break Wizard Script

Question

User-1641868886 posted

I have a JQuery (I took it direct from a tutorial) to manage a wizard form with divs that are visible and hidden based on "Next" and "Previous" buttons:

 

$(document).ready(function () {
        $("div").hide();
        $("div:first").show();
        $(":button").click(function () {
            var parentDiv = $(this).parent();
            $("div").hide();
            if ($(this).val() == "Previous") {
                var prevDiv = parentDiv.prev();
                prevDiv.show();
            }
            if ($(this).val() == "Next") {
                var nextDiv = parentDiv.next();
                nextDiv.show();
            }
        });
    });

The script works perfectly...as long as I do not add sub-elements. I tried to use <p>, <span>, or <section> tags so that the JQuery does not have to distinguish between main <div> and sub-Div elements, which would quite naturally break the progression. I have also found if I apply an MVC layout to the View, the JQuery also "sees" the <div> elements in the layout and breaks the page right from the start. I think I can cure that by putting this view into a partialView and calling it on the main View.

My problem is even when I use the other elements, <p>, <span> etc. the JQuery breaks AS IF THESE OTHER ELEMENTS ARE <DIV> elements. Why is this? I thought it was because I used a Bootstrap "panel" class for the <div> and I used the "panel panel-body" for the sub-elements. But even when I removed the "panel-body" class, the sub-element still broke the JQuery. What occurs is that when I hit the "Next" button in the first <div>, the entire view disappears, rather than progressing to the second <div>.

Can anyone suggest a modification to the JQuery or the html that might fix this. NOTE:  In the html below, I added a <section> tag for the heading. THIS DOES NOT BREAK THE JQuery, but when I add a second <section> tag for the panel body, it breaks. 

<div class="panel panel-primary" id="divBasic">
            <section class="panel-heading"><h4>Step 1 : Basic Details</h4></section>
            <br />
        
            @Html.LabelFor(m => m.Code, new { @class = "control-label" })

            <span id="CodeSpan" class="inline-flex">
                @Html.EditorFor(m => m.Code, "- -Enter your Code- -", new { htmlattributes = new { @style = "max-width:100px; margin-left:20px" } })
                @*<input type="button" id="confirmBtn" class="btn btn-success" style="margin-left:20px" value="Confirm Code" />*@
            </span>
            <span id="Code_Validation_Msg" class="field-validation-error">@Html.ValidationMessageFor(m => m.Code)</span>

            <span id="Description" style="margin-left:20px; color:blue; font-weight:bold">
                &nbsp;&nbsp;
                @Html.DisplayFor(m => m.Description)
            </span>


            <br />
            <br />
            <input type="button" name="nextBtn" value='Next' />
        
    </div>

Thanks for looking and any suggestions.

RC

Answer 1

User-474980206 posted

you sample assumes the page has only one set of divs. I'd add a wizard div and change the code to:

$(document).ready(function () {
        $("#wizard>div").hide();
        $("#wizard>div:first").show();
        $("#wizard :button").click(function () {
            var parentDiv = $(this).parent();
            $("#wizard>div").hide();
            if ($(this).val() == "Previous") {
                var prevDiv = parentDiv.prev();
                prevDiv.show();
            }
            if ($(this).val() == "Next") {
                var nextDiv = parentDiv.next();
                nextDiv.show();
            }
        });
});

html:

<div id="wizard">
   <div> any content you want <div>1</div></div>
   <div> any content you want 2</div>
   <div> any content you want 3</div>
   <div> any content you want 4</div>
</div>

you can then place the wizard div wherever you want on the page. 

note: if sub elements break the divs, then you did not balance them (bad markup), so the other divs are children rather than siblings

Answer 2

User-1641868886 posted

Bruce, thanks for the suggestion. I made a little progress. I tried moving the buttons outside of the <section> tag and now it works fine. Problem is, the reason I have these tags is for css--formatting. Specifically, the "panel" class is giving me some margins, padding, etc. I'll need to figure out a way to put some padding around the button(s) without making them part of a child element.

Thanks again.

RC

Answer 3

User839733648 posted

Hi ReidMelSam,

According to your description, I could not reproduce your issue successfully.

I've added another div to test and when I click the button it will work no matter adding the section or not.

If possible, please provide more detailed codes so that it will be easier for us to help with you.

Besides, to achieve the wizard result, I suggest that you could use one plugin named jquery steps to achieve your requirement easily.

JQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces.

This plugin groups content into sections for a more structured and orderly page view. 

For more, you could refer to : http://www.jquery-steps.com/GettingStarted

Best Regards,

Jenifer

Answer 4

User-1641868886 posted

Thanks Jenifer. As I mentioned to Bruce below, I solved the problem of the "Next" and "Previous" buttons malfunctions by removing them from the <section> tag, as the JQuery expects them to work from within the "parent" <div> tag. Not sure why it would matter that the buttons reside in a <span> or a <section> or wherever, but in practice it does affect performance if the buttons are not in the root <div>.

Thanks again.