Find and update dynamically generated html element by ID

Question

I have a comments thread/discussion board much like this one. The entire comments thread is generated via a function call which returns HTML to display on the page. At the bottom of each different comment I have buttons 'Useful - YES/NO' and 'Mark as inappropriate'. When the user clicks either 'Yes', 'No' or 'Mark as inappropriate' I update the database etc but I also want to remove the buttons for that comment and show a 'Thanks for the feedback' message.

I have dynamically named containers for each "feedback button group" and what I've done so far is to cause a javascript postback with an ID to allow me to recognise which button was pushed and updated the database etc.

Where I'm struggling is to then find the containing box and update it's attributes to hide it and show another one providing user feedback.

So, .aspx page

            <div id="ThreadIntro" runat="server" class="Box PageSection">
            <h3>Query</h3>
            <div class="BoxInner">
                <asp:Label ID="lblQueryIntro" runat="server" EnableTheming="false"/>
                <asp:HiddenField runat="server" ID="hideQueryID" />
                <hr />
                <asp:Label ID="lblCommentsThread" runat="server" EnableTheming="false"/>
            </div>
        </div>

To render the comments thread, code behind calls

                lblCommentsThread.Text = thisComments.GetQueryCommentsThreadAsHTMLWidget(strQueryID)

Which returns this (just the "feedback button group")

                            "<div class=""BoxInner"">" & _
                                "<div id=""divFeedbackRID" & rdrSQL2("QueryResponseID") & """ runat=""server"">" & _
                                    "<table style=""width:100%;"">" & _
                                        "<tr>" & _
                                            "<td>" & _
                                            "Useful? <input id=""btnUsefulYesRID" & rdrSQL2("QueryResponseID") & """ type=""button"" value=""Yes"" rel=""nofollow"" onclick=""javascript:__doPostBack('UsefulYesRID" & rdrSQL2("QueryResponseID") & "', 'Click_DivButton')""/> &nbsp; <input id=""btnUsefulNoRID" & rdrSQL2("QueryResponseID") & """ type=""button"" value=""No"" rel=""nofollow"" onclick=""javascript:__doPostBack('UsefulNoRID" & rdrSQL2("QueryResponseID") & "', 'Click_DivButton')""/>" & _
                                            "</td>" & _
                                            "<td style=""text-align:right"">" & _
                                                "<a id=""linkInappropriateRID" & rdrSQL2("QueryResponseID") & """ name=""linkInappropriateRID" & rdrSQL2("QueryResponseID") & """  rel=""nofollow"" href=""javascript:__doPostBack('InappropriateRID" & rdrSQL2("QueryResponseID") & "','Click_DivButton')"">Report as inappropriate</a>" & _
                                            "</td>" & _
                                        "</tr>" & _
                                    "</table>" & _
                                "</div>" & _
                                "<div id=""divFeedbackThanksRID" & rdrSQL2("QueryResponseID") & """ runat=""server"" style=""display:none;"">" & _
                                    "Thanks for the feedback" & _
                                "</div>" & _
                            "</div>" & _

So, when I click either button or the 'inappropriate' link, this happens, Code Behind

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Request.Form("__EVENTARGUMENT") = Nothing Then
        If Request.Form("__EVENTARGUMENT") = "Click_DivButton" Then
            ProcessButtonPush(Request.Form("__EVENTTARGET"), New EventArgs())
        End If
    End If
End Sub

And I need something like this to solve my problem. Problem I'm having is that I can't find the div in the first place.

    Protected Sub ProcessButtonPush(ByVal sender As Object, ByVal e As System.EventArgs)
    Dim strQueryID As String = hideQueryID.Value
    Dim strResponseID As String
    If Left(sender.ToString, 12) = "UsefulYesRID" Then
        strResponseID = Mid(sender.ToString, 13)
        'Mark this comment as useful etc etc (no worries here, I don't need help for that)

        'Find "divFeedbackRID & strResponseID", update attributes to hide
        'Find "divFeedbackThanksRID & strResponseID", update attributes to show
        Dim divFeedback As HtmlGenericControl = Page.FindControl("divFeedbackRID" & strResponseID)
        Dim divFeedbackThanks As HtmlGenericControl = FindControl("divFeedbackThanksRID" & strResponseID)
        If Not divFeedback Is Nothing Then
            divFeedback.Attributes.Add("style", "display:none;")
            divFeedbackThanks.Attributes.Remove("style")
        End If

    ElseIf Left(sender.ToString, 9) = "UsefulNoRID" Then
        'etc
    ElseIf Left(sender.ToString, 8) = "InappropriateRID" Then
        'etc
    End If
End Sub

It would be easy if the div tag were place directly on the aspx page, I could simply say

divFeedbackThanksRID1.Attributes.Remove("style")

but since all the divs are placed on the page from a function call I can't do that. Any help would be much appreciated.

Thanks

Find and update dynamically generated html element by ID

0 Answers0