locked
Enable button if C# method returns true RRS feed

  • Question

  • User-1833980242 posted

    I have a c# method with a bool return type that returns true when all criteria is met, false if it's not.  This method works correctly and returns false, as it should.  This can be seen in the DOM below where false is being inserted in the span.

    I'm trying to enable a button (id="btnToEnable")  when this C# method returns true, but can't get it to work.  

    I would ideally like to use a Telerik button to match the others in the app, but can use a regular button.  Our Telerik license has expired and our new one is hung up in a large bureaucratic process.  This is why we don't have support with them and I'm trying an alternate solution.  I wanted to mention this just in case anyone knows how to do this with Telerik UI ASP.net MVC.  Any help is greatly appreciated though. 

    This is a proof of concept that I can then apply to my project.  

     <script>
    
              function checkCompletion() {
    
                    alert("In checkCompletion()");
    
                    var year = $("#ddlOnsiteYears").val();                            
    
                    $.ajax({
                        type: "GET",
                        url: baseUrl + "Verification/AllVerificationsComplete",
                        data:
                        {
                            onsiteId: onsiteId,
                            year: year
                        },
                    })
                    .done(function (result) {
    
                        $("#testCompletionContainer").html(result).css("background-color", "yellow");
    
    
                        //var enableProp = $("#btnToEnable").prop('Enable').val();   //undefined reference error in previous attempt
    
                        $(document).ready(function () {
                            var buttonObject = $("#btnTestCompletion").data("kendoButton");
    
                            $("#btnToEnable").click(function () { buttonObject.enable(true); });
                        })
                    });
                }
            </script>
    
            @(Html.Kendo().Button()
                .Name("btnTestCompletion")
                .Content("Are verifications complete?")
                .HtmlAttributes(new { type = "button", style = "width: 180px"})
                .Enable(true)
                .Icon("ungroup")
                .Events(events => events
                    .Click("checkCompletion")
                )
            )
    
            @*Put test results in here when done to test*@
            <span id="testCompletionContainer"></span>
                    
            @*Commented out button below because I couldn't get it to work using their documentation*@ 
            @*@(Html.Kendo().Button()
                .Name("btnToEnable")
                .Content("Button to enable")
                .HtmlAttributes(new { type = "button", style = "width: 150px" })
                .Enable(false)
                .Icon("ungroup")
            )*@       
    
            <button class="k-button" id="btnToEnable" type="button" disabled>Button to enable</button>
    

    Buttons rendered in the DOM so you can see what's being set client side:

    <button tabindex="0" class="k-button k-button-icontext" id="btnTestCompletion" role="button" aria-disabled="false" style="width: 180px;" type="button" data-role="button"><span class="k-icon k-i-ungroup"></span>Are verifications complete?</button>
    
    <script>
    	jQuery(function(){jQuery("#btnTestCompletion").kendoButton({"click":checkCompletion,"icon":"ungroup"});});
    </script>
    
    <span id="testCompletionContainer" style="background-color: yellow;">False</span>
    
    <button disabled="" class="k-button" id="btnToEnable" type="button">Button to enable</button>

    Thursday, September 29, 2016 3:53 PM

Answers

  • User-1672470423 posted

    <script>

              function checkCompletion() {

                    alert("In checkCompletion()");

                    var year = $("#ddlOnsiteYears").val();                            

                    $.ajax({
                        type: "GET",
                        url: baseUrl + "Verification/AllVerificationsComplete",
                        data:
                        {
                            onsiteId: onsiteId,
                            year: year
                        },
                    })
                    .done(function (result) {

                        $("#testCompletionContainer").html(result).css("background-color", "yellow");

                      if (result == "false" || !result)    // you need to check this condition either of result == "false" or !result should work.
                      {
                           $("#btnToEnable").prop( "disabled", true );
                      }    
                      else
                      {
                            $("#btnToEnable").prop( "disabled", false);
                       }    
                    });
                }
            </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 29, 2016 4:03 PM

All replies

  • User-1672470423 posted

    <script>

              function checkCompletion() {

                    alert("In checkCompletion()");

                    var year = $("#ddlOnsiteYears").val();                            

                    $.ajax({
                        type: "GET",
                        url: baseUrl + "Verification/AllVerificationsComplete",
                        data:
                        {
                            onsiteId: onsiteId,
                            year: year
                        },
                    })
                    .done(function (result) {

                        $("#testCompletionContainer").html(result).css("background-color", "yellow");

                      if (result == "false" || !result)    // you need to check this condition either of result == "false" or !result should work.
                      {
                           $("#btnToEnable").prop( "disabled", true );
                      }    
                      else
                      {
                            $("#btnToEnable").prop( "disabled", false);
                       }    
                    });
                }
            </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 29, 2016 4:03 PM
  • User-1833980242 posted

    I should've been a littler clearer. I was waiting to add the logic until after I got the code working.  This worked - thanks for your help!

    Thursday, September 29, 2016 5:57 PM
  • User-1672470423 posted

    Glad your problem is resolved now.

    "Mark it as Answer" if it helps.

    Thursday, September 29, 2016 6:01 PM