jQWidgets Forums

jQuery UI Widgets Forums General Discussions Editors Button, RepeatButton, ToggleButton, LinkButton Re-enabling a DropDownButton is not removing the Disabling Classes

This topic contains 4 replies, has 2 voices, and was last updated by  mtbvfr 12 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • mtbvfr
    Member

    Hi,

    Setting the “disabled” Property to “false” for a DropDownButton is not removing the “Disabling” Classes from the Grand-Child Wrapper Div and the Grand-Parent Div to which the jqxDropDownButton function is applied.

    For example the name I used for the Div for a DropDownButton is divSiteAddDropDown.

    When I use the jqxDropDownButton function to create the button I have the “disabled” Property set to “true”.

    divSiteAddDropDown has the jqx-dropdownlist-state-disabled-ui-darkness and jqx-fill-state-disabled-ui-darkness Classes applied to it.

    It also contains a grand-child Div, created by the jqxDropDownButton function, which is named dropDownButtonWrapperdivSiteAddDropDown and has the jqx-disableselect and jqx-disableselect-ui-darkness Classes applied to it.

    When I dynamically set the “disabled” Property to “false”, the “Disabling” Classes are not removed from the ClassList for these Divs.

    However, the button is able to be Tapped or Clicked.

    Just accept the Alerts that appear.

    Thank you, Michael


    Peter Stoev
    Keymaster

    Hi,

    jqx-disableselect CSS Class is not related to the fact whether the Button is Disabled or Not or whether the “disabled” property is set to true or false.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mtbvfr
    Member

    On further analysis, I have determined that $(‘#divSiteAddDropDown’).jqxDropDownButton({disabled:false});
    is only removing the Class “jqx-fill-state-disabled” from the Element “divSiteAddDropDown”. It should also be removing the Class “jqx-fill-state-disabled-ui-darkness”.

    Yes, I could add the following line of code to my script but it shouldn’t be necessary.

    document.getElementById(“divSiteAddDropDown”).classList.remove(“jqx-fill-state-disabled-ui-darkness”);

    I don’t have the time to play around with jsFiddle.

    Why can’t one of you use Firefox with Firebug to see for yourselves what I am referring to?

    Thank you, Michael.


    Peter Stoev
    Keymaster

    Hi,

    Please, Test first, because posting a bug report.

    Here is the code for Enabling/Disabling:

    $("#dropDownButton").jqxDropDownButton({ width: 150, height: 25, theme: 'ui-darkness' });
    $("#dropDownButton").jqxDropDownButton({ disabled: true });
    $("#dropDownButton").jqxDropDownButton({ disabled: false });

    Below is the result. You may see that there is no jqx-fill-state-disabled-ui-darkness there.

    <div id="jqxWidget">
    <div style="float: left; width: 150px; height: 25px;" id="dropDownButton" aria-disabled="false" role="button" aria-haspopup="true" aria-owns="dropDownButtonPopupdropDownButton" class="jqx-widget jqx-widget-ui-darkness jqx-widget-content jqx-widget-content-ui-darkness jqx-dropdownlist-state-normal jqx-dropdownlist-state-normal-ui-darkness jqx-rc-all jqx-rc-all-ui-darkness jqx-fill-state-normal jqx-fill-state-normal-ui-darkness">
    <div tabindex="0" style="background-color: transparent; -webkit-appearance: none; outline: none; width:100%; height: 100%; padding: 0px; margin: 0px; border: 0px; position: relative;"><div id="dropDownButtonWrapperdropDownButton" style="outline: none; background-color: transparent; border: none; float: left; width:100%; height: 100%; position: relative;" class="jqx-disableselect jqx-disableselect-ui-darkness"><div id="dropDownButtonContentdropDownButton" style="outline: none; background-color: transparent; border: none; float: left; position: relative; width: 125px; height: 25px; left: 0px; top: 0px;" class="jqx-dropdownlist-content jqx-dropdownlist-content-ui-darkness"><div style="position: relative; margin-left: 3px; margin-top: 5px;">Home</div></div><div id="dropDownButtonArrowdropDownButton" style="background-color: transparent; border: none; float: right; position: relative; width: 19px; height: 25px;"><div class="jqx-icon-arrow-down jqx-icon-arrow-down-ui-darkness jqx-icon jqx-icon-ui-darkness"></div></div></div></div></div>
    <div style="float: left; margin-top: 5px; margin-left: 30px;">
    <div id="checkbox" tabindex="0" class="jqx-widget jqx-checkbox" role="checkbox" aria-checked="false" aria-disabled="false" style="cursor: pointer;"><div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all"><div style="width: 13px; height: 13px;"><span style="width: 13px; height: 13px; opacity: 0;"></span></div></div>Open on mouse over<div style="clear: both;"></div><input type="hidden" name="checkbox" value="false"></div>
    </div>
    </div>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mtbvfr
    Member

    Hi Peter,

    It was a long winded process but I eventually got there. 🙂 The following is a chronological order of how I got there.

    I had already tried the same idea as suggested in your last post but this is not a functional real-world example of the use of setting the “disabled” Property to false immediately after instantiating the Widget with the “disabled” Property set to “true”.

    I want to be able to set the “disabled” Property via code executed from another widget.

    I created a “test page” using the example you gave in your last post.

    When I comment out the 2 lines that set the “disabled” property and I add “disabled:true” to the line that instantiates the DropDownButton Widget, the button is not disabled. I have tested this on Firefox 12 and Mobile Safari (iOS 6.1.3).

    However, if I include the line that sets the “disabled” property to “true” or I enter ‘$(“#dropDownButton”).jqxDropDownButton({ disabled: true });’ via the Web Console Command Line (Firefox – Tools/Web Developer/Web Console), or the Console Command Line of Firebug, the DropDownButton becomes disabled.

    On “my own page“, if I don’t use the “disabled” property when instantiating the DropDownButton (divSiteAddDropDown), I can toggle the “disabled” property Off and On with the buttons, you can see, or via either of the Console Command Lines.

    So, the manipulation of the “disabled” property is not working correctly 100% of the time.

    After a break, which gave me a bit of time to think, I decided to see what was happening with the other DropDownButtons on the page.

    After various modifications, I eventually determined that there is a conflict with the DropDownButton named divItemDropDown BUT I don’t know what, exactly, is causing the conflict.

    If I comment out (//) the following 2 lines, then, the DropDownButton named divSiteAddDropDown becomes enabled when a Client is Selected.

    $(‘#divItemDropDown’).jqxDropDownButton({height:28,width:165});
    $(‘#divItemDropDown’).jqxDropDownButton(‘setContent’, ‘Selected Item’);

    Well, with a little more thought, I wondered if it was because the “theme” Property was not being set for the divItemDropDown DropDownButton.

    BINGO!! 🙂

    So, it seems that all DropDownButtons have to be set to the same Theme.

    However, is that the way it should function? If so, it needs to be clearly documented somewhere.

    As the other Properties are independent of each other for a DropDownButton, why is the Theme property not independent?

    What about the other widgets?

    What if you wanted to use a different theme for some widgets of the same type?

    By the time you read this, my own page may have changed a little but you will still be able to download it for experimentation/debugging locally.

    The issue I raised in the Topic “DropDownButton Pop-Up does not close when Menu is activated” still needs to be addressed.

    Thank you and hasta pronto, Michael.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Re-enabling a DropDownButton is not removing the Disabling Classes’ is closed to new replies.