locked
Javascript function stops other one working.

    Question

  • Right here is my app.

    http://prntscr.com/g80gq

    Now when the app runs it goes and gets two xml files and then displays the information but when the roller coaster one run on its own it work's but when I do both only the last one for theme parks works.

    I am not sure how to get this to work correctly.

    Code default.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Hello_World</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/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>
    

    Here is my javascript file

    /js/getRC.js

    // default.js
    (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();
                loadRollerCoasterFeed();
            }
        };
    
        function loadRollerCoasterFeed() {
    
            document.getElementById("rcOutput").innerHTML = "";
            WinJS.xhr({ url: "http://rollercoastermad.com/test/xmldata/rollercoaster.xml" }).then(
                parseRollerCoasterFeed, errorRollerCoasterFeed
                );
    
        }
    
        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 = (i + 1) + ") " + 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;
        }
    
    
        //app.start();
    })();
    
    // default.js
    (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();
            }
        };
    
        function loadThemeParkFeed() {
    
            document.getElementById("tpOutput").innerHTML = "";
            WinJS.xhr({ url: "http://rollercoastermad.com/test/xmldata/themepark.xml" }).then(
                parseThemeParkFeed, errorThemeParkFeed
                );
    
        }
    
        function parseThemeParkFeed(result) {
    
            var outputAreatp = document.getElementById("tpOutput");
            var xmltp = result.responseXML;
    
            if (xmltp) {
                var items = xmltp.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 = (i + 1) + ") " + items[i].querySelector("Name").textContent;
                        outputAreatp.appendChild(link);
                        outputAreatp.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 errorThemeParkFeed(result) {
    
            var statusCode = result.status;
            var outputArea = document.getElementById("tpOutput");
            outputArea.innerHTML = "Unable to retrieve data at this time. Status code: " + statusCode;
        }
    
    
        //app.start();
    })();

    Any help would be great on why this does not work.

    Tuesday, September 25, 2012 8:37 PM

All replies

  • I have fixed it by putting both codes together:

     

    //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 = (i + 1) + ") " + 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 = (i + 1) + ") " + 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();
    })();

     
    • Proposed as answer by Song Tian Wednesday, September 26, 2012 7:20 AM
    Tuesday, September 25, 2012 8:52 PM