dpDesignz
Reputation: 1959
Jquery UI isn't loading in ASP.NET page
I'm trying to assign the Jquery datepicker to an aspx page, but no matter how hard I try the Jquery just doesn't seem to load. This is my pages code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Movie Form</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; line-height: -1; font-family: 'Arial Rounded MT', Verdana, Tahoma, sans-serif;}
body {background: white url('bg.jpg') top left repeat-x;}
h1 {color: white; margin-bottom: 8px;}
#wrapper {margin: 0 auto; width: 450px;}
#content {margin: 100px 0 20px 0; padding: 40px 20px; border: 10px solid white; width: 380px; background: #4ec0e5;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlYzBlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMjk2YjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(top, #4ec0e5 0%, #3296b6 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ec0e5), color-stop(100%,#3296b6));background: -webkit-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: -o-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: -ms-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: linear-gradient(top, #4ec0e5 0%,#3296b6 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ec0e5', endColorstr='#3296b6',GradientType=0 );-moz-border-radius: 52px;border-radius: 52px;}
.rqd {color: #f00;}
#buttons{margin-top: 20px;text-align: center;}
#submit, #reset {-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');background-color:#ededed;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777777;padding:6px 24px;text-decoration:none;text-shadow:1px 1px 0px #ffffff;}
#submit:hover, #reset:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');background-color:#dfdfdf;}
#ValidationSummary1 ul{list-style: none; margin: 10px 0 0 10px; font-size: smaller;color: white;}
#ValidationSummary1 li{border-bottom: 1px solid red;}
#resultLbl{margin: 10px 0 0 10px; font-size: smaller;color: white;}
</style>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="content" class="gradient">
<h1>Movie <strong>Form</strong></h1>
<asp:Table ID="Table1" runat="server" Width="380px">
<asp:TableRow>
<asp:TableCell Width="45%">
<span class="rqd">*</span> <asp:Label ID="fNameLbl" runat="server" Text="First Name"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="fName" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="fNameRqd" ControlToValidate="fName" runat="server" Text=" <img src='err.png' alt='*' title='Please enter your first name'>" ErrorMessage="Please enter your first name"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="fNameReg" ControlToValidate="fName" runat="server" ValidationExpression="^[\s\S]{0,40}$" Text=" <img src='err.png' alt='*' title='Your name can be no more than 40 characters'>" ErrorMessage="Your name can be no more than 40 characters"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="address1lbl" runat="server" Text="Address Line 1"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="address1" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="address1Rqd" runat="server" ControlToValidate="address1" Text=" <img src='err.png' alt='*' title='Please enter your address'>" ErrorMessage="Please enter your address"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="address1Reg" ControlToValidate="address1" runat="server" ValidationExpression="^[\s\S]{0,120}$" Text=" <img src='err.png' alt='*' title='Your address can be no more than 120 characters'>" ErrorMessage="Your address can be no more than 120 characters"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="townlbl" runat="server" Text="Town/City"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="town" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="townRqd" runat="server" ControlToValidate="town" Text=" <img src='err.png' alt='*' title='Please enter your Town/City'>" ErrorMessage="Please enter your Town/City"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="townReg" ControlToValidate="town" runat="server" ValidationExpression="^[\s\S]{0,76}$" Text=" <img src='err.png' alt='*' title='Your Town/City name can be no more than 76 characters'>" ErrorMessage="Your Town/City name can be no more than 76 characters"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="postcodelbl" runat="server" Text="Postcode"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="postcode" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="postcodeRqd" runat="server" ControlToValidate="postcode" Text=" <img src='err.png' alt='*' title='Please enter your Postcode'>" ErrorMessage="Please enter your Postcode"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="postcodeReg" runat="server" ControlToValidate="postcode" ValidationExpression="\d{4}" Text=" <img src='err.png' alt='*' title='Your Postcode can only be 4 digits long'>" ErrorMessage="Your Postcode can only be 4 digits long"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="emaillbl" runat="server" Text="Email"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="email" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="emailRqd" runat="server" ControlToValidate="email" Text=" <img src='err.png' alt='*' title='Please enter your email'>" ErrorMessage="Please enter your email"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="emailReg" runat="server" ControlToValidate="email" ValidationExpression="^(?=.{0,100}$)\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" Text=" <img src='err.png' alt='*' title='Please enter a valid email address less than 100 characters long'>" ErrorMessage="Please enter a valid email address less than 100 characters long"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="phonelbl" runat="server" Text="Phone No."></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="phone" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="phoneReq" runat="server" ControlToValidate="phone" Text=" <img src='err.png' alt='*' title='Please enter your phone number'>" ErrorMessage="Please enter your phone number"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="phoneReg" runat="server" ControlToValidate="phone" ValidationExpression="\d{0,14}" Text=" <img src='err.png' alt='*' title='Your phone number can be no longer than 14 digits'>" ErrorMessage="Your phone number can be no longer than 14 digits"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="doblbl" runat="server" Text="D.O.B"></asp:Label> <span style="font-style: italic; font-size: x-small;">(dd/mm/yyy)</span>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="dob" runat="server" Width="140px" CssClass="datePicker"></asp:TextBox>
<asp:RequiredFieldValidator ID="dobRqd" runat="server" ControlToValidate="dob" Text=" <img src='err.png' alt='*' title='Please enter your Date of Birth'>" ErrorMessage="Please enter your Date of Birth"></asp:RequiredFieldValidator>
<asp:CompareValidator id="dateValidator" runat="server" Type="Date" Operator="DataTypeCheck" ControlToValidate="dob" Text=" <img src='err.png' alt='*' title='Please enter a valid date in the format dd/mm/yyy'>" ErrorMessage="Please enter a valid date in the format dd/mm/yyy"></asp:CompareValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="movielbl" runat="server" Text="Favourite Move"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="movie" runat="server" Width="140px">
<asp:ListItem>We Bought a Zoo</asp:ListItem>
<asp:ListItem>The Breakfast Club</asp:ListItem>
<asp:ListItem>Puss in Boots</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="movieReq" runat="server" ControlToValidate="movie" Text=" <img src='err.png' alt='*' title='Please pick a movie'>" ErrorMessage="Please pick a movie"></asp:RequiredFieldValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="genderlbl" runat="server" Text="Gender"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="gender" runat="server" Width="140px">
<asp:ListItem Value="male">Male</asp:ListItem>
<asp:ListItem Value="female">Female</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="genderReq" runat="server" ControlToValidate="gender" Text=" <img src='err.png' alt='*' title='Please pick a gender'>" ErrorMessage="Please pick a gender"></asp:RequiredFieldValidator>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<div id="buttons">
<asp:Button ID="submit" runat="server" Text="Submit" OnClick="Submit_Click" /> <input type="reset" name="reset" value="Clear" id="reset" />
</div>
<asp:Label ID="resultLbl" runat="server"></asp:Label>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
</div>
</form>
<script>
$(function () {
$(".datePicker").datepicker({
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true,
dateFormat: 'dd-mm-yy'
});
})();
</script>
</body>
</html>
CS File
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Submit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
resultLbl.Text = "Congratulations this is valid data!";
}
}
}
All the files are right, they are all there, it just won't show. Any ideas?
I also tried the id in the script at the bottom as #<%= dob.ClientID %> as some people suggested but it just will not load.
Upvotes: 0
Views: 1279
Answers (3)
javram
Reputation: 2645
Have you tried declaring the jquery script reference first?
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.18.custom.min.js"></script>
Update! As I said in the comments below, I got it working, just had to remove the line:
showOn: "button"
Upvotes: 3
Bojin Li
Reputation: 5789
Assuming you posted the entirety of your code, I can think of 2 things:
You seem to have not referenced the CSS file for jQuery UI. It is required and should have been part of your downloaded package. The default name for you should be similar to
jquery-ui-1.8.18.custom.css. Keep in mind the css also refers to a number of static resources that need to be in the correct locations relative to the css file. The jQuery UI Getting Started Guide has all the information you need to set up jQuery UI correctly.Since you seem to have downloaded a custom build of jQuery UI, did you remeber to include the DatePicker widget?
Upvotes: 1
fenone
Reputation: 1084
The script statement at the bottom may need another set of parenthesis to actually run the function. Right now it is declared but not being run.
<script>
$(function () {
$(".datePicker").datepicker({
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true,
dateFormat: 'dd-mm-yy'
});
})();
</script>
Upvotes: -1
Related Questions
- Jquery UI Not Loading
- Why is jQuery failing to load?
- JQuery UI in ASP.NET MVC5 not working
- Jquery not loading ASP.NET
- Jquery not working on content page
- Can't make jquery UI work in MVC
- Jquery won't load
- JQueryUI absolutely not working with my aspx page
- Jquery/Jquery UI not loading?
- jQuery UI not loading