Search jQuery

jQuery Forum

Back button needs to be tapped twice?! Page transitions jittery!

in jQuery Mobile • 10 years ago

Hi all,

I've finally made my first jQuery mobile application but my UI is in a fix. My mobile app using jQuery mobile + Phonegap is very twitchy.

Firstly, I have added back buttons on my pages using the data-add-back-btn="true" attribute. Now on some pages I have no problem but on others I have to tap the back button 2 or sometimes even 3 times for the page to be loaded! Any idea why this happening?? Or suggestions on how I could improve this??

Also I have read about Androids dismal performance handling jQuery mobile page transitions. My slides are jittery and fades are blinding! Any ideas how I could improve these UI pit falls??? Any suggestions would be greatly appreciated. Thanks!

EDIT: I am using jquery.mobile-1.0.1

Replies(11)

arschmitz

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

i would try 1.1rc1 there are a lot of fixes in this version. and the "smoothness" of the transitions has been dramatically improved.

ares05

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

I did try with 1.1RC1 but unfortunately it has a lot of bugs. One major issue I am facing with 1.1RC1 is that on clicking the back button (data-add-back-btn="true") it goes back too far skipping pages in between. Hence I stuck with 1.0.1.

zSprawl

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

I think the problem has to do with the data-add-back-btn attribute. I do not have this issue and I use a ton of back buttons in my Apps.Use data-rel=back and let me know how that works for you.

<a href="#" data-icon="delete" class="ui-btn-left" data-transition="reverse slideup" data-rel="back">Close</a>

---
http://zsprawl.com

ares05

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

Yes that seems to help. Thanks a lot. The page transitions are still twitchy but I guess I'll have to live with that until a bug free version of 1.1RC1 is out

ares05

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

zSprawl though what you suggested solved the problem temporarily, further testing revealed another problem. When I use data-rel="back" the page goes back perfectly the first couple of times. After that it goes back and comes forward on its own!

the same happens when I use data-add-back-btn="true". I'm in a big fix! I'm doing all testing and development on a Galaxy S2(2.3.6) and a Galaxy Tab(2.2)

Kindly help guys!

ares05

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

Problem solved. The error was on my part. The previous page had a dynamically generated list view and I had placed its click event handler in pageinit. Dunno why I did that?! Once i removed it from within paginit and handled the <li> click event everything seems to be working fine. Stupid coding error on my part.
Thanks for all your inputs!

marichen12

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

I have the same problem.

I use the pagebeforechange event to generate dynamically my list view and injecting in the page (http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-dynamic.html)

I use this code

<a href="#" data-icon="delete" class="ui-btn-left" data-transition="reverse slideup" data-rel="back">Close</a>

but do not work for me even I tap twice.
I notice that when I have two pages with the back button it work in one page.

