JQuery Mobile - Footer Navigation doesn't Work

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

Question

i'm on PhoneGap project. I use jquery mobile framework.

I have some problems about navigation here.

I have a home page which comes to screen first. After i choose a sub menu from my panel (i didn't used jqm panel, created myself),another page comes and this page has navigation on its own footer. I click footer navigation and it works great but, when i click my 4th button, it doesnt navigate me to the related page.

Here is the sample code.

    <!doctype html>
<html>
    <head> 
        <title>Fanatik Score</title>
        <meta charset="utf-8">
        <meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />   
        <link rel="stylesheet" href="css/jquery.mobile.min.css" />
        <link rel="stylesheet" href="css/main.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <style type="text/css">
            .ui-page { -webkit-backface-visibility: hidden; }
        </style>
    </head>

    <body> 

        <div id="menu">
            <h3>Menu</h3>
            <ul data-role="listview" data-theme="d">
                <li class="active"><a href="#home" class="contentLink" data-ajax="false">C</a></li>
                <li><a href="#football" class="contentLink" data-ajax="false">F </a></li>
                <li><a href="#basketball" class="contentLink" data-ajax="false">B </a></li>
                <li><a href="#volleyball" class="contentLink" data-ajax="false">V </a></li>
                <li><a href="#handball" class="contentLink" data-ajax="false">H </a></li>
            </ul>
        </div>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="home">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>Canlı Skor</h1>
            </div><!-- /header -->

            <div data-role="content">

                <div class="article">
                    <div>
                        <ul>
                        </ul>
                    </div>
                 </div><!-- /article -->

            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
                <h1>Fanatik Score</h1>  
            </div><!-- /footer -->

        </div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="football">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>Futbol</h1>
            </div><!-- /header -->

            <div data-role="content">

                <div class="article">
                    <div>
                        <ul id="live">
                        </ul>
                    </div>
                 </div><!-- /article -->

            </div><!-- /content -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li class="active"><a href="#football" data-ajax="false">live</a></li>
                        <li><a href="#overfootball" data-ajax="false">over</a></li>
                        <li><a href="#tablefootball" data-ajax="false">tables</a></li>
                        <li><a href="#fixturefootball" data-ajax="false">fixture</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="overfootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>Futbol</h1>
            </div><!-- /header -->

            <div data-role="content">

                <div class="article">
                    <div>
                        <ul id="over">
                        </ul>
                    </div>
                 </div><!-- /article -->

            </div><!-- /content -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football" data-ajax="false">live</a></li>
                        <li class="active"><a href="#overfootball" data-ajax="false">over</a></li>
                        <li><a href="#tablefootball" data-ajax="false">tables</a></li>
                        <li><a href="#fixturefootball" data-ajax="false">fixture</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="tablefootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
            </div><!-- /header -->

            <div data-role="content">

            <div class="article">
                <div>
                    <table id="tables" class="imagetable">
                    </table>
                </div>
            </div><!-- /article -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football" data-ajax="false">live</a></li>
                        <li><a href="#overfootball" data-ajax="false">over</a></li>
                        <li class="active"><a href="#tablefootball" data-ajax="false">tables</a></li>
                        <li><a href="#fixturefootball" data-ajax="false">fixture</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->        
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="fixturefootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>Futbol</h1>
            </div><!-- /header -->

            <div data-role="content">

            <div class="article">
                <h1>Fixturesssss</h1>
                <div>
                    fixturerrrrr
                </div>
            </div><!-- /article -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football" data-ajax="false">live</a></li>
                        <li><a href="#overfootball" data-ajax="false">over</a></li>
                        <li><a href="#tablefootball" data-ajax="false">tables</a></li>
                        <li class="active"><a href="#fixturefootball" data-ajax="false">fixture</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->        
</body>
</html>

i couldnt navigate to my "fixturefootball" page with my footer navigation.

what am i missing ?

thanks.

Was it helpful?

Solution

You can fix it if you move your last page to be a next to the last.

Working example: ....... removed .......

<!-------------------------------------------------------------------------------------------------------------------------------------------------------->

        <div data-role="page" class="pages" id="fixturefootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>F</h1>
            </div><!-- /header -->

            <div data-role="content">

                <div class="article">
                    <h2>DOESNT WORK - DOESNT NAVIGATEEEE !!</h2>
                </div><!-- /article -->

            </div><!-- /content -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football">C</a></li>
                        <li><a href="#overfootball">B</a></li>
                        <li><a href="#tablefootball">P</a></li>
                        <li class="active"><a href="#fixturefootball">F</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->        

<!-------------------------------------------------------------------------------------------------------------------------------------------------------->        

        <div data-role="page" class="pages" id="tablefootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>F</h1>
            </div><!-- /header -->

            <div data-role="content">

            <div class="article">
                <h1>L</h1>
                <div>
                    <table id="tables" class="imagetable">
                    </table>
                </div>
            </div><!-- /article -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football">C</a></li>
                        <li><a href="#overfootball">B</a></li>
                        <li class="active"><a href="#tablefootball">P</a></li>
                        <li><a href="#fixturefootball">F</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->        
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top