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 ???

Answer 1

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)

Answer 2

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,
});
})();

Answer 3

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)

Answer 4

It might be my fault that I could not explain my question correctly. Sorry for that.

-Arslan