updnWatermark jQuery plugin into DetailsView

Antonius Block · August 9th, 2012, 07:45 AM

I tried to apply the updnWatermark jQuery plugin to the TemplateFields of the DetailsView of the PlanetWrox Reviews.

It worked, but not perfectly like in the Table of the ContactForm.

The drawbacks are:

1) the tooltips of the TextFields are displayed right above the TextFields and not into the TextFields themselves,
2) the tooltips are not displayed in italic style.

I'm making some mistakes, are these drawbacks already known ?

Cheers
Antonius

Imar · August 9th, 2012, 08:06 AM

Hi there,

Are you applying the correct CSS class? Can you post your code?

Imar

Antonius Block · August 9th, 2012, 09:00 AM

Here below you can find the code of AggiungiRecensione.aspx (meaning AddReview.aspx).
The code works.

The sole problem is that the tooltips of the TextFields are displayed right above the TextFields and not inside them, as it is expected with the updnWatermark plugin.
Furthermore, the tooltips are hidden/shown as expected when I set the cursor inside/outside the TextFields.

Thanks for any hint.
Antonius

Code:

<%@ Page Title="Inserisci recensione" 
    Language="C#" 
    MasterPageFile="~/PagineMaster/MasterPage.master" 
    AutoEventWireup="true" 
    CodeFile="AggiungiRecensione.aspx.cs" 
    Inherits="Recensioni_AggiungiRecensione" 
%>


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


    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    
<% if (false) { %>
   <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<% } %> 

    <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" 
        DataKeyNames="Id" 
        DataSourceID="SqlDataSource1" 
        DefaultMode="Insert" 
        Height="50px" Width="125px" 
        oniteminserted="DetailsView1_ItemInserted" 
        oniteminserting="DetailsView1_ItemInserting">
        
        <Fields>
            <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" 
                ReadOnly="True" SortExpression="Id" />

            <asp:TemplateField HeaderText="Titolo" SortExpression="Titolo">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("Titolo") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Titolo") %>' TextMode="MultiLine" Width="405px" ></asp:TextBox>
                    
                    <asp:RequiredFieldValidator ID="reqValEditTitolo" runat="server" ErrorMessage="Inserire il titolo della recensione" ControlToValidate="TextBox1" SetFocusOnError="True"></asp:RequiredFieldValidator>

                </EditItemTemplate>
                <InsertItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Titolo") %>' TextMode="MultiLine" Width="405px" ToolTip="Titolo della recensione"></asp:TextBox>

                    <asp:RequiredFieldValidator ID="reqValInsertTitolo" runat="server" ErrorMessage="Inserire il titolo della recensione" ControlToValidate="TextBox1" SetFocusOnError="True"></asp:RequiredFieldValidator>

                </InsertItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Sommario" SortExpression="Sommario">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("Sommario") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Sommario") %>' TextMode="MultiLine" Width="405px" Height="100px"></asp:TextBox>
                    
                    <asp:RequiredFieldValidator ID="reqValEditSommario" runat="server" ErrorMessage="Inserire il sommario della recensione" ControlToValidate="TextBox2" SetFocusOnError="True"></asp:RequiredFieldValidator>

                </EditItemTemplate>
                <InsertItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Sommario") %>' TextMode="MultiLine" Width="405px" Height="100px" ToolTip="Sommario della recensione"></asp:TextBox>
                    
                    <asp:RequiredFieldValidator ID="reqValInsertSommario" runat="server" ErrorMessage="Inserire il sommario della recensione" ControlToValidate="TextBox2" SetFocusOnError="True"></asp:RequiredFieldValidator> 
  
                </InsertItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Testo" SortExpression="Testo">
                <ItemTemplate>
                    <asp:Label ID="Label3" runat="server" Text='<%# Bind("Testo") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Testo") %>' TextMode="MultiLine" Width="405px" Height="100px"></asp:TextBox>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Testo") %>' TextMode="MultiLine" Width="405px" Height="100px" ToolTip="Testo della recensione"></asp:TextBox>
                </InsertItemTemplate>
            </asp:TemplateField>
 
            <asp:TemplateField HeaderText="Genere" SortExpression="GenereId">
                <ItemTemplate>
                    <asp:Label ID="Label4" runat="server" Text='<%# Bind("GenereId") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                
                    <asp:DropDownList 
                         ID="ddlGeneri" runat="server" 
                         DataSourceID="sdsGeneri" 
                         DataTextField="Nome" 
                         DataValueField="Id" 
                         SelectedValue='<%# Bind("GenereId") %>'>
                    </asp:DropDownList>
                    
                </EditItemTemplate>
                <InsertItemTemplate>

                    <asp:DropDownList 
                         ID="ddlGeneri" runat="server" 
                         DataSourceID="sdsGeneri" 
                         DataTextField="Nome" 
                         DataValueField="Id" 
                         SelectedValue='<%# Bind("GenereId") %>'>
                    </asp:DropDownList>

                </InsertItemTemplate>
            </asp:TemplateField>

       

            <asp:CheckBoxField DataField="Autorizzazione" HeaderText="Autorizzata ?" 
                SortExpression="Autorizzazione" /> 
                
            <asp:BoundField DataField="DataAggiornamento" HeaderText="Aggiornamento" 
                SortExpression="DataAggiornamento" Visible="False" />

            <asp:CommandField ShowEditButton="True" ShowInsertButton="True" 
                ButtonType="Button" CancelText="Annulla" InsertText="Inserisci" />

        </Fields> 
        
        
    </asp:DetailsView> 
    
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:PlanetWroxConnectionString %>" 
        DeleteCommand="DELETE FROM [Review] WHERE [Id] = @Id" 
        InsertCommand="INSERT INTO [Review] ([Titolo], [Sommario], [Testo], [GenereId], [Autorizzazione], [DataAggiornamento]) VALUES (@Titolo, @Sommario, @Testo, @GenereId, @Autorizzazione, @DataAggiornamento)" 
        SelectCommand="SELECT [Id], [Titolo], [Sommario], [Testo], [GenereId], [Autorizzazione], [DataCreazione], [DataAggiornamento] FROM [Review] WHERE ([Id] = @Id)" 
        UpdateCommand="UPDATE [Review] SET [Titolo] = @Titolo, [Sommario] = @Sommario, [Testo] = @Testo, [GenereId] = @GenereId, [Autorizzazione] = @Autorizzazione, [DataAggiornamento] = @DataAggiornamento WHERE [Id] = @Id">
        <SelectParameters>
            <asp:QueryStringParameter Name="Id" QueryStringField="Id" Type="Int32" />
        </SelectParameters>
        <DeleteParameters>
            <asp:Parameter Name="Id" Type="Int32" />
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="Titolo" Type="String" />
            <asp:Parameter Name="Sommario" Type="String" />
            <asp:Parameter Name="Testo" Type="String" />
            <asp:Parameter Name="GenereId" Type="Int32" />
            <asp:Parameter Name="Autorizzazione" Type="Boolean" />
            <asp:Parameter Name="DataAggiornamento" Type="DateTime" />
            <asp:Parameter Name="Id" Type="Int32" />
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="Titolo" Type="String" />
            <asp:Parameter Name="Sommario" Type="String" />
            <asp:Parameter Name="Testo" Type="String" />
            <asp:Parameter Name="GenereId" Type="Int32" />
            <asp:Parameter Name="Autorizzazione" Type="Boolean" />
            <asp:Parameter Name="DataAggiornamento" Type="DateTime" />
        </InsertParameters>
    </asp:SqlDataSource>

    <asp:SqlDataSource ID="sdsGeneri" runat="server" 
        ConnectionString="<%$ ConnectionStrings:PlanetWroxConnectionString %>" 
        SelectCommand="SELECT [Id], [Nome] FROM [Genre] ORDER BY [Nome]"></asp:SqlDataSource>


