CODEWITHSUNDEEP
jquery-mobilebackbone.js
Ricardo Amores
Ricardo Amores

Reputation: 4687

backbone.js and jquery mobile: click on a fragment link (#something) causes a scroll to top of page

I'm using jquery mobile and backbone.js to create a single page mobile application. The idea is that all data is local to the client and external data is captured via ajax. This app is intended to be deployed using Phonegap.

I'm using jqm just for the general look & feel, style, animations, page changes etc. Backbone.js is used for handling the application model, server syncs, template rendering and routing. To prevent conflict between both libraries, all ajax-related functions in jqm have been disabled:

$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;

The main page loads a menu where each element takes you to a different application view. When you click on an element, data is retrieved using AJAX, HTML is generated on the fly and appended to the DOM, and the application changes to that page. Routing is done with url fragments for a wider browser support:

<a href="#news">News</a>

The code above makes the backbone route to perform the needed operations to retrieve the latests news form the server and render a page. All of this works flawlessly.

My problem: when I click on an element of the menu, the FIRST thing it does (before even execute any of my code) is perform a scroll to the top of the screen. It does not seem a terrible problem but that unintended scrolling messes up the loading indicator that jqm shows when making an ajax call. If the device this application is running in does not support the fixed css property, the loading indicator is positioned near the clicked element. So, if the viewport scrolls to the top, the loading indicator remains at the original position. as result, the loading indicador gets partially or totally hidden.

Any idea why this could be happening? I've tried using Visual Event to search for strange click events attached by jquery / jquery mobile with no success, so I must be missing something.

Thanks in advance!

Edit to add more information about libraries I'm using

jquery: v1.6.2

jqm: v1.1.0 (also v1.0 for blackberry devices, but the behaviour does not change between jqm versions)

backbone.js: 0.9.2 (latest as this time of writing)

Upvotes: 0

Views: 1096

Answers (1)

fguillen
fguillen

Reputation: 38792

Try to remove the default behavior of any link with something like this:

<a href="#news" onclick="return false;">News</a>

You can use more sophisticated technics.

Upvotes: 1

Related Questions