-1

I am using jquery mobile to open panel widget with a list in it.

in html document i have 3 internal pages, index, holzart, qualitat. after loading the page and selecting a ex. holzart the internal page won't show up. the same things happen with the other page. also what i noticed is that i cannot sometimes open the hole panel. i am watching the chrome debug window and there are no errors in it. i am appreciate any suggestions. Here is the full code:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="lib/jquery.mobile-1.4.5.min.css" />
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>


<!--index page-->
<div data-role="page" id="index" data-title="Start" data-url="index">

    <!-- header -->
    <div data-role="header" data-position="fixed">
        <h1>Lager</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div>
    <!-- /header -->

    <!-- content -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <h1>...</h1>
    </div>
    <!-- /content -->

    <!-- /footer -->
    <div data-role="footer" data-position="fixed">
        <h4>Lager</h4>
    </div>
    <!-- /footer -->



<!--holzart page-->
<div data-role="page" id="#holzart" data-title="Holzart">
    <!-- /header -->
    <div data-role="header" data-position="fixed">
        <h1>Lager</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div><!-- /header -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <!--<script src="js/holzart.js"></script>-->
        <h1>Neue Holzart eingeben - Alle holzarten ansehen</h1>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

    <table width="100%" border="0" align="center">
        <tr>
            <td colspan="2" align="left" valign="middle">
                <form id="form_holzart" action="php/holzart_ins.php" method="post">
                    <label for="holzart">Neue Holzart eingeben:</label>
                    <input type="text" data-clear-btn="true" name="holzart_txt" id="holzart_txt">
                </form>
            </td>
        </tr>
        <tr>
            <td align="center"  width="50%">
                <form>
                    <input type="button" id="speichern" name="speichern" value="Speichern">
                </form>
            </td>
            <td align="center"  width="50%">
                <form>
                    <input type="button" id="loschen" name="loschen" value="Eingabe löschen">
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left" valign="middle"><div id="message"></div></td>
        </tr>
    </table>

    <!--list populated from js and php-->
    <div>
        <ul id="holzart_h" style="list-style-type:none"></ul>
    </div>
    <!--list populated from js and php-->

    <!-- /footer -->
    <div data-role="footer" data-position="fixed">
        <h4>Lager</h4>
    </div>
    <!-- /footer -->

</div>
<!--end of holzart page  -->

<!--qualitat page-->
<div data-role="page" id="#qualitat" data-title="Qualität">
    <!-- /header -->
    <div data-role="header" data-position="fixed">
        <h1>Lager</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div><!-- /header -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <!--<script src="js/holzart.js"></script>-->
        <h1>Neue Qualität eingeben - Alle Qualiteten ansehen</h1>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

    <table width="100%" border="0" align="center">
        <tr>
            <td colspan="2" align="left" valign="middle">
                <form id="form_qualitat" action="php/qualitat_ins.php" method="post">
                    <label for="qualitat">Neue Qualität eingeben:</label>
                    <input type="text" data-clear-btn="true" name="qualitat_txt" id="qualitat_txt">
                </form>
            </td>
        </tr>
        <tr>
            <td align="center"  width="50%">
                <form>
                    <input type="button" id="speichern_q" name="speichern_q" value="Speichern">
                </form>
            </td>
            <td align="center"  width="50%">
                <form>
                    <input type="button" id="loschen_q" name="loschen_q" value="Eingabe löschen">
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left" valign="middle"><div id="message_q"></div></td>
        </tr>
    </table>

    <!--list populated from js and php-->
    <div>
        <ul id="qualitat_q" style="list-style-type:none"></ul>
    </div>
    <!--list populated from js and php-->

    <!-- /footer -->
    <div data-role="footer" data-position="fixed">
        <h4>Lager</h4>
    </div>
    <!-- /footer -->

</div>
<!--end of qualitat page  -->


</div>
<!--end of index page  -->


    <!-- /panel -->
    <div data-role="panel" data-position-fixed="true" data-display="overlay" data-theme="b" id="nav-panel">
        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Schließen</a></li>
            <li><a href="#index">Zum start</a></li>
            <li><a href="#holzart">Holzart</a></li>
            <li><a href="#starke">Stärke</a></li>
            <li><a href="#qualitat">Qualität</a></li>
            <li><a href="#lange">Länge</a></li>
            <li><a href="#reihe">Reihe</a></li>
            <li><a href="#platz">Platz</a></li>
            <li><a href="#strasse">Straße</a></li>
            <li><a href="#seite">Seite</a></li>
            <li><a href="#grosse_des_pakets">Große des pakets</a></li>
            <li><a href="#neuer_paket_anlegen">Neuer paket anlegen</a></li>
            <li><a href="#suchen">Suchen</a></li>
            <li><a href="#menge_nach">Menge nach...</a></li>
        </ul>
    </div>
    <!-- /panel --> 






</body>
</html>
2

1 Answer 1

1

You need to put the panel at the top of the page.

Initialize the panel in script:

$(function () {
    $("body>[data-role='panel']").panel().find("ul").listview();
});

Remove the "#" from the page ids in the markup

<div data-role="page" id="#holzart" data-title="Holzart">

should be

<div data-role="page" id="holzart" data-title="Holzart">

Add closing </DIV> to your index page and the content divs within the pages. Right now you have the other 2 pages within index.

DEMO

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.