2

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?

2
  • 1
    Does the element still have the "highlighted" class applied, even though it doesn't appear highlighted? (check with firebug/dev consose/etc) And is highlighted a class used internally by jQuery mobile?
    – Eric
    Jun 2, 2011 at 16:30
  • @Eric: It actually is a class used by jQuery mobile (I wrote 'highlighted' but it's actually 'ui-btn-active'). That's a great point. Maybe we could just make our own class, huh?
    – Dan Tao
    Jun 2, 2011 at 16:40

2 Answers 2

2

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

3
  • He's using jQuery mobile, not jQuery ui.
    – Eric
    Jun 2, 2011 at 18:01
  • You misunderstand: I'm simply showing the overriding of the class. It's just a CSS thing. Jun 2, 2011 at 18:51
  • This looks like the most reliable way to accomplish what I'm after. Thanks!
    – Dan Tao
    Jun 2, 2011 at 20:14
1

Maybe you could try this:

$('div').live('pageshow',function(event, ui){
  alert('This page was just hidden: '+ ui.prevPage);
});

Docs: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html

$('#page_id').live('pageshow',function(event, ui){
    $('#button-id').click(function() {
        callService();
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.