none
How to render page in another page?

    Question

  • Hi All

    I read this article.

    http://msdn.microsoft.com/en-us/library/windows/apps/hh770117.aspx 

    So I have a default.html which use an htmlControl render Page1.

     <div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri:'/Page1.html'}"></div>

    Now In Page1 I want to render another page dynamicly.

    So I Use

    <div id="OtherPage" ></div>

    Then in ready function

    ready: function (targetElemment) {

     WinJS.UI.processAll().done(function () {            WinJS.UI.Pages.render("/page2.html", host).done();
            })

    }

    But it doesn't work.

    How should I render this page2 to Page1?

    Monday, August 20, 2012 5:00 AM

Answers

  • Hi,

    When creating a page control, you will see a ready function generated. If you put your code inside the ready function, it would work. In addition, it seems you don't have a div aaa. Please change it to renderedControl(your host div's id) to see whether it works fine.

    Best Regards,

    Ming Xu.


    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

    Wednesday, August 29, 2012 3:16 PM
  • Hi

    Addition:

    You can put this code

    

     var renderHost = document.getElementById("aaa");
               
                WinJS.UI.processAll().done(function () {
                    WinJS.UI.Pages.render("/pages/SamplePageControl.html", renderHost, {
                        controlText: "This control created by calling WinJS.UI.Pages.render",
                        message: "Render control"
                    }).done();
                });

    to processed and read function, not init and load and you need to add aaa div or change it to contentPage.

    And for more information please refer to :

     

    http://msdn.microsoft.com/en-us/library/windows/apps/hh770589.aspx

    • Edited by Dino He Monday, September 03, 2012 3:47 AM
    • Marked as answer by KMoon Monday, September 03, 2012 4:55 AM
    Monday, September 03, 2012 3:46 AM

All replies

  • Hi Keith,

    Are you saying you have default.html, and in default.html your render page1.html and then again in page1.html you want to render page2.html?

    Can you share your code here or a simple sample of how you are trying to do this?

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, August 21, 2012 2:11 PM
  • Hi

    I'd like something like a masterpage in html.

    Default.html

    <body>
        <div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri:'/MasterPage.html'}"></div>
    </body>

    MasterPage.html:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script type="text/javascript" src="MasterPage.js"></script>
        </head>
        <body>

            <div id="renderedControl" class="renderingPageControls-renderedControl"></div>
            <div id="contentPage" ></div>
        </body>
    </html>

    MasterPage.js

    (function(){
        "use strict";

        WinJS.UI.Pages.define("/MasterPage.html", {

            init: function (element, options) {

                //var host = document.getElementById("contentPage");

                //WinJS.UI.Pages.render("/page1.html", host).done();
                var renderHost = document.getElementById("aaa");
              
                WinJS.UI.processAll().done(function () {

                    WinJS.UI.Pages.render("/pages/SamplePageControl.html", renderHost, {
                        controlText: "This control created by calling WinJS.UI.Pages.render",
                        message: "Render control"
                    }).done();
                });
            },

            load: function (uri) { /* your code here */
               
            },

          
            processed: function (element, options) {


            },

     


            ready: function (targetElemment) {
               
            }

        });

        })();

    I know put this

    WinJS.UI.Pages.render("/pages/SamplePageControl.html", renderHost, {
                        controlText: "This control created by calling WinJS.UI.Pages.render",
                        message: "Render control"
                    }).done();

    in Default.js will work, but how to render page in other page.js?

    Wednesday, August 22, 2012 2:46 AM
  • Hi,

    When creating a page control, you will see a ready function generated. If you put your code inside the ready function, it would work. In addition, it seems you don't have a div aaa. Please change it to renderedControl(your host div's id) to see whether it works fine.

    Best Regards,

    Ming Xu.


    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

    Wednesday, August 29, 2012 3:16 PM
  • Hi

    Addition:

    You can put this code

    

     var renderHost = document.getElementById("aaa");
               
                WinJS.UI.processAll().done(function () {
                    WinJS.UI.Pages.render("/pages/SamplePageControl.html", renderHost, {
                        controlText: "This control created by calling WinJS.UI.Pages.render",
                        message: "Render control"
                    }).done();
                });

    to processed and read function, not init and load and you need to add aaa div or change it to contentPage.

    And for more information please refer to :

     

    http://msdn.microsoft.com/en-us/library/windows/apps/hh770589.aspx

    • Edited by Dino He Monday, September 03, 2012 3:47 AM
    • Marked as answer by KMoon Monday, September 03, 2012 4:55 AM
    Monday, September 03, 2012 3:46 AM