Single page app reload

Question

I am writing a single page app with several divs that have the attribute data-roll="page" . Pushing buttons fires ajax queries and the user is redirected to divs down the document like this

 <body> 

<div data-role="page" id="menu">
//bunch of nav buttons like <a href="#faculty">
</div>
<div data-role="page" id="faculty" data-theme="b">
//dynamicly loaded list of faculty
</div>

and so on.

I want to return to the menu div on refresh but no amount of scrolling seems to work. Here is my JS with two attempts at getting back to the menu page on page load.

document.ready = init;
function init(){

    var button = $('#facultyButton')
        ,facList = $('#facultyList')
        ,search = $('#facSearch')
        ,monikerBox = $('.monikerBox')
        ,events = $('#events')
        ,ajaxString = "http://stage.webscope.com/veith/dev/ajax.pl?"
        ,html = "";

    //executed on init
    $('html').scrollTop(0);

//events

    $(window).on('load',function(){
        $('html').scrollTop(0);
    });
    button.click(function(){
        var value = "a";
        search.html( "" );
        facultyAjax(value);
    });

I also tried window.location= menu url (home) in various functions with disastrous results!

Answer 1

Set the window.location you want the user to view with the location object on the load event.

I put this in the html.

<body onload="location.href='#menu'">

Single page app reload

Question

1 answers

solution1
1 2014-04-12 14:52:48

Single page app reload

Question

1 answers

solution1 1 2014-04-12 14:52:48

solution1
1 2014-04-12 14:52:48