Hi
I'm designing my own website with help from this book and following chapter 11, I've tried using the watermark plugin using this line
Code:
$.updnWatermark.attachAll({ cssClass: 'Watermark' });
when I try to access the page that is using it, this message appears:
Error: Unable to get property 'attachAll' of undefined or null reference
I've looked at the other threads that discuss this problem, but it hasn't solved mine as far as I can tell. The code is the same as the book and the other threads, the jquery files are in the script folder within the root. The controls folder containing ContactForm.ascx is within the root.
Below shows my ContactForm.ascx file
Code:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContactForm.ascx.cs" Inherits="ContactForm" %>
<% if (false) { %>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<% } %>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
<p>
Alternatively you can fill out the form below:</p>
<p>
* Required Field.</p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="TableWrapper">
<table class="table" runat="server" id="FormTable">
<tr>
<td>
Name: *</td>
<td>
<asp:TextBox ID="tbName" runat="server" CssClass="InputBox" ToolTip="Enter your name"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="tbName" CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Enter your Name" ></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Email: *</td>
<td>
<asp:TextBox ID="tbEmail" runat="server" CssClass="InputBox" ToolTip="Enter your email"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="tbEmail" Display="Dynamic"
ErrorMessage="Enter your Email Address" CssClass="ErrorMessage"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="tbEmail" ErrorMessage="Enter a valid Email Address"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" CssClass="ErrorMessage"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
Confirm Email: *</td>
<td>
<asp:TextBox ID="tbEmailConfirm" runat="server" CssClass="InputBox" ToolTip="Retype your email"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="tbEmailConfirm" Display="Dynamic"
ErrorMessage="Confirm your Email Adrress" CssClass="ErrorMessage"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToCompare="tbEmail" ControlToValidate="tbEmailConfirm" Display="Dynamic"
ErrorMessage="Re-type Email Address" CssClass="ErrorMessage"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>
Phone:</td>
<td>
<asp:TextBox ID="tbPhone" runat="server" CssClass="InputBox" ToolTip="Enter your phone"></asp:TextBox>
</td>
<td>
</td>
</tr>
<tr>
<td>
Message: *</td>
<td>
<asp:TextBox ID="tbReason" runat="server" Height="78px" TextMode="MultiLine"
CssClass="InputBox" ToolTip="Enter your message" ></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="tbReason" Display="Dynamic"
ErrorMessage="Enter your Message"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="bSend" runat="server" Text="Send" onclick="bSend_Click" />
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<asp:Label ID="Message" runat="server" CssClass="Attention" Text="Message Sent" Visible="false">
<p runat="server" id="MessageSentpara" visible="false" class="MainBodyText">
Thank you for your message. I will get in touch with you if necessary.</p></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="MainBodyText">
Please Wait....
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<script src="../Scripts/jquery.updnWatermark.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.updnWatermark.attachAll({ cssClass: 'Watermark' });
$('form').bind('submit', function () {
if (Page_IsValid) {
$('#TableWrapper').slideUp(3000);
}
});
});
//function pageLoad() {
// $('.Attention').animate({ width: '600px' }, 3000).animate({ width: '100px' }, 3000).fadeOut('slow');
// }
</script>
Can anyone see something I have missed? Do I have to alter something in another file for this to work? If there is something else that you need to ask just say?
Thanks
Matthew