CODEWITHSUNDEEP
jquery-mobile
Brian
Brian

Reputation: 7135

How to disable toolbar buttons during page transition?

I am using an external toolbar in a jQuery Mobile site I'm working on. I initialize it like so:

$(document).ready(function () {
    $("[data-role='header'], [data-role='footer']").toolbar();
});

I have a couple of buttons in the toolbar and want to disable them during page transitions so users don't click them multiple times which seems to get the framework into a weird state. My first attempt has been to listen for the pagebeforeshow and pageshow events to programmatically disable and enable the buttons:

$(function() {
    $("[data-role='header'], [data-role='footer']").toolbar({
        create: function (event, ui) {
            $(document).on('pagebeforeshow', function () {
                $('#page-header .ui-btn').button('disable');
            });

            $(document).on('pageshow', function () {
                $('#page-header .ui-btn').button('enable');
            });
        }
    });
});

I have the code nested inside like that because I don't want to register the handlers until the toolbar has been initialized. However, I'm running into a separate problem:

Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'disable'

Since I'm not explicitly initializing the buttons myself, I'm not sure I understand how / where I can wait for them to be initialized.

Is there a better approach to this, and does anyone have any suggestions to get this working?

Upvotes: 2

Views: 437

Answers (1)

Omar
Omar

Reputation: 31732

Use .button() on input with type button, reset and submit. For anchor or button tag you need to add / remove ui-state-disabled class.

$(document).on("pagecontainerbeforehide", function () {
  $('#page-header .ui-btn').addClass('ui-state-disabled');
});

$(document).on("pagecontainershow", function () {
  $('#page-header .ui-btn').removeClass('ui-state-disabled');
});

Demo

Upvotes: 2

Related Questions