locked
Referencing contols in a repeater for both binding and javascript RRS feed

  • Question

  • User-579688761 posted

    I have an asp repeater which has some item information, an accept button, a cancel button and a reason for cancellation text box. I want the cancel button to validate that there is some text in the cancel (and if there isn't pop up a "you need to enter a reason"). I want the accept button to just submit the item on the page. This is my attempt, but the function does not want to find (bind) txtReason. There is obviously a big gap in my understanding!

    <asp:UpdatePanel runat="server" ID="updatePanelAcceptOrReject">
        <ContentTemplate>
            <asp:Repeater runat="server" ID="AcceptOrRejectRepeater" OnItemDataBound="AcceptOrRejectRepeater_ItemDataBound">
                <ItemTemplate>
                    <asp:Label ID="lblDescription" runat="server" Text='<%# Bind("ItemDescription")%>'></asp:Label
                    <asp:Label ID="lblReasonForCancelling" runat="server" Text="Reason for rejection"></asp:Label>
                    <asp:TextBox runat="server" ID="txtReason"></asp:TextBox>
                    <script type="text/javascript">
                        function fnCheckforCancelReason() {
                            var txt = document.getElementById('<%=txtReason.ClientID%>').value.trim();
                            if (txt == "") {
                                alert('The textbox should not be empty...');
                                document.getElementById(txtReason).focus();
                                return false;
                            }
                        }
                   </script>
                   <asp:Button ID="btnReject" runat="server" Text="Reject" CommandArgument='<%# Bind("ItemID") %>' OnClientClick="javascript:return fnCheckforCancelReason()" OnClick="btnReject_Click" />
                    <asp:Button ID="btnAccept" runat="server" Text="Accept" CommandArgument='<%# Bind("ItemID") %>' OnClick="btnAccept_Click" />
                </ItemTemplate>
            </asp:Repeater>
        </ContentTemplate>
    </asp:UpdatePanel>

    So I have a some questions (apart from the main one: why this does not work?)

    is it ok to put the script in the repeater element?

    does the clientIDMode need to be a particular setting (its inherit at the moment)?

    how does the javascript resolve that there are multiple instances of the itemTemplate on the client page?

    Should the "container" to resolve the controls be The "itemTemplate" (or a panel in it) rather than "document" ? if so how would I code this?

    Thanks

    Thursday, December 7, 2017 10:11 AM

All replies

  • User-1838255255 posted

    Hi ex glider pilot,

    According to your description and needs, i make a modify based on your code, please check:

    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function fnCheckforCancelReason(ele) {
                debugger;
                //get the Repeater index  
                var number = parseInt(ele.id.replace(/[^0-9\.]/g, ''), 10);
                //find the correspond input text 
                var txt = document.getElementsByClassName("txtReason")[number].value;
                if (txt == "") {
                    alert('The textbox should not be empty...');
                    document.getElementsByClassName("txtReason")[number].focus();
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel runat="server" ID="updatePanelAcceptOrReject">
                    <ContentTemplate>
                        <asp:Repeater runat="server" ID="AcceptOrRejectRepeater">
                            <ItemTemplate>
                                <asp:Label ID="lblDescription" runat="server" Text='<%# Bind("ItemDescription")%>'></asp:Label>
                                <asp:Label ID="lblReasonForCancelling" runat="server" Text="Reason for rejection"></asp:Label>
                                <asp:TextBox runat="server" ID="txtReason" CssClass="txtReason"></asp:TextBox>
                                <asp:Button ID="btnReject" runat="server" Text="Reject" OnClientClick="javascript:return fnCheckforCancelReason(this)" />
                                <asp:Button ID="btnAccept" runat="server" Text="Accept" /><br />
                            </ItemTemplate>
                        </asp:Repeater>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    
    protected void Page_Load(object sender, EventArgs e)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("ItemDescription", typeof(string));
                dt.Rows.Add("XXXX");
                dt.Rows.Add("XXXX");
                dt.Rows.Add("XXXX");
                AcceptOrRejectRepeater.DataSource = dt;
                AcceptOrRejectRepeater.DataBind();
            }

    Result;

    Best Regards,

    Eric Du 

    Friday, December 8, 2017 7:36 AM
  • User-1716253493 posted

    Maybe like this

    Place js outside repeater, add additional tb id parameter

            <script type="text/javascript">
                function fnCheckforCancelReason(txtid) {
                    var txt = document.getElementById(txtid).value.trim();
                    if (txt == "") {
                        alert('The textbox should not be empty...');
                        document.getElementById(txtReason).focus();
                        return false;
                    }
                }
            </script>

    repeater itemdatabound

        protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if(e.Item.ItemType==ListItemType.Item)
            {
                TextBox txt = (TextBox)e.Item.FindControl("textbox1");
                LinkButton btn = (LinkButton)e.Item.FindControl("linkbutton1");
                btn.OnClientClick = string.Format("javascript: return fnCheckforCancelReason('{0}')", txt.ClientID);
            }
        }

    I have not test it yet, i hope you understand what i mean

    Friday, December 8, 2017 8:30 AM