locked
About back navigation

    Question

  • Hi All,

    I have 2 page, Restaurant.html and MenuList.html

    I m using ARI to get the data Ex;restaurants in perticular area and i m displaying them in the form of tiles in Restaurant.html. When i click on tile(means one restaurant) then it ll show Menu Items of that restaurant in the next page, MenuList.html.

    If i navigate back to restaurant page from MenuList page then content is loading again but problem is if i select different restaurant then its showing the previous MenuList.

    How this problem can be resolved??

    I m using below code,

    In Restaurant.js

    functuion abc(args){
    
       args.preventDefault();
       var link = args.target;
    
    WinJS.Navigation.navigate("/MenuList.html");
    
    }




    Shilpa Monocept Windows store apps


    • Edited by WinNRock Tuesday, January 29, 2013 12:49 PM
    Tuesday, January 29, 2013 12:45 PM

Answers

  • Hi Shilpa_A_S,

    When you use WinJS.Navigation.navigate method, you can supply some custom options data through the second (optional) parameter. Such options can let you indicate the expected data to be loaded in the target page.

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

    #Part 3: PageControl objects and navigation (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/jj663505.aspx

    For example, I can use the following code to navigate to the menulist.html page and pass it an option object with a "key" property (I use the current time value, you can use the id or other identity of the selected restrurant tile).


    WinJS.Navigation.navigate(
                        "/pages/menulist/menulist.html",
                        { key: new Date().getTime() }
                        );



    And then, in the menulist page's "ready" event handler, I can parse the option object and get the key property and determine what to show on the page. You can extend such code logic to much more complicated dynamic UI composition scenario.


     WinJS.UI.Pages.define("/pages/menulist/menulist.html", {
            // 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.
    
                var key = options.key;
    
                element.querySelector("#pMessage").innerText = "Show data for item whose key = " + key;
    
    
            },
    
            unload: function () {
                // TODO: Respond to navigations away from this page.
            },
    
            updateLayout: function (element, viewState, lastViewState) {
                /// <param name="element" domElement="true" />
    
                // TODO: Respond to changes in viewState.
            }
        });
    

     


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Monday, February 4, 2013 2:28 AM
    Wednesday, January 30, 2013 2:45 AM
    Moderator