locked
I messed something up, and can't figure out exactly what. (WinJS.xhr, listview, grouped list, ui.js)

    Question

  • So I've included the javascript for the page. The issue is I get an exception error for a null userData in ui.js whenever the line bordered by "//problem here" in the function: feedParse is active. It doesn't stop on that line, but rather after it exits the function, so It's been difficult for me to track down what exactly is going on. Thanks for the help!

    The exact error message is as follows:

    Exception is about to be caught by JavaScript library code at line 24896, column 33 in ms-appx://microsoft.winjs.2.0/js/ui.js

    0x800a138f - JavaScript runtime error: Unable to get property 'userData' of undefined or null reference

    If there is a handler for this exception, the program may be safely continued.

    (function () {
        "use strict";
    
        WinJS.UI.Pages.define("/pages/searchPage/searchPage.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 feedList = document.getElementById("feedList");
                var rssContent = document.getElementById("rssContent");
                feedList.addEventListener("iteminvoked", this.feedInvokedHandler, false);
                rssContent.addEventListener("iteminvoked", this.itemInvokedHandler, false);
    
                //reInitialize if necessary
                if (FeedData.persistant[0]>=0) {
                    var index= FeedData.persistant[0];
                    feedList.winControl.selection.set(index).done();
                    var selItem = feedList.winControl.selection.getItems();
                    var rss = selItem._value[0].data.rss;
                    WinJS.xhr({ url: rss }).then(feedParse, feedError).done(setScroll)
                   
                }
                
               
            },
    
            unload: function () {
                // TODO: Respond to navigations away from this page.
            },
    
            updateLayout: function (element) {
                /// <param name="element" domElement="true" />
    
                // TODO: Respond to changes in layout.
            },
    
            feedInvokedHandler: function (eventObject) {
                eventObject.detail.itemPromise.done(function (invokedItem) {
                    FeedData.persistant[0] = rss;
                    //Get rss feed info
                    var rss = invokedItem.data.rss;
                    FeedData.persistant[0] = invokedItem.index;
                    //obtain rss data
                    WinJS.xhr({ url: rss }).then(feedParse, feedError);
    
                })
                
    
    
    
            },
    
            itemInvokedHandler: function (eventObject) {
                eventObject.detail.itemPromise.done(function (invokedItem) {
                    var rssContent = document.getElementById("rssContent");
                    //store link in public variable
                    
                    FeedData.persistant[1] = invokedItem.data.title;
                    FeedData.persistant[2] = invokedItem.data.details;
                    FeedData.persistant[3] = invokedItem.data.link;
                    ///FeedData.persistant[4] = invokedItem.data.datePub;
                    FeedData.persistant[5] = rssContent.winControl.scrollPosition;
                    //navigate to rssItem.html
                    WinJS.Navigation.navigate("/pages/searchPage/rssItem/rssItem.html")
                })
            },
    
    
        });
        function feedParse(result) {
            var xml = result.responseXML;
            var feedList = document.getElementById("rssContent").winControl;
            var dataList = new WinJS.Binding.List([]);
            
         
            if (xml) {
                var items = xml.querySelectorAll("rss>channel>item")
                if (items) {
                    var length = Math.min(50, items.length);
                    for (var i = 0; i < length; i++) {
                        var title_i = items[i].querySelector("title").textContent;
                        var link_i = items[i].querySelector("link").textContent;
                        var details_i = items[i].querySelector("description").textContent;
                        var source_i = items[i].querySelector("source").textContent;
                        var date_i = items[i].querySelector("pubDate").textContent;
                        dataList.dataSource.insertAtEnd("", { title: title_i, link: link_i, details: details_i, source: source_i, pubDate: date_i });
                    }
                    var groupedList=dataList.createGrouped(datePubKey, datePubData, compareDates);
                    feedList.itemDataSource = groupedList.dataSource;
    
                    //Problem Here
                    feedList.groupDataSource = groupedList.groups.dataSource;
                    //Problem Here
                    
                }
            }
        }
    
        function feedError(result) {
            
        }
    
        function setScroll() {
            var feedList = document.getElementById("feedList");
            feedList.winControl.scrollPosition = FeedData.persistant[5];
        }
        function datePubData(dataItem) {
            var date = new Date(dataItem.pubDate);
            return { title: date.toDateString() }
        }
        function datePubKey(dataItem) {
            //get dataItem
            var initDate =new Date(dataItem.pubDate);
            //format for days
            var str = (initDate.getMonth() + 1) + "/";
            str += initDate.getDate() + "/";
            str += initDate.getFullYear();
            return new Date(str);
        }
        function compareDates(leftKey, rightKey) {
            var var1 = new Date(leftKey);
            var var2 = new Date(rightKey);
            return var2 - var1; //reversed to put dates in reverse-chronological order (newest first)
        }
    })();

    Thursday, January 30, 2014 5:54 PM

