locked
How can I navigate to 2 or more than 2 fragments in metro style navigation application?

    Question

  • I have 2 DIVs, DIV1 and DIV2 and 2 respective fragments, fragment1.html and fragment2.html for them.

    When I click DIV1 it takes me to desired fragment1 using this code in homePage.js:

    (function () {
        'use strict';

        // Custom event raised after the fragment is appended to the DOM.
        WinJS.Application.addEventListener('fragmentappended', function handler(e) {
            if (e.location === '/html/homePage.html') { fragmentLoad(e.fragment, e.state); }
        });

        function fragmentLoad(elements, options) {
            WinJS.UI.processAll(elements)
                .then(function () {
                var elem = elements.querySelector('.div1');
                elem.addEventListener('click', nextPage);
                function nextPage() {
                    WinJS.Navigation.navigate("/html/fragment1.html");
                }
                });
        }

        WinJS.Namespace.define('homePage', {
            fragmentLoad: fragmentLoad,
        });
    })();

     

    (I have assigned class name to DIV1 as "div1" and to DIV2 as "div2")

     

     

    Now, how can I add code to same homePage.js file for DIV2 so that it takes me to fragment2.html ???

    Tuesday, January 10, 2012 3:14 PM

Answers

  • Thanks for your reply Jeff. I am new to javascript so I figured it out in simpler way that by changing the function name from nextPage to nextPage2 for div2 it works perfectly fine.

    (function () {
    'use strict';

    // Custom event raised after the fragment is appended to the DOM.
    WinJS.Application.addEventListener('fragmentappended', function handler(e) {
    if (e.location === '/html/homePage.html') { fragmentLoad(e.fragment, e.state); }
    });

    function fragmentLoad(elements, options) {
    WinJS.UI.processAll(elements)
    .then(function () {
    var elem = elements.querySelector('.div1');
    elem.addEventListener('click', nextPage);
    function nextPage() {
    WinJS.Navigation.navigate("/html/fragment1.html");
    }

    var elem = elements.querySelector('.div2');
    elem.addEventListener('click', nextPage2);
    function nextPage2() {
    WinJS.Navigation.navigate("/html/fragment2.html");
    }

                });
    }

    WinJS.Namespace.define('homePage', {
    fragmentLoad: fragmentLoad,
    });
    })();

    • Marked as answer by ArslanKhwaja Saturday, January 14, 2012 1:01 PM
    Friday, January 13, 2012 8:31 PM

All replies

  • Hi Arslan,

    You want to look at the Fragments sample.  It shows how to load a fragment into a div using WinJS.UI.Fragments.cloneTo.

    http://code.msdn.microsoft.com/windowsapps/Fragments-91f66b07

    -Jeff


    Jeff Sanders (MSFT)
    Tuesday, January 10, 2012 8:57 PM
    Moderator
  • Thanks for your reply Jeff. I am new to javascript so I figured it out in simpler way that by changing the function name from nextPage to nextPage2 for div2 it works perfectly fine.

    (function () {
    'use strict';

    // Custom event raised after the fragment is appended to the DOM.
    WinJS.Application.addEventListener('fragmentappended', function handler(e) {
    if (e.location === '/html/homePage.html') { fragmentLoad(e.fragment, e.state); }
    });

    function fragmentLoad(elements, options) {
    WinJS.UI.processAll(elements)
    .then(function () {
    var elem = elements.querySelector('.div1');
    elem.addEventListener('click', nextPage);
    function nextPage() {
    WinJS.Navigation.navigate("/html/fragment1.html");
    }

    var elem = elements.querySelector('.div2');
    elem.addEventListener('click', nextPage2);
    function nextPage2() {
    WinJS.Navigation.navigate("/html/fragment2.html");
    }

                });
    }

    WinJS.Namespace.define('homePage', {
    fragmentLoad: fragmentLoad,
    });
    })();

    • Marked as answer by ArslanKhwaja Saturday, January 14, 2012 1:01 PM
    Friday, January 13, 2012 8:31 PM
  • I see.  Sorry I did not understand your question.  I thought you wanted to load both fragments into the same page at the same time!

    -Jeff


    Jeff Sanders (MSFT)
    Friday, January 13, 2012 8:42 PM
    Moderator
  • It might be my fault that I could not explain my question correctly. Sorry for that.

    -Arslan

    Saturday, January 14, 2012 1:06 PM