<script src="../Scripts/jquery.updnWatermark.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function() 
    {
        $.updnWatermark.attachAll({ cssClass: "Watermark" });
    });
    
</script>

    </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Imar · August 9th, 2012, 09:20 AM

Did you add the Watermark CSS class to a CSS file that is used by this page?

Imar

Imar · August 9th, 2012, 09:44 AM

I just tested this out with a simple details view (see image) and it seems to work OK. looks like you're missing some CSS or something else is messing up the layout.

Which browser did you test this in?

Imar

Antonius Block · August 9th, 2012, 10:05 AM

Quote:

Originally Posted by Imar

I just tested this out with a simple details view (see image) and it seems to work OK. looks like you're missing some CSS or something else is messing up the layout.

Which browser did you test this in?

Imar

With your help, got it!

With the last versions of Explorer and Firefox, it works: the tooltips are displayed inside the TextFields as expected by the updnWatermark plugin

With Chrome (my version is 21.0.1180.75 m) the tooltips are displayed above the TextFields.

Is this a problem already acknowledged with updnWatermark ?

Thank you
Antonius

Imar · August 10th, 2012, 10:00 AM

Quote:

Is this a problem already acknowledged with updnWatermark ?

Not that I know of. Did you check the plugin maker's web site or do a Google search? Maybe someone else has discovered this as well?

FWIIW: in my Chrome (sme version) it works fine with a simple DetailsView (see attachment). Maybe it's something in your Markup or CSS that Chrome trips over....

Cheers,

Imar