CODEWITHSUNDEEP
jqueryjquery-mobilecordovawindows-phone-8
MysticMagicϡ
MysticMagicϡ

Reputation: 28823

Issue in page navigation using jquery mobile in Windows Phone 8

I am developing a Windows Phone 8 application using Phonegap and jQuery Mobile.

I have a sidebar menu for page navigation. As I am having same menu for multiple pages, I would like to keep it dynamic, i.e. generated in .js file.

Problem is: If I add the ul and li elements in html file, the links navigate to the respective pages properly. But when I append the ul and li elements in js file, the links are not responding.

Here is the code being used:

var ulStr = '<div class="ui-panel-inner">'+
                    '<header class="nav-header">MUSCLES</header>'+
                    '<ul id="leftMenu'+identifier+'" data-role="listview" class="sidelist ui-listview">'+
                        '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#Ch0C1" class="navlink ui-link-inherit" data-ajax="false">TERMINOLOGY</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'+
                        '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#Ch0C2" class="navlink ui-link-inherit" data-ajax="false">page 2 name</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'+
                        '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#Ch1C0" class="navlink ui-link-inherit" data-ajax="false">page 3 name</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'+
                    '</ul>'+
                '</div>';

$('#leftNavmenu'+identifier).html("");
$('#leftNavmenu'+identifier).html(ulStr);

Same code is working properly in android and iOS platforms. SO there is not any possibility of syntax error. It would be great if someone would be able to help.

Upvotes: 2

Views: 569

Answers (1)

Omar
Omar

Reputation: 31732

jQuery Mobile's Navigation is based on Ajax and hashchange. When you disabled Ajax (data-ajax="false"), browser instead looks for div with id referred from anchor tag.

As mentioned in your OP, it works on iOS and Android. It is because hashchange event is triggered, hence, transition occurs. However, if you disable hashListeningEnabled, It won't work on any device with Ajax disabled.

Use data-ajax="false" when you want to load an external page via HTTP not Ajax. It has the same effect of rel="external".

Upvotes: 2

Related Questions