jquery mobile error - cannot call methods on button prior to initialization; attempted to call method 'disabled'

Question

According to the documentation (http://jquerymobile.com/demos/1.2.0/docs/api/events.html), the pageinit event should be called after all the widgets and plugins for a jQuery mobile page have been executed. So, I believe I should be able to interact with elements on that page with impunity in the event callback. However, I listen for the page to initialize and then try to interact with a button on the page, and I get the following error:

cannot call methods on button prior to initialization; attempted to call method 'disabled'

I've put together a codepen, to show you:

http://codepen.io/mattsnider/pen/mvcbD

What gives? Does the pageinit not work as documented or is this a bug?

Answer 1

There's nothing wrong with your pageinit event. The wrong lies in the <a> tag.

To remove the error you're getting, you'll have to make two changes to your code :

1. Its not disabled, its disable
2. before your call the disable method, you have to call button() method. Thus, you would've initialized the button element.

This is how the code will look like now :

 $('#ageNext').button().button('disable');

But, if you do this, you'll get an error like this :

Uncaught TypeError: Cannot call method 'addClass' of undefined

The culprit lies in the code which invokes the disable method

disable: function() {
  this.element.attr( "disabled", true );
  this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true ); 
  //^^ Uncaught TypeError: Cannot call method 'addClass' of undefined    
  return this._setOption( "disabled", true );
}

You see the this.button there? This will become undefined if the element is not a real button.

So that said, I've got the disable to work only on input[type=button] and <button/> type of elements. For some reason, this doesn't work as expected on <a/> impersonating buttons. I've got this to work by manually adding ui-disabled class to the element, like this :

$(document).on('pageinit', '#age', function (e) {
    $('#ageNext').addClass('ui-disabled');
});

Demo : http://jsfiddle.net/hungerpain/gzAHT/