Replacing content with fragments , why do custom buttons dissappear in default.html when fragment loaded?


  • Hi,

    There are several things I still do not understand after reading the documentation on how to load fragments and adding navigation. I am using the SplitPage template.

    1.The documentation in http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx#enabling_backward_and_forward_navigation

    gives an example of how to use buttons (to navigate back/forwarrd) and links (to load a fragment) like this:

        <button id="backButton" class="win-backbutton"></button>
        <button id="forwardButton">Next page</button>
            <li><a href="fragments/fragment1.html">fragment1</a></li>
            <li><a href="fragments/fragment2.html">fragment2</a></li>
            <li><a href="fragments/fragment3.html">fragment3</a></li>
        <div id="content">

    In my code, I want the buttons to be "below" the "content" (div with id="content"), but the buttons never appear after the "fragment" of a new page is loaded into the "content" div using the innerHTML property. So does this mean that it is only possible to have the buttons above the 'content" but not below it?

    2.  Also, the documentation says that to go forward, one uses the following in the handler of the forward button:

    function forwardButtonClickEventHandler(e) {
        if (WinJS.Navigation.canGoForward) {

    But, how can the WinJS.Navigation.forward() know where to go, what does it mean to go forward in this case, if the destination fragment (ie html)  has not been specified?  I guess, I am not understanding how your navigation stack works.  I can understand that after "navigate" call, the destination fragment is pushed to the stack, and I understand that calling WinJS.Navigation.back() will pop the fragment and load it, but how does forward work?

    Also, I find it really awkward that in the SplitPage template, a 'back' arrow that is displayed when the SplitPage.html fragment is loaded will take you to a page one has NEVER been before, namely , the category.html page.  I understand that to load the SplitPage.html page the "navigate" method was called and thus the WinJS.Navigation.canGoBack() method will return true, anad then the first element of the navigation stack is loaded with the categoryPage.html (WinJS.Navigation.history.backStack[0] = { location: 'html/categoryPage.html'} , this is a line in the fragmentload() method of the splitPage.js.  And this works, but it seems to me that this is more of a hack, of rewritting the history of the stack to go to a new page, it seems really odd. 


    Friday, December 09, 2011 9:25 PM


  • Hello Malena,

    You can place content where ever you want.  If they are disappearing you are not implementing something correct in your code.  Perhaps you are forcing them off of the display surface? 

    To place buttons under your content, you simply place buttons under the content div.  You would probably best be served by using CSS to ensure it is at the bottom or use a footer so that it is always in the same place.

    When you load the fragment (if your code is correct) the fragment gets loaded in the content div and does not affect the default.html content that is outside of the 'content' div

    That said, if you are using this to try and place navigation buttons at the bottom please reconsider, they belong up at the top!

    As far as your other questions:

    You cannot go forward unless you have navigated backwards in the stack (think of how Internet Explorer behaves)

    You should not go back unless you have gone forward at least once.  I do not think the split page template is doing the right thing by having the Back button enabled the first time you open the app.  I think a navigation to home would be the only way to go back at this point (using the app bar or perhaps providing a Home button there).


    Jeff Sanders (MSFT)
    Monday, December 12, 2011 3:33 PM