CODEWITHSUNDEEP
javascriptjqueryjquery-mobilehyperlink
David
David

Reputation: 4777

How to get Anchor Links to work in Jquery Mobile?

Jquery Mobile has decided to treat anchor links as page requests of sort. However, this isn't good if you have a load of blog posts which have anchor links to the same page (ie href="#specs").

Is there a way to disable jquery mobile's anchor link usage on a specific page which I know I won't be using it on so I can use anchor links as they were intended, to drop down to a part of the page?

I only need a solution for anchor links on the same page (ie: href="#specs").

thanks

Upvotes: 22

Views: 33618

Answers (7)

Yonko Kilasi
Yonko Kilasi

Reputation: 341

// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all 'a' tags
        $('a[href*="#component"]').each(function () {
            // then set data-ajax to false, 
            $(this).attr("data-ajax", false);
            // at this point you can add the class to your target a tags. 
            // You can do it elsewhere but because for this example my 
            // 'a' tags are automatically generated so I just add the class here
            $(this).addClass('in-pagelink');
            // then target the class and bind to a click event 
            $('a.in-pagelink').bind('click', function (ev) {
                // here I redirect the page with window.location.assign
                // as opposed to window.location.href. I find that it works better
                window.location.assign(this.href);
                // then I close my navigation menu
                closeAll();
            });

        });

Upvotes: -1

Karthikeyan Ganesan
Karthikeyan Ganesan

Reputation: 2045

First you have to place this code into a custom.js file

$(document).bind('mobileinit', function () {
    $.mobile.loader.prototype.options.disabled = true;
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.loadingMessage = false;
});

Then add this file into your webpage before the jquery mobile js is loaded. becuase 'mobilinit' event is triggered immediately

Upvotes: 0

Mastakongo Prez
Mastakongo Prez

Reputation: 1

Thank you this solution worked for me 

<script>
  $(document).ready(function() {
    $("a").each(function() {
      if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false);
    });
  });
</script>

I replaced # with index.php which is my document root. But, it doesn't work for form button i.e input type="submit"

Upvotes: -1

Glenn J. Schworak
Glenn J. Schworak

Reputation: 340

If you are like me, converting an existing site and you don't want to go through every page right now. You can add one line of code to your header and all of your header and all of your existing internal anchor links will get the data-ajax="false" tag added.

Of course, this assumes you are including your own javascript file up in the header already. If you are not you would have to touch every page anyway. But I have a single javascript file that is included in every page already so I added this line...

$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });

This goes in your $(document).ready() block. If you don't have that block yet, here is the entire block.

$(document).ready(function() {
  $("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
});

Hope this helps. It is the same solution user700284 offers but in an automated way.

Upvotes: 6

regan_leah
regan_leah

Reputation: 294

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});

Upvotes: 1

Hendrik Jan
Hendrik Jan

Reputation: 4908

You can add the following code to the end of your page:

 <script type="text/javascript">
     $('a.native-anchor').bind('click', function(ev) {
         var target = $( $(this).attr('href') ).get(0).offsetTop;
         $.mobile.silentScroll(target);
         return false;
     });
 </script>

And add the class "native-anchor" to your anchor links.

It is not a total sollution, because the back button of your browser will move you to the previous page and not to the position of the link, but it is better than the links not working at all.

I found this sollution here: jQuery Mobile Anchor Linking

Upvotes: 2

user700284
user700284

Reputation: 13620

You could try adding a data-ajax="false" on the anchor tag.

Linking without Ajax

Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.

Reference - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

Upvotes: 48

Related Questions