I start with an example right away:

From.html:



<TITLE>iQTouch appendTo Test</TITLE>


<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
statusBar: 'black'
});
</script>

To.html:

<script type="text/javascript">
    $(document).ready(function() {
        loadThings();
    });

    function loadThings() {
        // load things here
        $('#listOfThings').append('<li>dynamically loaded stuff</li>');
    }
</script>

When loading 'To.html' by clicking on the link in 'From.html' the JavaScript inside To.html is not executed.

I had a look at the relevant code in jqtouch.js and got to this line
$body.trigger('pageInserted', {page: $node.appendTo($body)});
within the function 'insertPages'. I remember vaguely reading somewhere that there is an issue with appendTo and Safari and that one should rather use the append function (sorry, can't remember where I read this). So I tried the following:
$body.trigger('pageInserted', {page: $body.append($node)});
and it works.

I tried this with Safari 5.0 (7533.16) with its user agent set to 'Mobile Safari 3.1.3 - iPhone' on Windows and OS X (10.6.4) . Same result on the iPhone Simulator 4.0 (211.1) on OS X (10.6.4)
My version of jQTouch is b13e517.

What steps will reproduce the problem?

1. add a href="tel:..." link in any ul/li
2. click it
3. cancel call
4. active class still applied to the link.

What is the expected output? What do you see instead?
I don't know if something is thrown when the call is canceled, but it would
be a nice feature to disable the active state on the link if so.

What version of the product are you using? On what operating system?
Last revision of Jqtouch. iPhone OS 3.1.2

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=186

What steps will reproduce the problem?

1. Launch jQT demo on iPhone
2. Nav to forms demo
3. Click on Only cars radio button
4. Click on Only motorbikes radio button

What is the expected output? What do you see instead?
I expected the Only motorbikes radio button to become checked. Instead, the Only cars radio
button stayed checked and the Only motorbikes radio button stayed unchecked.

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=109

What steps will reproduce the problem?

1. Go the Preview on your iPhone
2. tap and hold multiple buttons (2 or more)
3. Release or tap About

What is the expected output? What do you see
instead?

Button goes to deselected state

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=81

So, the JavaScript loop for preloading images goes as follows (line 87 of jqtouch.js):

for (var i = jQTSettings.preloadImages.length; i > 0; i--)

The problem is that the first loop variable is the length of the preloadImages array, and because arrays are 0-indexed, it's off by one and thus jQTouch always performs a HTTP request to preload an "undefined" image. The loop should be written correctly if the intent was to iterate backwards through the list:

for (var i = jQTSettings.preloadImages.length-1; i >= 0; i--)

Or instead to load the images sequentially, instead of doing it backwards:

for (var i = 0; i < jQTSettings.preloadImages.length; i++)

That's it.

This pageAnimationStart callback I've written is only working when the panel in question is opened from a certain location. The panel animates properly from both locations, but only one is executing the callback. I'm building my app to use the pageAnimationStart events wherever possible so that I don't have to use the tap event on multiple different links.

url: http://dartzdeals.monkee-boy.com

pageAnimationStart callback:

    $('#coupons-by-location').bind('pageAnimationStart pageAnimationEnd', function(event, info){
            alert('Now animating #coupons-by-location');
            var businessName = $(this).data('businessName');
            var businessLocation = $(this).data('location');
            $(this).find('h1').text(businessName);
            if (businessLocation){
                $(this).find('.toolbar').after('<h2>'+businessLocation+' Location</h2>');
            }
    });

To replicate the problem, select a city, then a category, then a business name, then a business location. You should see the alert and the panel should animate properly. Then tap the "Add to Favorites" button and then tap the gear icon in the top right.

This takes you to the Favorites panel whose main ul > li > a links also go to the #coupons-by-location panel. These links successfully animate the panel, but they do not execute the callback and you do not see the alert. One thing to note is that the links on the Favorites panel are generated dynamically from a local database (which is why you have to save an item to Favorites for anything to show up here). The links on the panel that works are static.

Any help is greatly appreciated - I've spent hours trying to figure this out to no avail. If you need any more code snippets, let me know. Thanks!

I've noticed a few times that buttons (.individual li) cannot be tapped if
the scroll is still going on at all. It turns the button green, but nothing
happens. You have to tap it again to work.

When submitting a form an the page has to reload, the same IDs will be used.

A fix for this is e.g. to delete the old page from the stack:

In animatePages() trigger at the end:
if( fromPage[0].id == toPage[0].id )
{
fromPage.remove();
}

If you add a Google map and try to drag/pan the map the jQTouch drag gets in the way and
produces a funny behavior.

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=44

For example, if you want to use an image in li (menu), and you want use .counter, the .counter is not vertical align to
center.

Fix is:

ul li { /* line 143 in themes/jqt/theme.css add this line:
position: relative;

ul li small.counter { /* line 412 delete old margin and add:
position: absolute;
top:50%;
right: 10px;
margin-top: -10px;

ul li.arrow small.counter { /* line 429 change to:
right: 25px;

Sorry about posting issue, GC have disable SVN commit for everyone :)

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=57

What steps will reproduce the problem?

• Type in url to jqtouch site with a different page currently loaded

What is the expected output? What do you see instead?

• Site loads and then redirects to the previous page

What version of the product are you using? On what operating system?

r148

Please provide any additional information below.

As stated above. Im running the latest svn version of jqtouch. If there
is any arbitrary page loaded and i browse to my jqtouch site, the page
loads and then redirects back to the last site. This appears to be
intermittent but easily reproducible.

The best I have been able to track this down too is the hashCheck()
function as below.

   function hashCheck() {
        var curid = currentPage.attr('id');
        if (location.hash != '#' + curid) {
            clearInterval(hashCheckInterval);
            goBack(location.hash);
        }
        else if (location.hash == '') {
            location.hash = '#' + curid;
        }
    }

commenting out goBack(location.hash); fixes the issue. however i have no
clue what this in the process breaks.

When loading data into a page with json, the loaded data flickers.

Example:
I just want to show a digit on the startpage. By using json I request the
digit every 2 seconds from a PHP script and display the newest digit.
This works so far... BUT, the digit flickers on every refresh. This does
not look very nice (and I want to refresh more like just one digit).

If jqtouch is not fully loaded (because the div with the id "jqt" is
missing), the refresh of the digit is nice an smooth - no flicker (although
all pages are displayed underneath each other).

I tried the actual offical version of jqt and the latest version from the
trunk - both have the same problems.

Folks;

I'm a beginner at jQT but I'm trying to learn quickly.
I have a 'Home' button in the toolbar like so:
Home

The toolbar is at the top of every screen.

I want to 'badge' that button in such a way that I don't have to modify every screen in the application.
I want the badge to always appear if it's style.visibility = 'visible'.
If I specify absolute coordinates from top right this should handle rotation correctly, right?

So I'm thinking a div with a z-index value to 'force it to the front'....

But here's the thing I can't get me head wrapped around. so far the app is a series of screens which are implemented as divs.. The user navigates by using <li href='#scr_A">A

How do I get jQT to show '2 divs at once'? The normal div associated with the screen and now my new 'badge' div??

Hope this makes sense

By using jQTouch on an iPad it happens that after page switches with any effect, the last page flashes again for a very short time.

Maybe this depends on the iPad´s strong CPU, but anyways it would be great if jQTouch can be used on any “iDevice”.

I'd like to be able to track each page loading on my jQTouch site, and eventually make an ajax call to a reporting servlet passing the current hash (and other parameters).

How can i do that ?

I could bind this ajax call to pageAnimationEnd events on each page, but it's not thrown on direct loading. And this is far from being a pretty solution imo.

Thanks

Due to:

http://developer.apple.com/safari/library/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Animations/Animations.html

the part about the coalescing of class changes, sometimes animations appear not to work. My guess is that setTimeout triggers before the classes are coalesced and set, so sometimes, animations appear to "jump" to the next page instead of going through the animation. This is because the initial translateY() or whatever isn't getting set in time, so the animation doesn't need to go between anything.

By serializing everything with queues my problems have gone away (plus a delay). This patch also adds a missing argument to add/removeEventListener.

*** jqtouch.js 2010-08-05 23:02:38.000000000 -0700
--- /Users/cwikla/tello/tello-web/public/javascripts/jqtouch/jqtouch.js 2010-08-05 16:34:41.000000000 -0700

*** 368,375 ****
// Define callback to run after animation completes
var callback = function animationEnd(event) {

! fromPage[0].removeEventListener('webkitTransitionEnd', callback);
! fromPage[0].removeEventListener('webkitAnimationEnd', callback);

              if (animation) {
                      toPage.removeClass('start in ' + animation.name);

--- 368,375 ----
// Define callback to run after animation completes
var callback = function animationEnd(event) {

! fromPage[0].removeEventListener('webkitTransitionEnd', callback, false);
! fromPage[0].removeEventListener('webkitAnimationEnd', callback, false);

              if (animation) {
                      toPage.removeClass('start in ' + animation.name);

*** 411,426 ****
}

              // Support both transitions and animations

! fromPage[0].addEventListener('webkitTransitionEnd', callback);
! fromPage[0].addEventListener('webkitAnimationEnd', callback);

! toPage.addClass(animation.name + ' in current');
! fromPage.addClass(animation.name + ' out');

! setTimeout(function(){
! toPage.addClass('start');
! fromPage.addClass('start');
! }, 0);

          } else {

--- 411,429 ----
}

              // Support both transitions and animations

! fromPage[0].addEventListener('webkitTransitionEnd', callback, false);
! fromPage[0].addEventListener('webkitAnimationEnd', callback, false);

! toPage.queue(function() { $(this).addClass(animation.name + ' in current'); $(this).dequeue(); });
! fromPage.queue(function() { $(this).addClass(animation.name + ' out'); $(this).dequeue(); } );
!
! toPage.delay(50).queue(function() { $(this).addClass('start'); $(this).dequeue(); });
! fromPage.delay(50).queue(function() { $(this).addClass('start'); $(this).dequeue(); });

! //setTimeout(function(){
! //toPage.addClass('start');
! //fromPage.addClass('start');
! //}, 0);

          } else {

*** 659,662 ****
$.jQTouch.prototype.extensions.push(extension);
}

! })(jQuery);
\ No newline at end of file
--- 662,665 ----
$.jQTouch.prototype.extensions.push(extension);
}

! })(jQuery);

What steps will reproduce the problem?

1. turn device into landscape
2. press something that triggers the Cube animation

What is the expected output? What do you see instead?
Expected is a 3d cube with one side of the old page, and one side of the
new page.
The cube is produced but the sides are not producing a Cube because the
sides are intersecting each others (not touching each other on the side).

What version of the product are you using? On what operating system?
Version 1 beta 2

Please provide any additional information below.
It is much more apparent with a light theme (in the black one you could
miss the error)

When requesting a page that defines its own ID, insertPages doesn't remove
any existing nodes with the same ID.

This seems to be problematic when the client requests the page multiple times.

The first request will insert the node into the DOM and display it.
The second request will insert the node into the DOM and display it,
resulting in two pages with the same ID.

When the user navigates to a different page and then clicks back, the first
node gets shown.

This can also be an issue when the loaded content tries to bind an event to
the new node, all events get bound to the first node.

I've attached a small patch that seems to resolve the issue.

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=71

It looks like jQTouch currently delegates much of its initialization to the
document-ready event handler. It'd be nice to have the flexibility to
install it later.

We're trying to make JavaScript bootstrapping as asynchronous as possible
in our apps, and if the front page is light enough, it may finish loading
before the scripts are added. At that point, it looks like there's no way
to get jQTouch installed properly: if jQuery loads after the window's load
event, then ready() will never happen.

Might be as straightforward as:

• Factoring the current ready handler out into a private function, which is
  simply called from the ready handler.
• Having that new function check, and then set, a boolean flag.
• Before setting the ready handler, first check typeof(document.readyState)
  !== "undefined" && document.readyState === "complete", and if true, call
  that function directly.

(That won't work in FireFox < 3.6, and probably others, but I expect this
project is not terribly worried about non-WebKit browsers to begin
with....)

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=38

With a simple AJAX set of div pages, my app worked great on all other browsers, but Internet Explorer 8 gave a Javascript error in JQuery and did not hide the previous "pages" of my site.

ANSWER: I found that it was a CSS compatibility issue of IE8. Use the IE-8 standards mode instead of the default quirks mode and everything works. Put this line into your HTML header to set the mode:

What steps will reproduce the problem?

1. Just try any animations, they won't work on Android
2. they actually won't work either on Chrome.

What is the expected output? What do you see instead?

Animations ought to work :)
The reason they don't is the test in jqtouch.js for WebKitTransitionEvent, checking if it's an object
-- Android returns that it is a function, the test thus fail and no animations are used. Changing
this test makes animations work on Android.

Note that pasting javascript:alert(typeof XMLHttpRequest); on Chrome, Firefox and Safari, the
first two returns it's a function while Safari returns it's an object; it's likely a bug in JSC.

What version of the product are you using? On what operating system?

jqtouch.1.0-beta-2-r109 on android.

This patch does a few things:

• decode the location.hash into the id's proper value in several places
• escapes values in the css selector
• stops one extra case where you click on a link and the hashCheck fails and brings you back (e.preventDefault() was forgotten)

I'm sure quite a few current bugs might be fixed by these.

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=388

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=400

Add support for scroll position on nav to previous page.

When loading AJAX pages, the .bind() on IDs will obviously not work. The binds aren't stacked and applied again for IDs after the Ajax calls. Therefore a stack with Selectors (or even the complete bind() routine itself) could be useful.

I solved it that way:

$.jQTouch({
bindStack: function() {
$('div[id^=myaccount-editaddress-]').bind('pageAnimationEnd', function(e, info) {
console.log('bindStack success');
});
}
});

on animatePages() at the end:
jQTSettings.bindStack();

I start with an example right away:

From.html:



<TITLE>iQTouch appendTo Test</TITLE>


<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
statusBar: 'black'
});
</script>

To.html:

<script type="text/javascript">
    $(document).ready(function() {
        loadThings();
    });

    function loadThings() {
        // load things here
        $('#listOfThings').append('<li>dynamically loaded stuff</li>');
    }
</script>

When loading 'To.html' by clicking on the link in 'From.html' the JavaScript inside To.html is not executed.

I had a look at the relevant code in jqtouch.js and got to this line
$body.trigger('pageInserted', {page: $node.appendTo($body)});
within the function 'insertPages'. I remember vaguely reading somewhere that there is an issue with appendTo and Safari and that one should rather use the append function (sorry, can't remember where I read this). So I tried the following:
$body.trigger('pageInserted', {page: $body.append($node)});
and it works.

I tried this with Safari 5.0 (7533.16) with its user agent set to 'Mobile Safari 3.1.3 - iPhone' on Windows and OS X (10.6.4) . Same result on the iPhone Simulator 4.0 (211.1) on OS X (10.6.4.
My version of jQTouch is b13e517.

What steps will reproduce the problem?

1. load content using $("#someScreen .content").load();
2. Click a link from the newly loaded content

What is the expected output? What do you see instead?
Expected: Since the links in the loaded content are formatted like:
href="#create" they should animate to the

Instead:
Any link from the loaded content animates through the history and
eventually lands on the home area.

What version of the product are you using? On what operating system?
R109 / safari-win / iphoneOS 3.1.2

Please provide any additional information below.

Would i need to "register" these new links?
I did notice the insertPages() function.. is this something I need to fire?

What steps will reproduce the problem?

1. Go to a page using JQTouch (i.e: http://www.jqtouch.com/preview/demos/main/)
2. Add link to home screen
3. Open the page using the link on the home screen
4. Decline incoming call

What is the expected output? What do you see instead?
The page should work as normal when returning to the page. Instead none of the buttons/links responded when pressed.

What version of the product are you using? On what operating system?
JQTouch Revision: 109, iPhone OS 3.1.3 and 4.0

I'm having a problem linking to a top level div from within a non-home div. For example, in the following code, when I'm in the "first" panel and click on the link to "nested", I'm instead taken to "home". Is this a bug, or am I doing something wrong?

<body>
<div id="jqt">
    <div id="home">
        <div class="toolbar"><h1>Home</h1></div>
        <ul class="edgetoedge">
            <li><a href="#first">First</a></li>
        </ul>
    </div>
    <div id="first">
        <div class="toolbar">
            <h1>First</h1>
            <a href="#" class="back">Back</a>
        </div>
        <div>
            <ul id="list" class="edgetoedge">
                <li><a href="#nested">Goto nested</a></li>
            </ul>
        </div>
    </div>
    <div id="nested">
        <div class="toolbar"> 
                <h1>Nested</h1>
                <a href="#" class="back">Back</a>
        </div>
        This is the nested div.
    </div>
</div>
</body>

in the .css file, this line

body>*{display:none}

breaks any phonegap app on a WebOS device. I solved it by wrapping all my divs in a div id='container', and then instead of using an a tag to link to other parts of the document, I used javascript to show and hide divs.
Onload of the body, I hide all but the first div (my home screen)

var hideDivs = function(){
var divs = jQuery('#container').children();
for(i=1; i < divs.length; i++){
//keeps first div shown
jQuery('#' + divs[i].id).hide();
}
}

Then to link from one page to another, I just create onclick events to change which div is hidden & shown.

var changeDiv =function (fromOld,toNew){
jQuery('#' + fromOld).hide('slow');
jQuery('#' + toNew).show('slow');
}

So far this is the only solution I've been able to get working for WebOS devices.

What steps will reproduce the problem?

1. Create a page that links to any jQTouch app.
2. Click on the link to go to the jQTouch app.
3. Click on the back button of your browser or any other "back" button to go back in the
   browser's history.

What is the expected output?
You should be able to go back to the linked page.

What do you see instead?
Nothing. It stays on the index.html page of the jQTouch web app.

What version of the product are you using? On what operating system?
It does not say in the readme or the license. The zip file says 1.0 beta.
On a Mac OS X Snow Leopard. Tested though using Firefox, Safari and mobile Safari.

Please provide any additional information below.
Suggestions for a work around before jQTouch is updated?
You can go to www.anmldr.com/testtouch to see this in action (or inaction :-)

Thanks,
Linda

Original issue:
http://code.google.com/p/jqtouch/issues/detail?id=176

In Chapter 4 of "Building iPhone Apps" book on page 53: "Including the arrow class to the li is optional; doing so will add a chevron to the right side of the item in the list."
I included it, but it does not display.

Here is the CSS for chevrons on li tags (from theme.css:
ul li.arrow {
background-image: url(img/chevron.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
background-position: right center;
background-repeat: no-repeat;
}

and this CSS overwrites it (has higher preference):
ul.edgetoedge li {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1f21), to(#272729));
border-bottom: 2px solid #000;
border-top: 1px solid #4a4b4d;
font-size: 20px;
margin-bottom: -1px;
}

Basically, the latter CSS has higher precedence, and simply sets the background colour.
I also tried opening source files for this book and this chapter, and got the same behaviour.
My question is, how did you get it to display on screenshots in the book?

Safari 5 (including mobile)
jqtouch-1.0-beta-2-r109
theme: jqt
jquery 1.3.2 (1.4.2)

Hello,

These images are referenced in the apple theme theme.css but seem to be missing from the package:
../images/chevron_dg.png
../images/bgMetal.png

What steps will reproduce the problem?
1.Sliding from second level page to third level page

What is the expected output? What do you see instead?
The first time I tap the link instead of remaining to the third level page, it slides back instantly. But the second time it normally remains to the third page

UPDATE:
This problem comes from the fact that the second page was created with an Ajax request, so by commenting the line 197 startHashCheck(); the problem was resolved

What steps will reproduce the problem?

1. Include a link to the page div that is currently displayed inside that div.
2. Click that link.

What is the expected output? What do you see instead?
I expect nothing to happen. Instead, the screen goes nuts for a second then blanks out to black.

What version of the product are you using? On what operating system?
jQTouch beta 2 (r109)

I am using ASP.NET update panels to load html for search results within an update panel which is required to be inside a server side form, but any anchor tag within the form that links to a page in my application does not function as intended. Clicking the links merely brings me back to the default page.

I need to be able to search for content on the website and display the results ajaxically. Each result is an internal link to an article viewer page.
Is there any way around this?

I've noticed today that links on JQTouch have a little bug.

http://jqtouch.com/preview/demos/main/#home
When I click on "User Interface" for example, the page loads, then a screen of the previous page seems to appears for a very short time, then disappear.

I've noticed this bug only on iphone with OS 3.x ( no problem on iOS4 ).