locked
How to pass value from one page to another in Windows 8 App

    Question

  • Hello

    Can anybody please tell me how do i pass values from one page to another in Windows store app using HTML5 and css3.

    I am trying by using following code

    (function () {
        "use strict";
    
        function buttonClickHandler(e) {
            // Store the data in session.
            WinJS.Application.sessionState.Name = document.getElementById("txtName").value;
            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;
            roamingSettings.values["userName"] = document.getElementById("txtName").value;
            var composite = new Windows.Storage.ApplicationDataCompositeValue();
            composite["TheUserName"] = document.getElementById("txtName").value;;
    
    
            roamingSettings.values["compositeSettingLoginStuff"] = composite;
            showPage("/page2.html");
        };
    
        WinJS.UI.Pages.define("/default.html",
        {
            ready: function (element, options) {
                document.getElementById("btnLogin").addEventListener("click", buttonClickHandler, false);
            }
        });
    
    
    })();

    But code send a null reference exception where txtName and btnLogin both exists in HTML page..

    Thanks.

    Sajid

    Saturday, April 12, 2014 7:03 PM

Answers

  • Hi SajiD,

    You have to validate following things if you want to fix the code, I've not see the whole code so I cannot give a solution, but there are some possibilities I will list as below:

    1, set a breakpoint somewhere in your code to see if the data from HTML page can be successful read to JS.

    2, use LocalSettings | localSettings property instead of roaming setting to see if still cannot get the value.

    var applicationData = Windows.Storage.ApplicationData.current;
    
    var localSettings = applicationData.localSettings;
    
    // Create a simple setting
    
    localSettings.values["exampleSetting"] = "Hello Windows";
    
    // Read data from a simple setting
    
    var value = localSettings.values["exampleSetting"];
            
    if (!value)
    {
        // No data
    }
    else
    {
        // Access data in value
    }
    
    // Delete a simple setting
    
    localSettings.values.remove("exampleSetting");
    
    

    3, if you are using the navigation pattern in your project, probably set the initialState on navigate function is even better, you can read the data from option in ready.

    4, you can also try the temp object to write the data to txt file for ensuring that the data is successfully recorded.

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, April 14, 2014 5:42 AM
    Moderator
  • It would be easier to implement this if you start with the Navigation template, and then add your second page by adding a Page Control VS item template (right click new folder in Solution Explorer, select Add > New > Page Control). Then to pass data from one page to another, include the data that you want to pass in your WinJS.Navigation.navigate() call. For example, from Grid template code:

            _itemInvoked: function (args) { 
                var item = this._items.getAt(args.detail.itemIndex); 
                WinJS.Navigation.navigate("/pages/item/item.html"{ item: Data.getItemReference(item) }); 
            } 

    In your pre-defined ready() function in the new page, you can access the passed in data that is stored in the "options" input parameter.


    Thursday, April 17, 2014 6:17 PM

All replies

  • Hi SajiD,

    You have to validate following things if you want to fix the code, I've not see the whole code so I cannot give a solution, but there are some possibilities I will list as below:

    1, set a breakpoint somewhere in your code to see if the data from HTML page can be successful read to JS.

    2, use LocalSettings | localSettings property instead of roaming setting to see if still cannot get the value.

    var applicationData = Windows.Storage.ApplicationData.current;
    
    var localSettings = applicationData.localSettings;
    
    // Create a simple setting
    
    localSettings.values["exampleSetting"] = "Hello Windows";
    
    // Read data from a simple setting
    
    var value = localSettings.values["exampleSetting"];
            
    if (!value)
    {
        // No data
    }
    else
    {
        // Access data in value
    }
    
    // Delete a simple setting
    
    localSettings.values.remove("exampleSetting");
    
    

    3, if you are using the navigation pattern in your project, probably set the initialState on navigate function is even better, you can read the data from option in ready.

    4, you can also try the temp object to write the data to txt file for ensuring that the data is successfully recorded.

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, April 14, 2014 5:42 AM
    Moderator
  • It would be easier to implement this if you start with the Navigation template, and then add your second page by adding a Page Control VS item template (right click new folder in Solution Explorer, select Add > New > Page Control). Then to pass data from one page to another, include the data that you want to pass in your WinJS.Navigation.navigate() call. For example, from Grid template code:

            _itemInvoked: function (args) { 
                var item = this._items.getAt(args.detail.itemIndex); 
                WinJS.Navigation.navigate("/pages/item/item.html"{ item: Data.getItemReference(item) }); 
            } 

    In your pre-defined ready() function in the new page, you can access the passed in data that is stored in the "options" input parameter.


    Thursday, April 17, 2014 6:17 PM