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

-
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
Question
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)- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Tuesday, January 10, 2012 8:57 PM
Tuesday, January 10, 2012 8:57 PMModerator -
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)- Edited by Jeff SandersMicrosoft employee, Moderator Friday, January 13, 2012 8:42 PM
Friday, January 13, 2012 8:42 PMModerator -
It might be my fault that I could not explain my question correctly. Sorry for that.
-Arslan
Saturday, January 14, 2012 1:06 PM