All replies

  • Do you have a full repro of this problem that you can post to SkyDrive? It's hard to pinpoint anything with just the JavaScript code above.

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Friday, January 31, 2014 1:54 AM
    Moderator
  • I'm not to familiar with how to put things up on skydrive. I'll post the rest of the files in this post (It's one page control and an additional .js, not to much). It should include everything to reproduce  the error. Sorry for the inconvenience. 

    HTML

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>searchPage</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
        <link href="searchPage.css" rel="stylesheet" />
        <script src="searchPage.js"></script>
        <script src="jobFeeds.js"></script>
    </head>
    <body>
        <div class="searchPage fragment">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to searchPage</span>
                </h1>
            </header>
            <div id="rssHeaderTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
                <div class="rssHeaderItem">
                    <h3 data-win-bind="innerText: title"></h3>
                </div>
            </div>
            <div id="Listtemplate" data-win-control="WinJS.Binding.Template">
                <div style="width:200px; height: 60px; padding: 5px; background-color:green; color:white;">
                    <h4 data-win-bind="innerText: title"></h4>
    
                </div>
            </div>
            <div id="rssTemplate" data-win-control="WinJS.Binding.Template">
                <div style="width:300px; height: 130px; padding:20px; border: 2px solid black;">
                    <div class="itemHeader">
                        <h2 data-win-bind="innerText: title"></h2>
                    </div>
    
                </div>
            </div>
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
                <table>
                    <tr>
                        <td>
                            <div id="feedList" data-win-control="WinJS.UI.ListView"
                                 data-win-options="{ itemDataSource: FeedData.itemList.dataSource,
                     itemTemplate: select('#Listtemplate'),
                     layout: {type: WinJS.UI.ListLayout},
                     selectionMode: 'single',
                     tapBehavior: 'directSelect'}">
                                }">
    
                            </div>
                        </td>
                        <td>
                            <div id="rssContent" data-win-control="WinJS.UI.ListView"
                                 data-win-options="{
                     itemTemplate: select('#rssTemplate'),
                     groupHeaderTemplate: select('#rssHeaderTemplate'),
                     layout: {type: WinJS.UI.GridLayout},
                     selectionMode: 'none',
                     tapBehavior: 'invoke'}">
                                }">
    
                            </div>
                        </td>
                    </tr>
                </table>
    
            </section>
        </div>
    </body>
    </html>
    

    CSS:

    .searchPage section[role=main] {
    
    }
    
    
    .rssHeaderItem {
     height: 20px;
     border-width: medium;
    }
    
    #feedList {
        background-color:green;
        width: 210px;
        height: 70vh;
    }
    
    #rssContent {
        width: 80vw;
        height: 70vh;
    }
    
        #rssContent .win-item:hover .itemHeader {
            color: red;
        }

    jobFeeds.js

    (function () {
        "use strict";
    
        var dataArray = [
        { title: "Indeed Associate Chemical Engineer", rss:"http://rss.indeed.com/rss?q=Associate+Chemical+Engineer&jt=fulltime&sr=directhire" },
        { title: "Simply Hired ChemE CA", rss: "http://www.simplyhired.com/a/job-feed/rss/q-chemical+engineer/l-california" }
    
        ];
    
        var dataList = new WinJS.Binding.List(dataArray);
        
    
        // Create a namespace to make the data publicly
        // accessible. 
        var selectedFeed, itemTitle, itemDescription, itemLink, itemDatePub, listScroll;
        var publicMembers =
            {
                itemList: dataList,
                persistant: [selectedFeed, itemTitle, itemDescription, itemLink, itemDatePub, listScroll]
            };
        WinJS.Namespace.define("FeedData", publicMembers);
    
    })();

    Friday, January 31, 2014 8:22 PM
  • Here's a link on how to share files via SkyDrive: http://windows.microsoft.com/en-us/skydrive/share-file-folder

    You can zip your project, upload to SkyDrive and then Share a link here.


    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Saturday, February 1, 2014 1:00 AM
    Moderator