javascripthtmlmobileswipejqmobi

JQmobi - Dynamically switch pages


I have a piece of my JQMobi code here. Problem is that it doesn't switch pages dynamically:

<div title='Whatever' id="main" class="panel" selected="true" data-tab="navbar_home" data-footer="none">
        <div class="swipe_area">
            <!-- nothing here, just for swiping to not disturb other elements -->
            <- Swipe me ->
        </div>
        <script>
            var init_swipe = function () {
            $(".swipe_area").swipeListener({
                    vthreshold: 30,
                    hthreshold: 80,
                    callBack: function (dir) {
                        if(dir.left) {
                            window.location.href = "#menulink3";
                            alert("go to menulink3");
                        }
                        else if(dir.right) {
                            window.location.href = "#menulink2";
                            alert("go to menulink2");
                        }
                    }
                });
            };
            window.addEventListener("load", init_swipe, false);
        </script>
</div>
<div title='Whatever' id="menulink2" class="panel" selected="true" data-tab="navbar_home" data-footer="none">
    content of menulink2
</div>
<div title='Whatever' id="menulink3" class="panel" selected="true" data-tab="navbar_home" data-footer="none">
    content of menulink3
</div>

The url does change in browser and it gives an alert (just to be sure), but there is no switch in pages. Also, normal a href links work just fine. Is there a jqmobi function I have to call to make it refresh or something?

Thanks in advance


Solution

  • You don't change the window.location to navigate. Look at $.ui.loadContentDiv to do it programatically.