locked
How to Disable a button with databinding. RRS feed

  • Question

  • I can succesfully bind the iframe below so I know my JavaScript objects are binding correctly.  My question is I can't figure out or find an example of how to have a button enabled or disabled based on a databinding property like true or false.  I'm not an html wizard but I do know that if I include disabled="disabled" then the button is non-clickable.  If I leave that out, the button behaves like a button.  How can I get that to toggle with a databinding?

     
    <button class="action" style="margin-bottom: 30px;margin-top: 75px;"  disabled="disabled"
                    data-win-bind="textContent: showpicturestext"  id="showPicturesId"></button>
                <article>
    
                    <div data-win-control="SdkSample.ScenarioOutput" style="height: 386.93px; width: 552px;">
                        <div id="webContentOutput" style="background-color: white">
                            <div id="resultInWeb">
                                <iframe id="webContentIframe" data-win-bind="src: BodyTextHtmlUrl" style="height: 590.57px; width: 559.79px;"></iframe>
                            </div>
                        </div>
                    </div>
                </article>


    Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider

    Saturday, July 14, 2012 8:42 PM

Answers

  • Hi,

    The data-disabled is not needed, please give the code which I point out in my previous reply a try:

    <button id="btn" data-win-bind="disabled: disabled"></button>
     
     var btn = document.getElementById("btn");
    var ctx = { disabled: true };
    WinJS.Binding.processAll(btn, ctx);
     
    Please bind the disabled property of the button to a property in the data context using data-win-bind. In the above sample, the data context is an object which contains a single property named disabled.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, July 18, 2012 11:03 AM
    Moderator

All replies

  • ping

    Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider

    Tuesday, July 17, 2012 4:04 AM
  • Hi,

    From my experience, you can set disabled to either true or false in JavaScript. So a normal binding will work fine, but please make sure the property in your data source is a boolean type.

    Here is a quick sample for your reference:
     
            <button id="btn" data-win-bind="disabled: disabled"></button>
     
    var btn = document.getElementById("btn");
    var ctx = { disabled: true };
    WinJS.Binding.processAll(btn, ctx);

    Now the button will be disabled. If you change the disabled property of the ctx object to false, the button will be enabled.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework



    Tuesday, July 17, 2012 10:54 AM
    Moderator
  • I'm not quite following.  I tried below what I thought you meant below (that is, on my basic nav page I have list and I've verified the selectionChanged function is called and both if's are evaluated so the bottom code does come through.

    What am I missing?

          <div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
                <button class="action"  style="margin-bottom: 30px;margin-top: 75px;"  data-disabled="disabled"
                    data-win-bind="textContent: showpicturestext"  id="showPicturesId"></button>
                <article>

            selectionChanged: function (args) {
                var listView = document.body.querySelector(".itemlist").winControl;
                var details;
                var that = this;
                // By default, the selection is restriced to a single item.
                listView.selection.getItems().done(function (items) {
    
                    if (items.length > 0) {
                        that.itemSelectionIndex = items[0].index;
                        
                        if (items[0].data.showpicturestext == "No Pictures Attached") {
                            var btn = document.getElementById("showPicturesId");
                            var ctx = { disabled: true };
                            WinJS.Binding.processAll(btn, ctx);
                        }
                        
                        details = document.querySelector(".articlesection");
                        binding.processAll(details, items[0].data);
                    }
                });


    Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider

    Tuesday, July 17, 2012 10:46 PM
  • Hi,

    The data-disabled is not needed, please give the code which I point out in my previous reply a try:

    <button id="btn" data-win-bind="disabled: disabled"></button>
     
     var btn = document.getElementById("btn");
    var ctx = { disabled: true };
    WinJS.Binding.processAll(btn, ctx);
     
    Please bind the disabled property of the button to a property in the data context using data-win-bind. In the above sample, the data context is an object which contains a single property named disabled.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, July 18, 2012 11:03 AM
    Moderator
  • Hi,

    I will mark the reply as an answer. If you find it no help, please feel free to unmark it and follow up.

    Thanks.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, July 25, 2012 5:05 AM
    Moderator
  • Does this add the attribute "disabled" to the DOM element when "disabled = true" and removes the attribute "disabled" when setting "disabled=false"?
    Thursday, April 25, 2013 3:31 PM