Search code examples
jqueryajaxjquery-mobilehyperlinkbookmarks

Bookmark Links not working with jquery mobile

Jquery-Mobile is interfering with my same page (Bookmark) links. To fix this, I'm attempting to disable ajax calls for hyperlinks on pages within a given site. I have successfully disabled ajax for the normal links on the page, but bookmarked links are still NOT working correctly.

I have researched the jquery mobile documentation and other questions here. I am using jquery mobile 1.4.2 and have setup a script to disable ajax calls throughout the entire page by setting ajaxEnabled to false and pushStateEnable to false in the head section. I followed the directions at http://api.jquerymobile.com/global-config/ for the order of these ("you'll need to bind your event handler before jQuery Mobile is loaded")

<script src="/cmsroot/jquery-ui-mobile/js/jquery.js"></script>
<script>
  $( document ).on( "mobileinit", function() {
    $.extend( $.mobile , {
    ajaxEnabled: false,
    pushStateEnabled: false
    });
});

</script>
<script src="/cmsroot/jquery-ui-mobile/js/jquery.mobile-1.4.2.min.js"></script>

This works to disable ajax for all the normal links on the page. However, my bookmark (same page links) are not working.

I have two kinds of bookmark links: 1) links to a place on the same page 2) links to a place on a different page

1) When linking to a place on the same page, the link just won't work. The link below does nothing when clicked

 <p><a href="#thebottom">jump to the bottom</a></p>
 <!-- lots of html stuff in between -->
 <p><a id="thebottom">&nbsp;</a></p>
 <p>testing jump to bottom content....</p>

2) When linking to a place on a different page, the link will go to the indicated page, jump down to the appropriate bookmark, then jump back to the top of the page (you can see this happen in chrome only). the destination page also has the ajaxEnabled set to false at the top of the page.

<!-- splinks.html -->
<p>see the <a href="destination.htm#sapchart">SAP Calculation Chart</a></p>

<!-- destination.htm --> 
<p><a id="sapchart"></a>

You can see a live code version of this problem at http://www.etsu.edu/testing/splinks.htm

Any help in getting these same page (bookmark) links to work is greatly appreciated.

Solution

  • After more research, the answer is "it cannot be done."

    It seemed like disabling the hash listening would be the key to enabling bookmark links. I inserted the code below in an attempt to tell jquery to stop using hash tags, but this did nothing to help enable the normal functionality of bookmarks. 

     <script type="text/javascript">
        $( document ).bind( "mobileinit", function() {
            $.mobile.ajaxEnabled = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
            $.mobile.changePage.defaults.changeHash = false;
        });

  </script>

    I have determined there is no way to make html bookmarks work on pages that call jquery mobile. This global solution did not work at all.

    I was able to get same page links to work by adding rel="external" or "data-ajax=false" as attributes to the tag. But I could never get links to a location on a different page 

    <a href="jumpto_on_a_new_page#jumplocation">jump to location on a new page</a>

    to work at all.

    The following is just my opinion: Overall, I'm very disappointed in jquery.mobile. For our application, it seems very invasive and bulky. Imho, hijacking a character like the hash tag that has long standing, global use across most websites is not good practice. Perhaps I don't have a good enough understanding of the platform and what it is built to to...that is entirely possible.