Back
  1. Home
  2. Zen Mojo - Disable button on JQM Plugin

Zen Mojo - Disable button on JQM Plugin

Web Development, ZEN Mojo, Caché

Hi All,

I am trying to disable a button on a JQM application.

I started the button as disabled according to this code: {type:'$button',caption: Button',key:'button',disabled:true}

However, I would like to enable or disable the button via JavaScript code . I have tried the following, but it don´t have the same behavior and style as the code above.  

var view = zen('mainView');
              view.disableItem('button',true,0);

I expect to get the same component behavior of {type:'$button',caption:'Standard Button',key:'button',disabled:true} when enabling or disabling the button through JavaScript code. I mean, the same style, color, behavior, etc.

I have also attached a basic test that I have done.

Can anybody help me please?

Thanks.

Comments

Bernd Mueller's picture
Comment by Bernd Mueller 14 December 2015

Hi Fabio,

it seems this is not working with the 1.3.2 jQM plugin. It works with the 1.4.3 jQM plugin, so please switch over.

I also would suggest you to do

var view = zen('mainView');

view.disableItem('button',true);

in onloadHandler() instead of onPageShow()

Regards,

Bernd

0
Stefan Wittmann's picture
Comment by Stefan Wittmann 15 December 2015

Hi Fabio and Bernd,

<documentView>.disableItem(id,newState);

is really just a shortcut for 

<layoutItem>.$disable(newState);

Both only work on standard control elements, and only *if* the library rendering the widget in question don't add special logic. jQueryMobile implements their own styles and behavior for disabling and enabling elements, therefore, it is the most stable approach to leverage the jQM logic.

A long discussion regarding this topic can be found here: http://stackoverflow.com/questions/5875025/disable-buttons-in-jquery-mobile

Let's walk through this in the ZM.jQM145.HomePage.cls demo and disable/enable the main button with the caption "Start demo".

var view = zen('mainView');

var button = view.getItemByKey('start-show');

var id = button.$findElement().id;

$('#'+id).button('disable');

$('#'+id).button('enable');

Line 1 retrieves the documentView component while line 2 retrieves the button layout object. This is pretty basic. 

In order to run jQM logic we have to find the HTML DOM element we want to disable/enable with the $() method from jQuery. As it requires the physical id that Zen Mojo generated for us we store that in a local variable id in line 3.

Line 4 now looks up the jQM widget and disables it with the supported jQM library call. Line 5 enables the button again.

In the future, we may add support for $disable and these special library calls as we have done for $show and $hide. $show and $hide work on any widget from any supported plugin.

HTH,

Stefan

0