Alert box by using WebMethod return with Message

Question

I want to show an Alert Message Box When Selected Date is Match with Database Date on datetime picker.

Even though WebMethod is working fine, my code right now is everytime I select, alert message always come out without checking.

Test.aspx.cs

    [System.Web.Services.WebMethod]
     public static string GetDateFromDB(DateTime compareDate)  
    {
        string selectedDate = compareDate.ToString("yyyy/MM/dd");

        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["LoginDBConnectionString1"].ConnectionString);
        SqlCommand com = new SqlCommand("SELECT * from Holiday where Date='" + selectedDate + "'", conn);
        SqlDataAdapter sqlDa = new SqlDataAdapter(com);
        DataTable dt = new DataTable();
        sqlDa.Fill(dt);

        if (dt == null || dt.Rows.Count == 0)
             return "NG";               
        else
            return "OK";
    }

Test.aspx

      <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
                <input type='text' class='date' id="datepicker" autocomplete="off">
                <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
                <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
                <script>
                    jQuery(function ($) {

                        $("#datepicker").datepicker({
                            onSelect: function (dateText) {                                    
                                alert("Selected date: " + dateText + "; input's current value: " + this.value);
                                $(this).change();
                                $.ajax({
                                    type: "POST",
                                    url: "Test.aspx/GetDateFromDB",
                                    data: '{ "compareDate" : "' + dateText + '"}',
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    //success: OnSuccess,
                                    //failure: function (response) {
                                    //    alert(response.d);
                                    //}
                                });
                            },
                          }
                        ).on("change", function () {
                            display("Got change event from field");
                        });

                    function display(msg) {
                        $("<p>").html(msg).appendTo(document.body);
                    }

                    });
                </script>

Answer 1

It alerts always because alert message is into onChange event. You need to move this to on Success of AJAX call. Below is edited code of yours.

Edit : Check condition as per return value from code behind (i.e "OK" & "NG").

 <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
                <input type='text' class='date' id="datepicker" autocomplete="off">
                <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
                <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
                <script>
                    jQuery(function ($) {

                        $("#datepicker").datepicker({
                            onSelect: function (dateText) {                                    
                                $(this).change();
                                $.ajax({
                                    type: "POST",
                                    url: "Test.aspx/GetDateFromDB",
                                    data: '{ "compareDate" : "' + dateText + '"}',
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    success: function(data)
                                             {
                                                 if(data == "OK")
                                                 {
                                                     alert("Selected date: " + dateText + "; input's current value: " + this.value);
                                                 }                                              
                                             },
                                    //failure: function (response) {
                                    //    alert(response.d);
                                    //}
                                });
                            },
                          }
                        ).on("change", function () {
                            display("Got change event from field");
                        });

                    function display(msg) {
                        $("<p>").html(msg).appendTo(document.body);
                    }

                    });
                </script>

Note: Above changes is Non-Tested. Please write comment if its not working.