Question

I have been working purely with ASP.NET so far, but am getting frustrated with the restrictions of the AJAX toolkit when it comes to animations, so I have been looking at using Jquery since yesterday to spice up my UI. Please bear in mind that I am a complete newbie when it comes to Jquery and client-side scripting.

I currently have a Listview which displays paragraphs of a report I am writing, like so:

<div class="projectNotesListOverall">

            <asp:ListView ID="lvProjectNotes" runat="server" DataSourceID="dsProjectNotes" DataKeyNames="Note_ID" OnItemDataBound="lvProjectNotes_ItemDataBound" OnPreRender="lvProjectNotes_PreRender" OnItemCommand="lvProjectNotes_ItemCommand" >

                <ItemTemplate>

                    <div class="projectNotesNoteContainer" >

                        <div class="projectNotesNoteTitleContainer">
                            <div class="projectNotesTitleInfo" >
                                <asp:Label ID="note_OrderLabel" runat="server" Text='<%# Eval("Note_Order") + ". " %>' CssClass="projectNotesNoteTitleLabel" />
                                <asp:Label ID="Note_TitleLabel" runat="server" Text='<%# Eval("Note_Title") %>' CssClass="projectNotesNoteTitleLabel" />
                            </div>

                            <asp:Button ID="btnMoveUp" runat="server" Text="&#x25B2;" ToolTip="Click to move up" CommandName="MoveItemUp" CommandArgument='<%# Eval("Note_Order") %>' CssClass="narrowButtons20" />
                            <asp:Button ID="btnMoveDown" runat="server" Text="&#x25BC;" ToolTip="Click to move down" CommandName="MoveItemDown" CommandArgument='<%# Eval("Note_Order") %>' CssClass="narrowButtons20" />
                            <asp:Button ID="btnEditNote" runat="server" Text="Edit" ToolTip="Click to edit this note" CommandArgument='<%# Eval("Note_ID") %>' onclick="btnEditNote_Click" CssClass="narrowButtons50" />
                        </div>

                        <div>
                            <asp:Label ID="Note_ContentLabel" runat="server" Text='<%# Eval("Note_Content") %>' CssClass="projectNotesNoteContentLabel" />
                        </div>

                    </div>

                </ItemTemplate>

            </asp:ListView>

        </div>

What I would like to do is create an onclick event on the projectNotesTitleInfo div, such that it will toggle the visibility of the Note_ContentLabel label…
I know I can do this server-side in the item databound event, in fact I did it earlier, but somehow it didn’t seem to work properly… That is, in IE, the divs seems to jump after they have been toggled, and in chrome, the first time the toggle is used, the div expands, even though it is already expanded. In the source code in Chrome, any single quotes (‘) which I add in the attributes.add(“onclick”, “”); bit show up as ' and I wonder if that might have something to do with it.

I am using ASP.NET 4, so I thought of using ClientIDMode=”Predictable” and link that to my datakey field, BUT I can’t figure out how to pass this to the onclick event of the div… I tried stuff like onclick='<%# “$(‘Note_ContentLabel_” + Eval(“Note_ID”) + “‘).toggle(”slow)” %>’ and variations of that, but none of them worked…

What is the correct approach to get this to work? In general, what is the right approach to use animations on items in repeating server controls?

Answer 1

Actually when using jquery, you may not need to attach onclick from server side – for example, in your case, a script such as below should do the trick:

$(document).ready(function() {
   // get all titles & attach click handler
   $('.projectNotesListOverall .projectNotesTitleInfo').click(function() {
       // find the related note & toggle it
       $(this).parent().parent().find('.projectNotesNoteContentLabel').toggle('slow');
   });
});

Have this script on your page and it should work. If you still find that toggling jumpy then issue can be related your CSS classes.