why does my nav bar duplicate when navigating with .load()?

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

Pergunta

Im learning how to code my first mobile website using jquery mobile.

I have navigation bars in both the header and the footer of the page with 2 links each. Under that I have made divs with IDs that I would like to load into the #loadcontent div replacing the old content using the readied .load() functions, and they do, but afterwards duplicate navbars load on top of my old header and footers, crunching up the screen.

How can I prevent it from doing this?
See for yourself at skroovy.com/index2.html (intended for mobile browser)
Thanks!

<!DOCTYPE html>
<html> 
<head>  
    <meta charset="utf-8">
    <meta name="viewport" content="initial-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="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

    <link rel="stylesheet" href="css/skroovystyles.css">

    <title>Skroovy!</title>     
</head>


<body>
<script>
$(document).ready(function() {
    $('#topnav a').click(function() {
        var url=$(this).attr('href');
        $('#loadcontent').load(url);
        return false;
    });

    $('#btmnav a').click(function() {
        var url=$(this).attr('href');
        $('#loadcontent').load(url);
        return false;
    }); 
}); // end ready
</script>


<!-- Home (not logged in) -->
<div id="home" data-role="page">

 <div data-theme="a" data-role="header" data-position="fixed">
        <div id="topnav" data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#login" data-transition="fade" data-theme="" data-icon="star">
                        Log In
                    </a>
                </li>
                <li>
                    <a href="#entercode" data-transition="fade" data-theme="" data-icon="check">
                        Enter Code
                    </a>
                </li>
            </ul>
        </div>
 </div>

 <div data-role="content">
 <div id='loadcontent'>
    <div style=" text-align:center">
            <img style="width: 100%; height: px" src="images/Skroovy logo large.png">
        </div>
        <div style=" text-align:center">
            <img style="width: 100%; height: px" src="images/headerlogo.png">
        </div>
 </div>
 </div>

 <div data-theme="a" data-role="footer" data-position="fixed">
       <div data-role="navbar" data-iconpos="top" id='btmnav'>
            <ul>
                <li>
                    <a href="index2.html#about" data-icon="info">
                        About
                    </a>
                </li>
                <li>
                    <a href="#newuser" data-transition="fade" data-theme="" data-icon="plus">
                        New User
                    </a>
                </li>
            </ul>
        </div>
 </div>
</div>



<div id='login'>
    <br><br><br><br>
    <h3>Log In Page</h3>
                <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

<div id='entercode'>
    <br><br><br><br>
    <h3>Enter Code Page</h3>
                <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

<div id='about'>
    <br><br><br><br>
    <h3>Skroovy is the awesome stuff. You should really buy this Skrooviness now.</h3>        
        <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

<div id='newuser'>
    <br><br><br><br>
    <h3>New User Register Page</h3>
                <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

</body>
</html>
Foi útil?

Solução

Disregard the $.mobile.changePage(url) comment underneath your post; it is not useful.

Several Things:

  1. I recommend spending some time with jQuery.Mobile Documentation. There are a lot of quirks specific to jQueryMobile that you would not guess automatically.

  2. As the commenter stated (correctly), don't use $(document).ready() with jQueryMobile. It's not that it can't be used, it's just that it's not recommended, and you will likely encounter surprises if you do.

  3. What you want to use to initialize your code varies depending on what you are doing. Most likely you'll want to use $.mobile.pageInit.

    from the docs

    Description: Triggered on the page being initialized, after initialization occurs.

    jQuery( ".selector" ).on( "pageinit", function( event ) { ... } )

    We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

  4. If you are just trying to go to a different page on the click, you would be better off not adding any javascript, and just letting jQuery take care of the page handling. If it is dynamic, then you would use (as was suggested) $.mobile.changePage(url). To make it appear inline - in either case - you would use persistent footers and headers (again - see the docs).

  5. If you insist on doing it the way you have it (for whatever reason - there could be many), then you need to call preventDefault() when clicking on a link. Return false will not work reliably to prevent the default behavior, and given that jqueryMobile often involves many different elements when handling events, it's not a bad idea to use stopPropagation() as well. However, you'd be better off removing the anchors altogether and using something like data-ajax-href to represent the page jQuery is going to load. Any page you have a link to anywhere in your document, jQueryMobile will (unless specifically instructed not to) preload after the first pageInit. This can be good at times, not so much so at others.

Basically, I can't advise specific to your situation (more so anyway) without a clearer understanding of what you want to achieve, and code that closer conforms to the documented standards. Everything you could possibly want is in the docs, and they are considerably more readable than almost any other Javascript library API that I've ever seen. Check 'em out.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top