jQuery Mobile 1.1.0 RC1 Modifying HREF for AJAX Posts in iOS Safari

Question

Disclaimer: I am using jQuery Mobile 1.1.0 RC1 which is not a stable release yet. I have a link that needs to post an AJAX request and return a JSON response but when the link is clicked it seems that jQuery Mobile changes the HREF to a hash (#) in iOS Safari on the iPhone. It does not do this when testing in browsers with iPhone User Agents. Here is my basic HTML and JS to show what I have:

<a href="/link/to/ajaxpost/">Send Ajax Request</a>

and the JS

$('#tab a').on('click', function(e){
        var $this = $(this);
        var jsonUrl = $this.attr("href");
        alert(jsonUrl);

        $.mobile.showPageLoadingMsg();

        $.ajax({
            type: "POST",
            url: jsonUrl,
            success: function(data) {
                $.mobile.hidePageLoadingMsg();
                alert(data);
            }
        });
        return false; 
});

The value for "jsonUrl" becomes "#" (instead of the url to my ajax request) and then the value of the data variable returns the entire page and not the JSON feed that I want. The weird thing is that this only happens in iOS Safari on the iPhone. It works fine and the JSON feed comes back when I try the jQuery Mobile site with a different user agent in OSX Safari or Firefox.

I've tried adding rel="external" and data-type="ajax" to the link and it doesn't fix it. I'm also using jQuery Mobile 1.1.0 RC1, but I'm not sure if that is the issue or if I'm just not using jQuery Mobile correctly. I also don't have any other jQuery Mobile specific JS in my code, so maybe I'm missing something that will fix this. Appreciate the help.

Answer 1

Instead of:

$this.attr('href')

Use this:

$this.data('href') || $this.attr('href')

jQuery Mobile 1.1.0RC1 and on (including released 1.1.0) will set the href to any link to # when it is clicked, and store the href in a data-href attribute, until it's done doing it's thing, then put it back. It only does this on iOS Mobile Safari.

I've blogged a bit more about this, with links to related github issues discussions and some info on applying this with Ruby on Rails jQuery UJS here:

http://scottwb.com/blog/2012/06/29/jquery-mobile-breaks-your-hrefs-on-ios-mobile-safari/