locked
JS Previous and Next Chapter Appbar Buttons in Grid App RRS feed

  • Question

  • I have previously asked this question but have not been able to get the javascript portion to work properly on my Grid app created from the standard VS template.

    As it is now, the buttons only navigate to the beginning of my data, which would be book 1 chapter 1 regardless of my position–say book 5 chapter 6.

    In plain terms, the code should be able to recognize what book and chapter the user is on and proceed to the next chapter or previous chapter when they hit the appbar buttons.

    The basics of the code I used are below. Ignore the missing portions as I have gotten the appbar buttons to respond when clicked. They just do not navigate to the correct locations meaning there is something wrong with the way it is accessing the current and next/previous indexes.

    (function () {
        "use strict";

        WinJS.Namespace.define("SelfNavPageUtils",
            {
                log: function (msg) {
                    MSApp.execUnsafeLocalFunction(function () {
                        document.getElementById('divMessage').innerHTML += "<br/>" + msg;
                    });
                }
            }
        );

    WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", { currentIndex:1, // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { // TODO: Initialize the page here. this.currentIndex = (options && options.index) ? options.index : 1; SelfNavPageUtils.log("Current Index: " + this.currentIndex); this.onPageLoad(); WinJS.Utilities.query('a').listen("click", function (evtInfo) { evtInfo.preventDefault(); WinJS.Navigation.navigate(evtInfo.target.href); }); }, unload: function () { this.onPageUnload(); }, onPageLoad:function () { document.getElementById('prevChapter').addEventListener("click", this.navigateToSelf.bind(this)); document.getElementById('nextChapter').addEventListener("click", this.navigateToSelf.bind(this)); }, onPageUnload: function () { document.getElementById('prevChapter').removeEventListener("click", this.navigateToSelf.bind(this)); document.getElementById('nextChapter').removeEventListener("click", this.navigateToSelf.bind(this)); }, navigateToSelf: function (){ var btn = event.srcElement; if (btn.id === 'prevChapter') { if(this.currentIndex<=1) return; WinJS.Navigation.navigate( "/pages/itemDetail/itemDetail.html", { index: this.currentIndex-1 } ); } else { WinJS.Navigation.navigate( "/pages/itemDetail/itemDetail.html", { index: this.currentIndex +1 } ); } } }); })();

    • Edited by jflintstone81 Friday, January 11, 2013 1:58 PM Unresolved
    Saturday, November 3, 2012 3:43 PM

All replies


  • Hi jflintstone81,

    From your description, I understand that you're using the Windows Store app javascript "Navigation App" project to develop a program which provides several book chapters for user to navigate through. And you want to use the AppBar command to let user choose to go to previous or next chapter via navigation, correct?

    The Navigation App project has provided you some predefined navigation classes under "WinJS.Navigation" namespace. And based on the code  you provide, you seems to use WinJS.Navigation.forward method to navigate between pages. Actually, the "back" or "forward" method will only works when there are already some records in the history stack (if user has previously go through several pages). If you want to directly go to a certain page (based on your application logic), you should use the WinJS.Navigation.navigate method.

    #WinJS.Navigation.navigate function
    http://msdn.microsoft.com/en-us/library/windows/apps/br229837.aspx

    And for your case, if the navigation should occur between book chapers, then you should define a separate page for each of the chapters. And at anytime, you can use WinJS.Navigation.location to determine the current page user is at and then determine which page shoud we navigate to (via WinJS.Navigation.navigate) when user press "Go Next" or "Go Previous" button on the AppBar (or other UI element).


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    Monday, November 5, 2012 5:59 AM
    Moderator
  • Thanks for the quick response. I figured I should have placed each chapter on a separate page but I have like 100 chapters and I followed the gridview template. In data.js, each chapter has a group and a corresponding key. 

     

    So using the #WinJS.Navigation.navigate function, is it possible to navigate to the next or previous key within the group listings or can this only work with a history stack? 

     

    I assumed that I could alter the following code to access the current position or chapter of the app and move to the next group.key in that list: 

     

    WinJS.Navigation.navigate("/pages/itemDetail/itemDetail.html", { groupKey: group.key }); 

     

    resulting in something like this: 

     

       function gotoPrev() { 
            var current = WinJS.Navigation.navigate(nav.state); 
            current: WinJS.Navigation.forward(-1).done; 
        }
    Monday, November 5, 2012 12:29 PM
  • Thanks for you reply jflintstone81,

    Yes, I think if there is no more than 10 chapters, it's ok to create a single page for each chapter. If there are 100+ chapters, that's definitely not a good idea:)

    I think you can just provide a single page for displaying the detailed information of each chapter. And whenever you want to move to a new chapter (either previous or next one or a specific chapter by chapter index), you just navigate to the chapter page itself , but supplying an additional navigation parameter to indicate which chapter should be displayed. Here is a simple test page I've created which include two buttons to trigger the previous/next navigation against the same page (I simply display the current index on the page, you can add much more code logic to display the proper chapter content based on the current index supplied in the navigation.


    #HTML code of the page

    <!DOCTYPE html>
    <html>
        <head>
            <title>Self Navigation page</title>
            <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/selfnav/selfnav.css" rel="stylesheet" />
        <script src="/pages/selfnav/selfnav.js"></script>
        </head>
        <body>
            <h1>This is the SelfNav page!</h1>
            <div id="divMessage" ></div>
            <hr />
            <h2>Navigate to Self</h2>
            <div>
                <button id="btnMoveNext" >Next One</button>
                <button id="btnMovePrev">Previous One</button>
    
            </div>
           
        </body>
    </html>
    


    #javascript of the page

    (function () {
        "use strict";
    
        WinJS.Namespace.define("SelfNavPageUtils",
            {
                log: function (msg) {
                    MSApp.execUnsafeLocalFunction(function () {
                        document.getElementById('divMessage').innerHTML += "<br/>" + msg;
                    });
                }
            }
        );
    
    
        WinJS.UI.Pages.define("/pages/selfnav/selfnav.html", {
    
            currentIndex:1,
    
    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
    
                this.currentIndex = (options && options.index) ? options.index : 1;
                SelfNavPageUtils.log("Current Index: " + this.currentIndex);
    
                this.onPageLoad();
    
                WinJS.Utilities.query('a').listen("click", function (evtInfo) {
                    evtInfo.preventDefault();
    
                    WinJS.Navigation.navigate(evtInfo.target.href);
                });
            },
    
            unload: function () {
                this.onPageUnload();
            },
    
    
            onPageLoad:function () {
    
                document.getElementById('btnMovePrev').addEventListener("click", this.navigateToSelf.bind(this));
                document.getElementById('btnMoveNext').addEventListener("click", this.navigateToSelf.bind(this));
            },
    
            onPageUnload: function () {
                document.getElementById('btnMovePrev').removeEventListener("click", this.navigateToSelf.bind(this));
                document.getElementById('btnMoveNext').removeEventListener("click", this.navigateToSelf.bind(this));
            },
    
            navigateToSelf: function (){
    
                var btn = event.srcElement;
    
         
                if (btn.id === 'btnMovePrev') {
    
                    if(this.currentIndex<=1) return;
    
                    WinJS.Navigation.navigate(
                        "/pages/selfnav/selfnav.html",
                        {
                            index: this.currentIndex-1
                        }
                    );
                } else {
    
                    WinJS.Navigation.navigate(
                        "/pages/selfnav/selfnav.html",
                        {
                            index: this.currentIndex +1
                        }
                    );
                }
    
            }
        });
    })();
    


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by Song Tian Tuesday, November 13, 2012 6:50 AM
    • Unmarked as answer by jflintstone81 Friday, January 11, 2013 1:55 PM
    Tuesday, November 6, 2012 2:27 AM
    Moderator
  • Thanks! I have not got it to work yet but I see how the coding process should go and should be able to figure it out.
    • Marked as answer by jflintstone81 Thursday, December 6, 2012 2:23 PM
    • Unmarked as answer by jflintstone81 Thursday, December 6, 2012 2:23 PM
    Thursday, December 6, 2012 2:23 PM