Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > BOOK: Beginning ASP.NET 4 : in C# and VB
|
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 4th, 2014, 08:29 AM
Authorized User
 
Join Date: Feb 2012
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Question Problems with jquery (chapter 11) updnWatermark plugin

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>
            &nbsp;</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>
            &nbsp;</td>
        <td>
            <asp:Button ID="bSend" runat="server" Text="Send" onclick="bSend_Click" />
        </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            
        </td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</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
 
Old January 4th, 2014, 08:42 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

Take a look at this:

Code:
<script src="../Scripts/jquery.updnWatermark.js" type="text/javascript"></script>
Is that the correct path to the Script file? My guess is that it isn't. Try setting it to the root instead:

Code:
<script src="/Scripts/jquery.updnWatermark.js" type="text/javascript"></script>
That said: the watermark plugin is a bit outdated. You're better off using HTML5's placeholder attribute.

Cheers,



Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!

Last edited by Imar; January 5th, 2014 at 09:24 AM..
 
Old January 4th, 2014, 02:05 PM
Authorized User
 
Join Date: Feb 2012
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi Imar

Thanks for your reply. Although changing the path of the file didn't solve my problem for some reason (I dragged and dropped the file path into the space above the starting <script> tag and it didn't work) , using the place holder attribute did the trick, thank you!

I was wondering if you know why the placeholder attribute did not appear on my IntelliSense?

Regards

Matthew
 
Old January 4th, 2014, 02:59 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

How did your path end up? Did you add the file to the Scripts folder in the root of the site?

>> I was wondering if you know why the placeholder attribute did not appear on my IntelliSense?

You may be using an older doctype, or validating against an older version of HTML. Check the first line of your master page. For HTML 5, it should look like this:

<!DOCTYPE html>

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old January 5th, 2014, 08:17 AM
Authorized User
 
Join Date: Feb 2012
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi

Yes I placed the jquery files in the Scripts folder which is in the root of the site.

>>You may be using an older doctype, or validating against an older version of HTML. Check the first line of your master page. For HTML 5, it should look like this:

<!DOCTYPE html>


I have changed the top of the master page to <!DOCTYPE html> but the IntelliSense still doesn't pick it up. I have also removed:

<html xmlns="http://www.w3.org/1999/xhtml">

to just an open <html> tag but it still doesn't pick it up. Is there another line of code that I need to add to the master page?

Regards

Matthew
 
Old January 5th, 2014, 09:26 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

My bad. The TextBox control hasn't been extended with the placeholder attribute, so IntelliSense won't show it. However, you can still enter it manually as you already know.

A regular <input type="text" /> will have the placeholder attribute.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old January 5th, 2014, 09:48 AM
Authorized User
 
Join Date: Feb 2012
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Thumbs up

Hi Imar

I tried this and it still didn't appear. After looking it up I realised the validation was not html5 but xhtml 1.0 so changing this sorted the intellisense problem.

For anyone reading this with a similar problem using VS2010, go to options > tools, select Text Editor HTML > Validation and select HTML5 or XHTML5.

Thanks Imar for all your help much appreciated.

Regards

Matthew





Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter 11, page 378 - Jquery janilane BOOK: Beginning ASP.NET 4 : in C# and VB 8 January 11th, 2015 06:15 PM
Chapter 11 - jQuery slynn BOOK: Beginning ASP.NET 4.5 : in C# and VB 4 September 24th, 2013 01:48 PM
updnWatermark jQuery plugin into DetailsView Antonius Block BOOK: Beginning ASP.NET 4 : in C# and VB 6 August 10th, 2012 10:00 AM
jQuery from Chapter 11 akumok BOOK: Beginning ASP.NET 4 : in C# and VB 1 July 16th, 2012 12:05 PM
JQuery Troubles- Chapter 11, Exercise 1 Princess Rose BOOK: Beginning ASP.NET 4 : in C# and VB 6 May 3rd, 2010 05:35 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.