locked
Could PageControlNavigator and HtmlControl use together? RRS feed

  • Question

  • I created a split js app project from the template, there is a PageControlNavigator in it to navigator to home page.

    I updated the default page navigator  to testPage.html

    In my testPage.html, the right has one div with htmlControl to load another page. 

    var host = document.getElementById("basicFragmentLoadDiv");
                var htmlControl = new WinJS.UI.HtmlControl(host, { uri: '/pages/shell/shell.html' });
                WinJS.UI.processAll();

    The exception will be thrown in the second line in above code, when I navigator back to testPage from others, such as: default-> testPage (load the html Control successfully)-> navigate to another page -> click backButton to return testPage.

    0x800a138f - JavaScript runtime error: Object expected

    Tuesday, September 17, 2013 7:43 AM

Answers

  • Its a bit hard to understand what exactly are you trying to trying to do without complete HTML markup or full details.

    Here is what I have tried and I cannot repro the problem:

    - Created Split App template

    - In default.html, the PageControlNavigator navigates to testPage.html.

    - TestPage.html is a "Page Control" which contains:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>testPage</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>
    
        <link href="testPage.css" rel="stylesheet" />
        <script src="testPage.js"></script>
    </head>
    <body>
        <div class="testPage fragment">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to testPage</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
                <!-- A hyperlink to page2.html. -->
                <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
                <div id="controlDiv"></div>
            </section>
        </div>
    </body>
    </html>

    - Then I modify TestPage.js with the following Javascript:

    ready: function (element, options) {
                // TODO: Initialize the page here.
                var htmlControl = new WinJS.UI.HtmlControl(document.getElementById("controlDiv"), { uri: '/pages/samplePageControl/samplePageControl.html' });
                WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
            },
    
    linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
                WinJS.Navigation.navigate(link.href);
            }

    - I also create a samplePageControl.html page by creating a folder called samplePageControl under pages and creating a HTML file with this:

    <!-- Include this file in your project.
    <!-- samplePageControl.html -->
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>samplePageControl</title>
    </head>
    <body>
        <div class="samplePageControl">
            <p class="samplePageControl-text"><span data-win-bind="textContent: controlText">This is an HtmlControl. </span>
            <button class="samplePageControl-button" style="background-color: green">Click</button></p>
            <p>Page controls can also contain WinJS controls. They are activated automatically, like the ToggleSwitch below.</p>
            <div class="samplePageControl-toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
        </div>
    </body>
    </html>
    
    
    

    - I have also created another folder called "page2" and created a Page Control named Page2.html (and the corresponding cs & js files)

    - When I run the app, I see testPage.html show a link as well as the HTML from the samplePageControl.html.

    - When I click the link, I get navigated to Page2.html and clicking back button on Page2.html displays the testPage.html without any errors.


    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    Tuesday, September 17, 2013 10:37 PM
    Moderator