Remove From My Forums

App second page not displaying dynamic content

Question

Hello

I am trying to create two page website.

Pages1 i.e Default.html works fine but at page2.html it is not displaying content.

My code is

default.html

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

    <!-- MyApp references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
   
</head>
<body>
    
    <div id="ListItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
        <div class="listItemTemplate">
            <div class="listItemImage">
                <img data-win-bind="src: thumbnail" />
            </div>
            <div class="listItemTitle" data-win-bind="innerText: title">                

            </div> 
            <div class="clear"></div>
        </div>
    </div>

    <div id="main">
        <header id="banner">
            <button id="backbutton" class="win-backbutton">
            </button>
            <h1 id="maintitle" class="win-title">Events Directory</h1> <h2 id="desTitle"></h2><a href="http://eventsdirectorypk.com/submit-new-event/" class="SubmitEvent">Submit an Event</a>
        </header>
        <section id="content">

            <div id="articlecontent"></div>

<div id="SummaryBlock">


            <!--//LatestBlock-->
            <div class="ltstEvents">
                 <h1>Entertainment</h1>
                <div id="entertainmentPosts" data-win-control="WinJS.UI.ListView" 
                data-win-options="{ itemDataSource: entertainmentPosts.ItemsList.dataSource, itemTemplate: ListItemTemplate }"></div>
    <a href="#" class="BrowseMore" id="buttonOutput2">Browse more events</a>
                
            </div>
     <!--//EntertainmentBlock-->
    
<!--//Summary-->

  

</div>

  

        </section>
    </div>


</body>
</html>

In Default.js i have following code

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    var app = WinJS.Application;
   
    var entertainmentPosts;
    
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension. // Restore application state here.
            }

           

            var entertainmentPostsElement = document.getElementById("entertainmentPosts");          


            //Binding
            
            entertainmentPosts = new WinJS.Binding.List();
            var publicMembers = { ItemsList: entertainmentPosts };
            WinJS.Namespace.define("entertainmentPosts", publicMembers);

           
            document.getElementById("buttonOutput2").addEventListener("click", buttonClickHandler, false);

             args.setPromise(WinJS.UI.processAll().then(downloadEntertainmentBlogFeed("http://eventsdirectorypk.com/category/entertainment/feed/")));
          

        }
    };

    //#endregion


    

    function buttonClickHandler(e) {

            navigate("allitems.html");
    };

    function backButtonClick(e) {
        articlecontent.style.display = "none";       
        articlelist.style.display = "";
        mainTitle.innerHTML = "Events Directory";
        WinJS.UI.Animation.enterPage(articlelist);
        document.getElementById('articlecontent').style.display = "none";
        document.getElementById('SummaryBlock').style.display = "block";
    }

   


    function entertainmentiteminvoked(a)
    {
        var currentArticle2 = entertainmentPosts.getAt(a.detail.itemIndex);
        WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle2.content);
        
        //entertainmentPosts.style.display = "none";
        articlecontent.style.display = "";
        mainTitle.innerHTML = currentArticle2.title;
        WinJS.UI.Animation.enterPage(articlecontent);
        document.getElementById('SummaryBlock').style.display = "none";
    }

    function downloadEntertainmentBlogFeed(WPFeedUrl)
    {
        document.getElementById('articlecontent').style.display = "none";
      
        WinJS.xhr({ url: WPFeedUrl }).then(function (rss) {
           // wordPressBlogTitle = rss.responseXML.querySelector("title").textContent;
           // mainTitle.innerHTML = "Welcome to " + wordPressBlogTitle + " blog!";
            var itemsE = rss.responseXML.querySelectorAll("item");

            // for (var n = 0; n < items.length; n++) {
            for (var n = 0; n < 4; n++) {
                var articleE = {};
                articleE.title = itemsE[n].querySelector("title").textContent;
                var thumbs = itemsE[n].querySelectorAll("content");
                articleE.content = itemsE[n].querySelector("encoded").textContent;
                if (thumbs.length > 1) {
                    article.thumbnail = thumbs[thumbs.length - 1].attributes.getNamedItem("url").textContent;
                }
                else {
                    var firstindex = articleE.content.indexOf("<img");
                    if (firstindex !== -1) {
                        var secondindex = articleE.content.indexOf("src=", firstindex) + 5;
                        var thirdindex = articleE.content.indexOf("\"", secondindex);
                        articleE.thumbnail = articleE.content.slice(secondindex, thirdindex);
                    }
                }

                if (articleE.thumbnail) {
                    entertainmentPosts.push(articleE);
                }
            }
        });

    }


    function downloadThisWordPressBlogFeed(WPFeedUrl) {

        document.getElementById('articlecontent').style.display = "none";

        WinJS.xhr({ url: WPFeedUrl }).then(function (rss) {
          //  wordPressBlogTitle = rss.responseXML.querySelector("title").textContent;
          //  mainTitle.innerHTML = "Welcome to " + wordPressBlogTitle + " blog!";
            var items = rss.responseXML.querySelectorAll("item");

            // for (var n = 0; n < items.length; n++) {
            for (var n = 0; n < 4; n++) {
                var article = {};
                article.title = items[n].querySelector("title").textContent;
                var thumbs = items[n].querySelectorAll("content");
                article.content = items[n].querySelector("encoded").textContent;
                if (thumbs.length > 1) {
                    article.thumbnail = thumbs[thumbs.length - 1].attributes.getNamedItem("url").textContent;
                }
                else {
                    var firstindex = article.content.indexOf("<img");
                    if (firstindex !== -1) {
                        var secondindex = article.content.indexOf("src=", firstindex) + 5;
                        var thirdindex = article.content.indexOf("\"", secondindex);
                        article.thumbnail = article.content.slice(secondindex, thirdindex);
                    }
                }

                if (article.thumbnail) {
                    articlesList.push(article);
                }
            }
        });
    }


    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

