Datepicker and ajax is not working in master page

Question

Please find the my below code default.aspx

 

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="title" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="head" Runat="Server">

<script src="CSS/js/JavaScript.js"></script>

<script src="CSS/js/jquery-2.2.0.js"></script>

<script src="CSS/js/jquery-ui.js"></script>

<script>

$(function () {

$("#<%= TxtFrm.ClientID %>").datepicker();

$("#<%= TxtTo.ClientID %>").datepicker();

$("#<%= TxtFrm.ClientID %>").on('change', function () {

var d = new Date();

var month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : '' + (d.getMonth() + 1);

var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();

var year = d.getFullYear();

var current_date = month + "/" + day + "/" + year;

var date = $("#<%= TxtFrm.ClientID %>").val();

if (new Date(current_date).getTime() < new Date(date).getTime()) {

$("#<%= TxtLev.ClientID %>").val("Planned");

} else {

$("#<%= TxtLev.ClientID %>").val("Unplanned");

}

});

});

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<%--<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>

<script type="text/javascript">

$(function () {

$("[id*=TxtTo]").blur(function () {

var user = {};

user.FromDate = $("[id*=TxtFrm]").val();

user.ToDate = $("[id*=TxtTo]").val();

console.log(user.FromDate);

console.log(user.ToDate);

$.ajax({

type: "POST",

url: "Default.aspx/GetCustomers",

data: '{user: ' + JSON.stringify(user) + '}',

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (r) {

console.log(r);

var ddlCustomers = $("[id*=ddlCustomers]");

ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');

$.each(r.d, function () {

ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));

});

},

error: function (data) {

alert("fail");

}

});

});

});

</script>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="Content_body" Runat="Server">

<div>

<asp:TextBox ID="TxtFrm" runat="server"></asp:TextBox>

<asp:TextBox ID="TxtTo" runat="server"></asp:TextBox>

<asp:TextBox ID="TxtLev" runat="server"></asp:TextBox>

<asp:DropDownList ID="ddlCustomers" runat="server" >

<asp:ListItem Text="Select " Value="0"></asp:ListItem>

</asp:DropDownList>

</div>

</asp:Content>

THIS IS MY C# CODE

 <----------default.cs-------------------->

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Web.Services;

using System.Configuration;

using System.Data.SqlClient;

using System.Web.Script.Services;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

public class Name

{

public String FromDate { get; set; }

public String ToDate { get; set; }

}

[WebMethod]

[ScriptMethod]

public static List<ListItem> GetCustomers(Name user)

{

string constr = ConfigurationManager.ConnectionStrings["LMS"].ConnectionString;

using (SqlConnection con = new SqlConnection(constr))

{

using (SqlCommand cmd = new SqlCommand("select Emp_Nm from dbo.Emp_Master"))

{

List<ListItem> customers = new List<ListItem>();

cmd.CommandType = CommandType.Text;

cmd.Parameters.AddWithValue("@fromdate", user.FromDate);

cmd.Parameters.AddWithValue("@todate", user.ToDate);

cmd.Connection = con;

con.Open();

using (SqlDataReader sdr = cmd.ExecuteReader())

{

while (sdr.Read())

{

customers.Add(new ListItem

{//Value = sdr["CustomerId"].ToString(),

Text = sdr["Emp_Nm"].ToString()

});

}

}

con.Close();

return customers;

}

}

}

}