Using jQuery Mobile with jQuery Steps

StackOverflow https://stackoverflow.com/questions/21518853

Question

I am looking to create the front-end for an application form that will display & navigate as a multi-step wizard.

I have built a single, vertical HTML page using jQuery Mobile 1.4.0 and have gotten that working quite nicely.

I then added jQuery Steps 1.0.4 to integrate the wizard aspect and have maintained the majority of the look-and-feel. Unfortunately the jQuery Mobile functionality for most of the form fields has stopped working. For example sliders don't drag, textboxes don't highlight. There are no JS errors, and the fields are initially appearing correctly, just not behaving as they should.

I am wondering if anyone has worked with these two libraries before, has found a work-around, or has any advise on how to approach integrating the two libraries.

<body>
<div id="main">
    <form id="" action="landing.html">
        <div id="wizard">
            <h1>Step 2 - Heading</h1>
            <div id="step_2">
                <section>
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <legend>Radio Options</legend>
                        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
                        <label for="radio-choice-1">Option 1</label>
                        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
                        <label for="radio-choice-2">Option 2</label>
                        <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
                        <label for="radio-choice-3">Option 3</label>
                    </fieldset>
                </section>
            </div>
        </div>
    </form>
</div>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<script src="scripts/libs/jquery.steps-1.0.4.js"></script>
<script src="scripts/initiate.wizard.js"></script>

Was it helpful?

Solution

I discovered the answer. As per the author of jQuery Step's issue resolution:

https://github.com/rstaib/jquery-steps/issues/31

I had to delay the auto-initiation of jQuery Mobile until after jQuery Steps has done everything it needs to.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>window.jQuery || document.write('<script src="scripts/libs/jquery-1.10.2.min.js"><\/script>')</script>
<script src="scripts/libs/jquery.steps-1.0.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script>jQuery.ui || document.write('<script src="scripts/libs/jquery-ui-1.10.4.min.js"><\/script>')</script>
<script>
    // delay jQuery Mobile initialisation to allow jQuery Steps initialise first
    $(document).on("mobileinit", function () {
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<script>$.mobile || document.write('<script src="scripts/libs/jquery.mobile-1.4.0.min.js"><\/script>')</script>
<script src="scripts/initiate.wizard.js"></script>
<script>
    // now the DOM should be ready to handle the jQuery Mobile initialisation
    $(document).ready(function () {
        $.mobile.initializePage();
    });
</script>
<script src="scripts/scripts.js"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top