Primary tabs

Question
Fabio Goncalves · Dec 14, 2015

Zen Mojo - Disable button on JQM Plugin

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.

Attached documents
  • Example that I have copied from LoadAndSave sample in order to test the button disable
    • 00
    0 2 210 3

    Replies

    Bernd Mueller · Dec 14, 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

    00 0
     
    Stefan Wittmann · Dec 15, 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

    00 0