Question

I am currently using jQuery Mobile on a project and have run into a funny little quirk.

We have a screen where multiple buttons are used to toggle what information is displayed (basically, buttons are being used as radio buttons). We have added click handlers to the buttons that look something like this:

// This is all grossly oversimplified, of course.
function callService() {
  service.sendRequest()
    .success(function(response) {
      displayResponse(response);
      $('#button-id').addClass('highlighted')
    })
    .error(function(response) {
      displayErrors(response.errors);
    });
}

$('#button-id').click(function() {
  callService();
});

As you can perhaps see or at least guess, the above code makes an asynchronous service call when the button is clicked. When the service returns a response, the screen is updated and the button is supposed to be highlighted.

What’s happening is this: when we set our mock server (a server set up for local testing that just returns dummy data) to have a delay of 0 ms, the button doesn’t get highlighted. It seems that the highlighting is applied, but then immediately removed by jQuery as it does some styling of its own to deal with the clicking (i.e., updating the style on hover, on click, and then on release).

When we set the delay to something more realistic, or even as low as 250 ms (not going to happen given the actual back-end services used by this app), the problem goes away. My best guess is that jQuery finishes with all its style updates within that time window, so when the service finally does return a response the update to the button is no longer overwritten.

In reality, this isn’t much of an issue since the services used in production will have a delay time of something closer to 1-2 s. I’m just curious if there is any way to deal with this the “right” way; e.g., is it possible to write code that will run guaranteed after jQuery has finished with its multiple style updates to an element?

Answer 1

Simply use your own class and override any styles jQuery applies. Something like http://jsfiddle.net/morrison/cj8ra/.