Example:
Page 1 --> Page 2 (with back button) --> Page 3 (with back button).
The back button work on the Page 3 and not on the Page 2 (I can't do anything. I will relaod the webapp)

Can you help me...

zSprawl

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

What code are you using to generate the back buttons dynamically?

You probably need to put a trigger function on it. For example:

$('#buttonname').button('refresh');

http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-methods.html

---
http://zsprawl.com

marichen12

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

I'am using the pagebeforechange event to generate my list dynamically.

The back buttons are not generated.

The code used to generate my listview is below:

$(document).bind("pagebeforechange", function (e, data) {
// // We only want to handle changePage() calls where the caller is
// // asking us to load a page by URL.
var u = $.mobile.path.parseUrl(data.toPage),
red = /^#details/, re = /^#groupitems/, rec = /^#recherche/;
if (typeof data.toPage === "string") {
BottinDB.urlObj = u;
BottinDB.options = data.options;
if ($.trim(u.hash).length == 0) {
BottinDB.onGetGroup(BottinDB.defaultGroup);
return;
}
if (u.hash.search(re) !== -1) {
// We're being asked to display the items for a specific category.
// Call our internal method that builds the content for the category
// on the fly based on our in-memory category data structure.
BottinDB.onGroupClick()
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
return;
}
//Je demande à voir le détail d'un usager
if (u.hash.search(red) !== -1) {
BottinDB.onDetailsClick();
e.preventDefault();
return;
}
if (u.hash.search(rec) == -1)
BottinDB.onGetGroup(Utilitaires.getParam('typegroupe', u.hash));
}
}).live("pageinit", SearchModule.byPass)
.ready(BottinDB.onInit);

and the html code is :

<body>
<div id="classement" data-role="page">
<div data-role="header" role="banner">
<h1 role="heading" aria-level="1">
Bottin téléphonique</h1>
</div>
<div data-role="content" role="main">
<ul id="listclassement" data-role="listview" data-inset="true">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#classement?typegroupe=classement" class="ui-btn-active ui-state-persist">
Alpha</a></li>
<li><a href="#direction?typegroupe=direction" class="direction">Directions</a></li>
<li><a href="#centre?typegroupe=centre" class="centre">Centre</a></li>
<li><a href="#recherche" data-icon="search" data-iconpos="right">Recherche</a></li>
</ul>
</div>
</div>
</div>
<div id="direction" data-role="page">
<div data-role="header" role="banner">
<h1 role="heading" aria-level="1">
Bottin téléphonique</h1>
</div>
<div data-role="content" role="main">
<ul id="listdirection" data-role="listview" data-inset="true">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#classement?typegroupe=classement">Alpha</a></li>
<li><a href="#direction?typegroupe=direction" class="ui-btn-active ui-state-persist">
Directions</a></li>
<li><a href="#centre?typegroupe=centre">Centre</a></li>
<li><a href="#recherche" data-icon="search" data-iconpos="right">Recherche</a></li>
</ul>
</div>
</div>
</div>
<div id="centre" data-role="page">
<div data-role="header" role="banner">
<h1 role="heading" aria-level="1">
Bottin téléphonique</h1>
</div>
<div data-role="content" role="main">
<ul id="listcentre" data-role="listview" data-inset="true">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#classement?typegroupe=classement">Alpha</a></li>
<li><a href="#direction?typegroupe=direction">Directions</a></li>
<li><a href="#centre?typegroupe=centre" class="ui-btn-active ui-state-persist">Centre</a></li>
<li><a href="#recherche" data-icon="search" data-iconpos="right">Recherche</a></li>
</ul>
</div>
</div>
</div>
<div id="recherche" data-role="page">
<div data-role="header" role="banner">
<h1 role="heading" aria-level="1">
Recherche</h1>
</div>
<div data-role="content" role="main">
<ul id="searchlist" data-role="listview" data-filter="true" data-filter-placeholder="Rechercher"
data-inset="true">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#classement?typegroupe=classement">Alpha</a></li>
<li><a href="#direction?typegroupe=direction" class="direction">Directions</a></li>
<li><a href="#centre?typegroupe=centre" class="centre">Centre</a></li>
<li><a href="#recherche?typegroupe=recherche" data-icon="search" data-iconpos="right"
class="ui-btn-active ui-state-persist">Recherche</a></li>
</ul>
</div>
</div>
</div>
<div id="groupitems" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-transition="reverse" data-rel="back">Retour</a>
<h1>
</h1>
</div>
<div data-role="content">
</div>
</div>
<div id="details" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-transition="reverse" data-rel="back">Retour</a>
<h1>
Infos</h1>
</div>
<div data-role="content" style="padding-top: 10px">
<div id="mesinfos">
</div>
<fieldset id="boutons" class="ui-grid-a">
<div class="ui-block-a">
<a id="sendsms" data-mini="true" data-role="button">Envoyer un SMS</a>
</div>
<div class="ui-block-a">
<a id="sendemail" data-mini="true" data-role="button">Envoyer un email</a>
</div>
</fieldset>
</div>
</div>
</body>

As you see, the back buttons aren't generated.

I will note also, when I come back from page with id details, my listview link's not working also..

I very need help...

ares05

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

Ok I don't know how helpful I can be but this is what I am doing right now...

I am generating my dynamic listview like this

$( '#master' ).live( 'pagebeforecreate',function(event){
$('#mylist').append('<li>Something</li>');
$('#mylist').listview('refresh');
});

And then I'm handling the click event for the <li> elements as follows

$("#mylist").on("click", "li", function(event){
//Do something here
$.mobile.changePage("SecondPage.html");
});

And on the second page I have used the back button as zSprawl suggested

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-role="page" id="slave">
<div data-role="header" data-position="fixed" >
<a href="#" data-rel="back" data-corners="false" data-icon="back">Back</a>
<h1>Second Page</h1>
</div>
</div>
</body>
</html>

This works fine. Hope it helps!

marichen12

Re: Back button needs to be tapped twice?! Page transitions jittery!

10 years ago

It can help me. But I will recode because I'm using multipage. May be, it will be easy to get one page menu option.

Tx..

Top Reply

Response title

Attachments

jQuery Forum

Back button needs to be tapped twice?! Page transitions jittery!

Replies(11)

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Re: Back button needs to be tapped twice?! Page transitions jittery!

Statistics

Tags

Actions