Now Here is the code that is not working Fine.

allitems.html

<!DOCTYPE html>
<html>
<head>
  <title></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>

    <!-- EventsDirectoryPk references -->
    <link href="/css/default.css" rel="stylesheet" />   
    <script src="js/allitems.js"></script>
   
</head>
<body>
    
    <div id="ListItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
        <div class="listItemTemplate">
            <div class="listItemImage">
                <img data-win-bind="src: thumbnail" />
            </div>
            <div class="listItemTitle" data-win-bind="innerText: title">                

            </div> 
            <div class="clear"></div>
        </div>
    </div>

    <div id="main">
        <header id="banner">
            <button id="backbutton" class="win-backbutton">
            </button>
   <h1 id="maintitle" class="win-title">Events Directory</h1> <h2 id="desTitle"></h2><a href="http://eventsdirectorypk.com/submit-new-event/" class="SubmitEvent">Submit an Event</a>
        </header>
        <section id="content">

            <div id="articlecontent"></div>

<div id="SummaryBlock">
           <div id="latestEvents">
             <h1>Latest Events</h1>
            <div id="articlelist" data-win-control="WinJS.UI.ListView" 
                data-win-options="{ itemDataSource: BlogsPosts.ItemsList.dataSource, itemTemplate: ListItemTemplate }"></div>
             </div>

 
<!--//Summary-->

  

</div>

 

        </section>
    </div>


</body>
</html>

allitems.js

(function () {
    "use strict";
    var articlesList;
    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
   
    WinJS.UI.Pages.define("default.html", {
        ready: function (element, options) {
            var articlelistElement = document.getElementById("articlelist");
            articlelistElement.addEventListener("iteminvoked", itemInvoked);

            //Binding
            articlesList = new WinJS.Binding.List();
            var publicMembers = { ItemsList: articlesList };
            WinJS.Namespace.define("BlogsPosts", publicMembers);

            args.setPromise(WinJS.UI.processAll().then(downloadThisWordPressBlogFeed("http://eventsdirectorypk.com/feed/")));
            //CategoryBlogFeed


            function backButtonClick(e) {
                articlecontent.style.display = "none";
                CategoryItems.style.display = "";
                articlelist.style.display = "";
                mainTitle.innerHTML = "Events Directory";
                WinJS.UI.Animation.enterPage(articlelist);
                document.getElementById('articlecontent').style.display = "none";
                document.getElementById('SummaryBlock').style.display = "block";
            }

            function itemInvoked(e) {
                var currentArticle = articlesList.getAt(e.detail.itemIndex);
                WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
                articlelist.style.display = "none";
                articlecontent.style.display = "";
                mainTitle.innerHTML = currentArticle.title;
                WinJS.UI.Animation.enterPage(articlecontent);
                document.getElementById('SummaryBlock').style.display = "none";


            }


            function downloadThisWordPressBlogFeed(WPFeedUrl) {

                document.getElementById('articlecontent').style.display = "none";

                WinJS.xhr({ url: WPFeedUrl }).then(function (rss) {
                    //  wordPressBlogTitle = rss.responseXML.querySelector("title").textContent;
                    //  mainTitle.innerHTML = "Welcome to " + wordPressBlogTitle + " blog!";
                    var items = rss.responseXML.querySelectorAll("item");

                    // for (var n = 0; n < items.length; n++) {
                    for (var n = 0; n < 4; n++) {
                        var article = {};
                        article.title = items[n].querySelector("title").textContent;
                        var thumbs = items[n].querySelectorAll("content");
                        article.content = items[n].querySelector("encoded").textContent;
                        if (thumbs.length > 1) {
                            article.thumbnail = thumbs[thumbs.length - 1].attributes.getNamedItem("url").textContent;
                        }
                        else {
                            var firstindex = article.content.indexOf("<img");
                            if (firstindex !== -1) {
                                var secondindex = article.content.indexOf("src=", firstindex) + 5;
                                var thirdindex = article.content.indexOf("\"", secondindex);
                                article.thumbnail = article.content.slice(secondindex, thirdindex);
                            }
                        }

                        if (article.thumbnail) {
                            articlesList.push(article);
                        }
                    }
                });
            }

        
        }

    });


})();

Please help me in solving this and tell me why it is not showing inner page content.

Waiting for any suitable answer,

Thanks

Sajid.

Tuesday, April 15, 2014 7:35 PM

Answers

1

Sign in to vote
The easy way to create a multi-page app is to start with the Navigation template, which was mentioned once already. Then (1) Add a "page2" folder under pages folder, (2) right-click on it and select Add > New Item > Page Control. All the navigation for your multi-page app will be setup, except that you need to add calls to WinJS.Navigation.navigate(localurl), where appropriate.
- Marked as answer by SajiD designer Sunday, April 20, 2014 1:52 PM
Thursday, April 17, 2014 5:58 PM

All replies

1

Sign in to vote
Hello

In your allitem.js file, you defined the page as the default.html:

WinJS.UI.Pages.define("default.html", { ready: function (element, options) { ...

Was this intentional? I would think you would use "allitems.html" .
Edit: I also wanted to add, you should specify the path to your html file for example: "/pages/allitems/allitems.html"
- Edited by datQkiD2 Wednesday, April 16, 2014 3:21 AM
Wednesday, April 16, 2014 3:13 AM
0

Sign in to vote

hello DatQkiD2

Thanks for your reply.

Sorry that was by a mistake. I fixed it later on but it didn't worked.
Please suggest any possible solutions.

Thanks

Sajid

Wednesday, April 16, 2014 5:42 PM
1

Sign in to vote
SajiD,

I noticed that you used default.html as one of your pages. The usual model that is used is having the default.html host your page using the following code:

<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>

Placing this in your default.html will host your page on the default.html. If you navigate to a different page, then this div will host the page that you navigated to. This way your default.html is always loaded. If you look at the navigation template, they set this up for you.

Reference: http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx
- Edited by datQkiD2 Wednesday, April 16, 2014 6:44 PM
Wednesday, April 16, 2014 6:41 PM
0

Sign in to vote

Hello

I tried this.

This is also not working properly.

I looked at whole MSDN community and codeplex. but did;nt find any suitable answer.

Really Windows 8 apps sucks.. These are a wastage of time due to no help and support ..

Wednesday, April 16, 2014 7:29 PM
1

Sign in to vote
The easy way to create a multi-page app is to start with the Navigation template, which was mentioned once already. Then (1) Add a "page2" folder under pages folder, (2) right-click on it and select Add > New Item > Page Control. All the navigation for your multi-page app will be setup, except that you need to add calls to WinJS.Navigation.navigate(localurl), where appropriate.
- Marked as answer by SajiD designer Sunday, April 20, 2014 1:52 PM
Thursday, April 17, 2014 5:58 PM

Answered by:

App second page not displaying dynamic content

Question

Answers

All replies