SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru pinch's Avatar
    Join Date
    Mar 2005
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding Javascript to Items in Repeater

    I'm repeating a collection of controls that allows the user to edit a note inside of a textarea (TextBox). There are basically 2 panels, one which contains controls to view a note (if it exists) and another panel which contains controls to edit the note. Finally there is a Hyperlink to click to create the note.

    Although there are many controls, the only 2 that require server actions are the 'save' and 'delete' action. So, I'd like to use javascript to control all other aspects, for instance:

    1. If the user clicks the 'create' hyperlink, show the edit panel.
    2. If the user clicks the 'edit' hyperlink, put the note in the textarea and show the edit panal.
    3. If the user clicks the 'cancel' hyperlink, disregard the changes, hide the edit panel and show the note panel.
    etc...

    Currently I'm working on displaying the edit panel 'panNoteEdit' when the user clicks the edit hyperlink 'hlCreateNote'. This works somewhat, but not exactly how I need it to. If I set a panel's visibility to 'hidden' in javascript, the problem is the control still takes up space, but I want it to 'collapse'. The problem I'm having is when I try to set , but when I try to apply 'collapse' to the visibility property of the panel, I get an error:

    Code JavaScript:
    elem1.style.visibility = 'collapse';

    Could not get the visibility property. Invalid argument.


    Here is the page:

    Code ASP:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextBoxJavascript.aspx.cs" Inherits="TextBoxJavascript" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
      <title>Textbox Javascript</title>
      <script>
        function EditNote(hideNoteID, hidePanelID, showPanelID)  {
          var elem1 = document.getElementById(hideNoteID.id);
          var elem2 = document.getElementById(hidePanelID.id);
          var elem3 = document.getElementById(showPanelID.id);
          elem1.style.visibility = 'hidden';
          elem2.style.visibility = 'hidden';
          elem3.style.visibility = 'visible';
        }
      </script>
      <style type="text/css">
        .fakeLink {cursor:hand;color:blue;text-decoration:underline;}
      </style>
     
    </head>
    <body>
      <form id="form1" runat="server">
     
        <asp:Repeater runat="server" ID="repTextBoxes" OnItemDataBound="repTextBoxes_ItemDataBound" DataSourceID="sdsNoteData">
          <ItemTemplate>
            <div style="border:1px solid black;">
              <%--if a note exists, show the note and edit option--%>
              <asp:Panel runat="server" ID="panNoteExists">
                <asp:Label runat="server" ID="labNote" />
                <asp:HyperLink runat="server" ID="hlEditNote" Text="edit" CssClass="fakeLink" />
                <asp:LinkButton runat="server" ID="lbDeleteNote" Text="delete" />
              </asp:Panel>
              <%--if no note exists, provide create option--%>
              <asp:HyperLink runat="server" ID="hlCreateNote" Text="create" CssClass="fakeLink" />        
              <%--when in edit mode we show the textarea and save/cancel options--%>
              <asp:Panel runat="server" ID="panNoteEdit">
                <asp:TextBox runat="server" ID="tbNoteInput" TextMode="MultiLine" Rows="5" Columns="10"/>
                <asp:LinkButton runat="server" ID="lbSaveNote" Text="save" />
                <asp:HyperLink runat="server" ID="hlCancelNote" Text="cancel" CssClass="fakeLink" />  
              </asp:Panel>
            </div>
          </ItemTemplate>
        </asp:Repeater>
     
        <asp:SqlDataSource runat="server" ID="sdsNoteData" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [AlternateText] FROM [TrophyAds]"></asp:SqlDataSource>
      </form>
    </body>
    </html>

    The Code-Behind

    Code ASP:
    public partial class TextBoxJavascript : System.Web.UI.Page
    {
     
      protected void repTextBoxes_ItemDataBound(object sender, RepeaterItemEventArgs e)
      {
        if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
        {
          // controls
          Label labNote = (Label)e.Item.FindControl("labNote");
          HyperLink hlEditNote = (HyperLink)e.Item.FindControl("hlEditNote");
          LinkButton lbDeleteNote = (LinkButton)e.Item.FindControl("lbDeleteNote");
          HyperLink hlCreateNote = (HyperLink)e.Item.FindControl("hlCreateNote");
          TextBox tbNoteInput = (TextBox)e.Item.FindControl("tbNoteInput");
          LinkButton lbSaveNote = (LinkButton)e.Item.FindControl("lbSaveNote");
          HyperLink hlCancelNote = (HyperLink)e.Item.FindControl("hlCancelNote");
          // panels
          Panel panNoteExists = (Panel)e.Item.FindControl("panNoteExists");
          Panel panNoteEdit = (Panel)e.Item.FindControl("panNoteEdit");
     
          DataRowView dataRow = (DataRowView)e.Item.DataItem;
          string alternateText = dataRow["alternateText"].ToString();
          if (alternateText == String.Empty)
          {
            panNoteExists.Attributes.Add("style", "visibility:hidden");
            panNoteEdit.Attributes.Add("style", "visibility:hidden");
          }
          else
          {
            panNoteEdit.Attributes.Add("style", "visibility:hidden");
            labNote.Text = alternateText;
            hlCreateNote.Attributes.Add("style", "visibility:hidden");
          }
     
          hlEditNote.Attributes.Add("onclick", "EditNote(" + labNote.ClientID + ", " + panNoteExists.ClientID + ", " + panNoteEdit.ClientID + ");");
     
        }
      }
    }

    Thanks

  2. #2
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,623
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Visible property exists on the server, not on the client, so your script cannot talk to it.

    What you want to do is add the controls but hide them via CSS, then unhide them via script.

  3. #3
    SitePoint Zealot Ken Sharpe's Avatar
    Join Date
    Apr 2008
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly. Make them visible in the code behind, but give them a class that sets their display to none. In your javascript add another class that overrides that, or use a library (like jQuery) to do a fancy slide out animation.

  4. #4
    SitePoint Guru pinch's Avatar
    Join Date
    Mar 2005
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seems to do the trick, thanks.

  5. #5
    SitePoint Guru pinch's Avatar
    Join Date
    Mar 2005
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a bit of an old thread but I've noticed a problem in IE6. If I try to re-order my players the elements in the 'notes' area all get rendered, which breaks the layout. If you go to this page and use the drag handle to re-order players in IE6, you'll see my problem. Is there any way to hide these items even when reordering so that the layout doesn't get broken in IE6?

    Here is an explanation of my conundrum:

    1. If I don't set my element's visible to true', but hide it with css {display:none;} it will still show up when I reorder by list, thereby breaking my layout
    2. However, if I set the visible to 'false', it won't break my layout when I drag, but I also won't have access to the element in javascript to because it isn't even listed in html.

    The whole reason I'm using javascript in the first place is because there are too many elements to fix into a small area, so I hide/show elements based on certain criteria, but it appears that when I reorder my list all elements are shown regardless of their stylings.
    Last edited by pinch; Jun 5, 2008 at 19:27.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •