locked
Navigation issues

    Question

  • I am building a single page navigation app but hit an issue where the dynamic links are not working correctly.

    http://prntscr.com/hk6ck

    When I click page two link which the code is

    <a href="/pages/rollercoasters/rollercoaster.html">Page two</a>

    It shows correctly, http://prntscr.com/hk6ew

    But when I click the other ones it shows up like http://prntscr.com/hk6g9

    The code I make them links is,

    // home.js
    (function () {
        "use strict";
        var app = WinJS.Application;
        WinJS.UI.Pages.define("/pages/home/home.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.
                WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);
                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");
                        link.innerHTML = items[i].querySelector("Name").textContent;
                        link.href = "/pages/rollercoasters/rollercoaster.html?rcid=" + items[i].querySelector("ID").textContent;
                        var newLine = document.createElement("br");
                        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 linkClickEventHandler(eventInfo) {
            eventInfo.preventDefault();
            var link = eventInfo.target;
            WinJS.Navigation.navigate(link.href);
        }
    
        app.start();
    })();
    
    

    So I think when the links are put on the app it is not working correctly. Its like there is something else that needed to be added to them links.

    Ryan Bowden

    Tuesday, October 16, 2012 2:43 PM

Answers

All replies

  • Hi,

    I suggest you debug with Javascript console first. And then post the result what is not correct.

    And you may also refer to: http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Friday, November 09, 2012 6:25 AM
    Wednesday, October 17, 2012 9:55 AM
  • The problem is probably that your link click handler is not always correctly attached. In the ready() event of your page, change the line

      WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);

    to

      WinJS.Utilities.query("a",element).listen("click", linkClickEventHandler, false);

    The page element might not be attached to the DOM yet, so the query() call will not find any links in the document to attach a click handler to.

    Wednesday, October 17, 2012 10:40 AM
  • Hi,

    I suggest you debug with Javascript console first. And then post the result what is not correct.

    And you may also refer to: http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx.


    Hello That page is what I used to build the app I have so far but unable to get the other links to work. 
    Now I did the debug but got no error's when click the links.

    http://prntscr.com/hmcx7

    As you can see there

    Wednesday, October 17, 2012 1:51 PM
  • The problem is probably that your link click handler is not always correctly attached. In the ready() event of your page, change the line

      WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);

    to

      WinJS.Utilities.query("a",element).listen("click", linkClickEventHandler, false);

    The page element might not be attached to the DOM yet, so the query() call will not find any links in the document to attach a click handler to.

    That's what I think is the issue as the link are being made and maybe the function is working it out first but changing that did nothing. Also I though the function was suppose to run when there was a click. But it does seam that is the issue.
    Wednesday, October 17, 2012 1:53 PM