locked
Opening another page with passing information.

    Question

  • Right I am building an app that gest its data from a web service.

    http://prntscr.com/gp8m5

    Now at the moment that pages just link to an webpage on the internet.

    And what I want to do is open the information on that page in the app.

    The site has an xml api already set up but when they click that link how do I get it to send the ID of that Roller Coaster / Theme Park to the next page.

    Could I set the link to something like rollercoaster.html?id=3 ? they how would I get the JavaScript file to get that id That's really all I need to do is get the JavaScript to see the ID then I am sorted.

    Here my code so far,

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Roller Coaster Mad</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>
    
        <!-- Hello_World references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <!-- now need to get the javascript files for theme park/ roller Coasters and news. -->
        <script src="/js/getData.js"></script>
        <!--<script src="/js/getRC.js"></script>-->
        <!--<script src="/js/getTP.js"></script>-->
    </head>
    <body>
        <div id="mainContent"> 
            <header id="header" aria-lable="Header Content" role="banner">
            	<h1 class="titlearea win-type-ellipsis"><span class="pagetitle">Roller Coaster Mad</span>
            	</h1>
            </header>
            <section id="section" aria-label="Main content" role="main">
                <div id="rollerCoasters" class="subsection" aria-label="Roller Coaster">
                    <h2 class="group-title" role="heading">
                        Roller Coasters
                    </h2>
                    <div id="rcOutput" class="groupInformation">
    					
                    </div>
                </div>
                <div id="themeParks" class="subsection" aria-label="Theme Parks">
                    <h2 class="group-title" role="heading">
                        Theme Parks
                    </h2>
                    <div id="tpOutput" class="groupInformation">
    					
                    </div>
                </div>
    			<div id="news" class="subsection" aria-label="News">
    				<h2 class="group-title" role="heading">
    					News
    				</h2>
    			</div>
            </section>
        </div>
    </body>
    </html>
    

    Javascript

    //Get the 
    (function () {
        "use strict";
    
        var app = WinJS.Application;
    
        // This function responds to all application activations.
        app.onactivated = function (eventObject) {
            if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                // TODO: Initialize your application here.
                WinJS.UI.processAll();
                loadThemeParkFeed();
                loadRollerCoasterFeed();
                
            }
        };
    
        function loadRollerCoasterFeed() {
    
            document.getElementById("rcOutput").innerHTML = "";
            WinJS.xhr({ url: "http://rollercoastermad.com/test/xmldata/rollercoaster.xml" }).then(
                parseRollerCoasterFeed, errorRollerCoasterFeed
                );
        }
    
        function loadThemeParkFeed() {
    
            document.getElementById("tpOutput").innerHTML = "";
            WinJS.xhr({ url: "http://rollercoastermad.com/test/xmldata/themepark.xml" }).then(
                parseloadThemeParkFeed, errorloadThemeParkFeed
                );
        }
    
        function parseRollerCoasterFeed(result) {
    
            var outputArea = document.getElementById("rcOutput");
            var xml = result.responseXML;
    
            if (xml) {
                var items = xml.querySelectorAll("rollercoasters > item");
                if (items) {
                    var length = Math.min(10, items.length);
                    for (var i = 0; i < length; i++) {
                        var link = document.createElement("a");
                        var newLine = document.createElement("br")
                        link.setAttribute("href", items[i].querySelector("Link").textContent);
                        link.innerText = items[i].querySelector("Name").textContent;
                        outputArea.appendChild(link);
                        outputArea.appendChild(newLine);
                    }
                } else {
                    outputArea.innerHTML = "There are no items available at this time";
                }
            } else {
                outputArea.innerHTML =
                    "Unable to retrieve data at this time. Status code: " + statusCode;
            }
        }
    
        function parseloadThemeParkFeed(result) {
    
            var outputArea = document.getElementById("tpOutput");
            var xml = result.responseXML;
    
            if (xml) {
                var items = xml.querySelectorAll("themeparks > item");
                if (items) {
                    var length = Math.min(10, items.length);
                    for (var i = 0; i < length; i++) {
                        var link = document.createElement("a");
                        var newLine = document.createElement("br")
                        link.setAttribute("href", items[i].querySelector("Link").textContent);
                        link.innerText = items[i].querySelector("Name").textContent;
                        outputArea.appendChild(link);
                        outputArea.appendChild(newLine);
                    }
                } else {
                    outputArea.innerHTML = "There are no items available at this time";
                }
            } else {
                outputArea.innerHTML =
                    "Unable to retrieve data at this time. Status code: " + statusCode;
            }
        }
    
        function errorRollerCoasterFeed(result) {
    
            var statusCode = result.status;
            var outputArea = document.getElementById("rcOutput");
            outputArea.innerHTML = "Unable to retrieve data at this time. Status code: " + statusCode;
        }
    
        function errorloadThemeParkFeed(result) {
    
            var statusCode = result.status;
            var outputArea = document.getElementById("tpOutput");
            outputArea.innerHTML = "Unable to retrieve data at this time. Status code: " + statusCode;
        }
    
        app.start();
    })();

    Many Thanks

    Ryan Bowden

    Wednesday, October 3, 2012 2:31 PM

All replies

  • Hi Ryan,

    I am not sure if I understand quite what you are asking, so I will just try to rephrase what I think you mean.

    You want to set up an app with a "Single Page Navigation" Model, and you want to pass information from one page to the next, when the user selects either a rollercoaster or a theme park.

    I had a look at the XML that is generated and it seems to contain more Info than you are storing. I would recommend, that you set up an Array to hold all your downloaded data. This would involve creating an object for each rollercoaster and each theme park you parse, that contains all the info.

    The object could look like this:

    var rollerCoaster = {
     id: items[i].querySelector("ID").textContent,
     name: items[i].querySelector("Name").textContent,
     themeParkID: items[i].querySelector("ThemeParkID").textContent,
     about: items[i].querySelector("About").textContent,
     type: items[i].querySelector("Type").textContent,
     link: items[i].querySelector("Link").textContent
    }

    That way you wont have to re-download any of that info on the next page.

    You can pass this information to the next page with the following code:

    WinJS.Navigation.navigate('/rollerCoasterDetails.html', { rollerCoaster: rollerCoaster });

    That assumes you have the HTML page "rollerCoasterDetails.html" set up in your project.

    I suggest you look at how the templates handle this type of navigation to get a feel for it.

    You could also check out : http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx

    It gives you a good summary of the Navigation in Windows 8 apps.

    Cheers,

    Censored


    • Edited by CensoredUser Wednesday, October 3, 2012 5:05 PM typo
    • Marked as answer by Ryan Bowden Thursday, October 4, 2012 10:26 AM
    • Unmarked as answer by Ryan Bowden Thursday, October 4, 2012 10:26 AM
    Wednesday, October 3, 2012 5:04 PM
  • Thank you, yes that's what I want to do but as you can see I have all the code wrong for doing this I think.

    How would I do this putting the xml in an array, See this is what I don't understand and struggling with.

    Is it possible you could write a bit of the code or send me a sample of how to do this with just xml data as I can't find one and really struggling with it.

    That sample you sent me gave me an insight on sending the data.

    But its when I get this xml data downloaded where all the problems are coming from with parsing it and then displaying it in a metro way.

    Ryan Bowden

    Thursday, October 4, 2012 10:31 AM