External links not opening in jQtouch

Question

I'm coding a web app for Document Managers using jQtouch and have made a 'Top Searches' part of it. You can see the whole thing at http://dl.dropbox.com/u/97184921/Project/index.html

The following code is supposed to show a unordered list (which it does) with the two items - onen linking to Google and the other to BBC as test websites. They should both have thumbnails and they are displayed, but it doesn't seem to send the user to either Google or BBC when the links are clicked. Can anyone help?

        <li><a href = "http://www.google.co.uk/"><img height = "20" width = "20" src = "images/search.png">google</a></li>
        <li><a href = "http://www.bbc.co.uk/"><img height = "20" width = "20" src = "images/search.png">bbc</a></li>

Answer 1

On the jqtouch site they suggest that you use target="_blank" when opening external links.

If you'd like to open the link in the same window, try rel="external"

source

better source with more info

Answer 2

The problem appears to be that your links are hooked by your javascript, and that the script to process the click is failing.

If you look in the javascript console in FIreBug you'll find errors like the following after you click on a link:

OPTIONS http://www.google.co.uk/ 405 (Method Not Allowed) jquery.js:19 XMLHttpRequest cannot load http://www.google.co.uk/. Origin http://dl.dropbox.com is not allowed by > Access-Control-Allow-Origin.

As @davehale23 suggests, adding target="_blank" to your links will fix the issue (again you can test this by tweaking one of the link elements in FireBug.

Answer 3

<li><a href = "http://www.google.co.uk/" target="_blank"><img height = "20" width = "20" src = "images/search.png">google</a></li>
<li><a href = "http://www.bbc.co.uk/" target="_blank"><img height = "20" width = "20" src = "images/search.png">bbc</a></li>

target="_blank" in the anchor tag opens a new page (or tab) rather than having it open in the current browser window. It's the best approach because the user doesn't have navigate away from your site and deal with caching issues if the user wants to go back to your site.

http://jsfiddle.net/UCnY3/

If you use google chrome's developer tool displays the error:

"Refused to display document because display forbidden by X-Frame-Options."

More info on X-Frame-Options can be found here:

https://developer.mozilla.org/en-US/docs/The_X-FRAME-OPTIONS_response_header

There are two possible values for X-Frame-Options:

DENY The page cannot be displayed in a frame, regardless of the site attempting to do so.

SAMEORIGIN The page can only be displayed in a frame on the same origin as the page itself.

In other words, if you specify DENY, not only will attempts to load the page in a frame fail when loaded from other sites, attempts to do so will fail when loaded from the same site. On the other hand, if you specify SAMEORIGIN, you can still use the page in a frame as long as the site including it in a frame it is the same as the one serving the page.