CODEWITHSUNDEEP
javascriptjqueryjquery-mobilehyperlinkanchor
Mahdi Ghiasi
Mahdi Ghiasi

Reputation: 15301

jQuery Mobile anchor links to other page are not working

I'm creating a jQuery Mobile web application.

This link, works correctly:

<a href="/ThePage/25" data-transition="slidedown">Click Here 1</a><!--This is working-->

But, these links which have anchors are not working:

<a href="/ThePage/25#3" data-transition="slidedown">Click Here 2</a><!--This is not working-->
<a href="/ThePage/25/#3" data-transition="slidedown">Click Here 3</a><!--This is not working-->

How to make those links that have # work with ajax navigation?

Edit: The page, which contains these links, contains some links to different articles. And /ThePage/25 contains the full text of that articles. I want each link to go to somewhere inside /ThePage/25. So I've used #. (#3 means the third article in the page)... Do you know any better way?

Edit 2: I'm simply trying to load/show a page and then jump within it...

Edit 3: My jump inside that page isn't a simple jumping. It's a custom handled jumping with hashchange event. But if there is any other method, I can change that page...

Upvotes: 2

Views: 7421

Answers (2)

Suave Nti
Suave Nti

Reputation: 3739

You can try using this from JS like this , I had problems with # tags :

<a class='homeSet'>Home</a>

....

 $('body').on('click', '.homeSet', function(ev) {
    $.mobile.changePage('/home.html#myhome', {
        transition : "slide"
    });
    return false;
    });

Upvotes: 2

Tim Hoolihan
Tim Hoolihan

Reputation: 12396

add rel="external" to any links that have an anchor # and you don't want to load via ajax.

New Links would be:

<a href="/ThePage/25#3" rel="external" data-transition="slidedown">Click Here 2</a><!--This is not working-->
<a href="/ThePage/25/#3" rel="external" data-transition="slidedown">Click Here 3</a>

See http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html for more detail.

Upvotes: 6

Related Questions