href click sometimes opens in new page

[barts2108]

Hi,

I have some links <a href="http://...." > tags inside <div> <ul> <li>, and they appear as 'buttons' (jqt theme) on my main page. When I click the link it will get data from the webserver which is a formatted html <div> with content.

• Sometimes the new <div> is inserted in the DOM and I will get a page transition.
• Sometimes the new <div> opens in a new page

jQTouch 1.4.2 Revision 150
Safari 5.0.2 (7533.18.5)
Mobile Safari iPod Touch 3.1.3

edit: I found that whenever I left click on the href, a new page opens in the same window, when I middle click the mouse, the page opens correctly (sliding to the correct div).

edit2: Tested again with jquery 1.3.2 and that one works. Note that I use <div id="jqt"> with 1.4.2 but not with 1.3.2. When switching the version I also switch the extensions and themes.

[jonathanstark]

I think I have this fixed in the latest version (r159). If you still see issues, please reopen this and add a comment. Thanks! j

[barts2108]

Updated to r159 but the problem still exists.

The ajax call on line 444 (coincidence??) gives an error if I use left-click on a href, but it gives success when I middle click (the mouse wheel click).

In error I see readyState 4, status 0.

If you need more information, I can try to find out.

PS I am cannot find any option to re-open issues on github. Please help me to set the status to open.

Edit: I also see this happening when I have a success on the ajax call, thus it is not just a matter of the ajax call

[barts2108]

Additional info:

Upon left click I see in the error console : failed to load resource
The data coming from that particular resource is loaded and displayed as a new page

Upon middle click I see nothing wrong in the error console.
The data is loaded and the page transition is normal as expected.

It seems that the link (href="http://address:port/myresource") is loaded but upon left click jqtouch does not wait for the data to load correctly.

The server supplies a html snippet with a surrounding div containing a div ID that was generated by the server. When everything goes fine, I can see (web inspector) that the html snippet is inserted in the body and that the original href link is replaced with the div ID (some kind of caching ?)

It looks to me that the page transition is done before the new data is completely inserted into the DOM.

[barts2108]

I downloaded the jqtouch.zip from here and minimized my app to test again. I was able to catch the headers from the communication when the href is clicked:

GET /myserver/doaction?section=M&start=0&num=30 HTTP/1.1
Host: 10.100.1.100:5555
User-Agent: Mozilla/5.0 (iPod; U; CPU iPhone OS 3_1_3 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16
Referer: http://10.100.1.100:5555/
Accept: application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,/;q=0.5
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: keep-alive

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: X-Requested-With
Access-Control-Max-Age: 86400
Date: Thu, 13 Jan 2011 07:14:52 GMT
Content-Length: 581
Content-Type: text/html;charset=UTF-8
Server: Tiny WebServer
Keep-Alive: timeout=20, max=400
Connection: Keep-Alive

To me this looks normal.... I will try to setup a test environment. unfortunately this issue is blocking my app as the ipod can't be tricked with a middle click

[barts2108]

Testcase:

http://www.maakmenietgek.com/testcase151.html

Source of testcase:

http://www.maakmenietgek.com/testcase151.zip

The transition the page linked to in the href fails in Safari and Chrome when using left click, but succeeds when using middle click.

[barts2108]

If I download jqtouch from the www.jqtouch.com website (version 1 beta 2) or r109, then it simply works fine with the normal left click.

[barts2108]

I have traced the problem back to the "last good" and "first failing" jqtouch files. As the problem starts to occur between checkins on one day with the same revision number, I am posting the comment line here. Please note that the date April 24 in the header must be very wrong if it is checked in on October 19

From the jQTouch history in GitHub, on October 19, 2010:

Last good working version (for this issue)

Comment that was used at checkin

Added check to set body id to jqt if no jqt element is found 

$Revision: 148 $
$Date: 2010-04-24 17:00:00 -0400 (Sat, 24 Apr 2010) $ 
               ^^^^^^^^^ WHAT's wrong with the date here ?
$LastChangedBy: davidcolbykaneda $

First version that incorrectly opens href links

Comment that was used at checkin

Minor refactoring. Note that checkboxes, radiobuttons,
and form submission are all screwed up - working on that next. 

$Revision: 149 $
$Date: Tue Oct 19 12:52:33 EDT 2010 $
$LastChangedBy: jonathanstark $

Now I am tracing which exact line causes the problem. Once isolated I will feedback here

[barts2108]

My link from the testcase (I added spaces to make show the full tag

<a href="http://www.maakmenietgek.com/tc_issue151.html"><span style="vertical-align: middle;">Open test page</span></a>

Note the span inside the anchor tag. This causes the click handler to fail to execute the e.preventDefault.

        function clickHandler(e) {
            _debug();

            // Prevent the default click behavior
            if (e.target.nodeName === 'A') {   <<<< nodeName === SPAN
                e.preventDefault();
            }
            
            // Convert the click to a tap
            $(e.target).trigger('tap');
            
        }

This e.preventDefault has been added between the two revisions that I mentioned earlier. However I do not know why it has been added but it breaks the usage of tags within the anchor tag.

Tracing this to the latest revision:

$Revision: 159 $
$Date: Tue Dec 28 22:40:38 EST 2010 $
$LastChangedBy: jonathanstark $

Gives me the same kind of problem here

            if ($el.attr('href')) {
                if (!$el.isExternalLink()) { // Checks for mailto, maps, tel, checkboxes, etc...
                    e.preventDefault();
                    _debug('Preventing default click behavior');
                }
            };

$el.attr('href') shows as 'undefined'. I assume that this is caused because of the span tag as well.

Can you please open this issue again as bug, or should I open a new issue for this ?

[joshangell]

Hi there, I can confirm I am getting the same issue, if I put any tags inside an a tag with a href I get a new page loaded and not the animated slide.

For example:

<a href='some-ajax-page.html'>
    This is a link
    <em>with some styled text</em>
    <img src='some-image.jpg' width="80" align="left" />
</a>

If I click the plain text the default click behaviour works, if I click the image or any other tag then it breaks and goes to a new page.

Anyone got any ideas how to resolve this?

Cheers,

Josh

[jonathanstark]

Hi everybody - Thanks for all the info. Working on a fix. Stay tuned - j

[joshangell]

Hi all

I would just like to report this seems to be fixed in the latest revision:
$Revision: 161 $
$Date: Wed Jan 19 23:43:35 EST 2011 $
$LastChangedBy: jonathanstark $

Cheers,

Josh

[jonathanstark]

Excellent! Thanks so much for the update. - j