0
votes

I'm developing a mobile application using jqm and phonegap. I've created a multi-page html file. There are two jqm pages with ids 'myPage1' and 'myPage2' inside single html file.'myPage1' contains a list of items.On click of list item i've to issue an ajax call and show the response data on 'myPage2'. After getting response from ajax call i'm calling jqm changePage function like:

$.mobile.changePage('#myPage2', { transition : "slide", reverse : false, changeHash : true });

On pagecreate event i'm making some changes in DOM which causes page display size to increase. Everything works perfectly fine on pc browser but on android the page size remains same as screen size i.e. i cannot scroll down to see full page content.

I've tried calling $('#myPage2').page() and $(document).resize() after updating DOM but all in vain.

The problem only occurs when changing page using jqm ajax based page loading. If i create a separate html file, declare 'myPage2' in it and instead of calling $.mobile.changePage, use rel='external' as link attribute in 'myPage1' list item, the problem resolves. I don't even have to call $('#myPage2').page().

But i want to use jqm Ajax based page loading as i want to leverage jqm page transitions.

Following are my config details: Jquery verison - 1.6.2 Jquery Mobile Version - 1.0 Beta 2 Android version - 2.2.2 Android Browser : Mozilla/5.0 (Linux; U; Android 2.2.2; hd-us; eeepc Build/FRG83G) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Any pointer would be really helpful as my work is gated due to this. Thanks in advance.

Ajay

1
Please accept the answer that suits this question the most, and then ask another if you have an additional question. Stack Overflow is not a forum, it's a place where individual questions receive peer reviewed answers.Tim Post

1 Answers

2
votes

instead of .resize(); or .page(); try the new trigger option:

.trigger('create');

Here are the release notes for Beta2: