Why does adding jQuery Mobile cause HTML to vanish?

Question

I've got a simple set of drop down choices modified from this SO question. If I run it in jQuery (w/o JQM), it functions normally, when I add jQuery Mobile, the HTML only flashes on the page then it goes blank and I can't figure out why. If I enable jQuery Mobile and comment out the last line of the JS:

showTab(select.val());

It will display all the choices available, instead of the desired result of just a single choice. In the fiddle below, select jQuery Mobile, and run it, the HTML just disappears after flashing for a sec.

The working fiddle below shows it in the working state I want where only the choice selected by the dropdown is shown after the selection is made. But I want jQuery Mobile working as well. Ignore the submit button, it's not hooked up to anything yet.

Working Fiddle

The HTML:

<form>
    <p>
         <h2>Select option to create PCBID:</h2>

        <select id="dropdown" name="dropdown">
            <option value="pcbids" selected="selected">PCBID Single</option>
            <option value="pcbidr">PCBID Range</option>
            <option value="pcbidq">PCBID Quantity</option>
            <option value="pcbidl">PCBID List</option>
        </select>
    </p>
</form>
<body>
    <div id="pcbids">
        <label>PCBID Single:</label>
        <input type="number" placeholder="12345" title="Just enter a single PCBID number" />
    </div>
    <div id="pcbidl">
        <label>PCBID List:</label>
        <input type="textarea" placeholder="12345,70237,8901" title="Enter a comma separated list of PCBID numbers you're like to create" />
    </div>
    <div id="pcbidr">
        <label>PCBID Range:</label>
        <input type="text" placeholder="12345-12400" title="Enter a range separated by a dash (-) and no spaces" />
    </div>
    <div id="pcbidq">
        <label>PCBID Quantity:</label>
        <input type="text" placeholder="12345:100" title="Enter a starting PCBID number followed by a colon (:), followed by the sequential number you want to create" />
    </div>
    <label for="submit"></label>
    <input type="button" id="create_button" value="Submit" />

The JS:

var select = $('#dropdown');
function showTab(name) {
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}

select.change(function () {
showTab($(this).val());
});
//comment out this last line after selecting jQuery Mobile 1.3.1 under Frameworks & Extensions above
showTab(select.val());

I've tried loading the code in a $(document.ready(function(){...}); construct, as well as $(window).load(function() {...}); with the second one I can get the entire list of choices to show up with JQM loaded, but as soon as I choose one, the whole page disappears again.

What am I missing? If it makes any difference, this is all in Chrome. For reference, here's the original fiddle I modified.

score 1 · Accepted Answer · answered Jan 28 '14 at 00:11

1

jQuery Mobile wraps each input and button in a div which holds all styles.

When you use $('div').not(name).hide();, you hide each and every div in the page, including input wrapper. However, when using .show(), you show parent div, but all elements are hidden still. Instead, hide div that starts with pcbid rather than div.

$('[id^=pcbid]').not(name).hide();
$(name).show();

Demo

answered Jan 28 '14 at 00:11

Omar

32,302
9
69
112

Excellent! Thanks for the quick answer and the education. I didn't realize that JQM wraps input & button in divs. Thanks for the example as well. – delliottg Jan 28 '14 at 16:06

Why does adding jQuery Mobile cause HTML to vanish?

1 Answers1