如何在javaScripts中获取动态元素的InnerText

Question

I have been struggling with is one for 2 days now. I have seen many somewhat similar questions here like This One which was the closest so far but couldn't figure something out of it.

Here is what I want:

I'm generating card dynamically with elements & Button. when I click of the generated card's button, I want to retrieve the texts of the elements in that card.

Here is the Origin html Card

 <div class="col-12 mb-3" data-aos="fade-up" data-aos-delay="300">
    <div class="row g-0 border theme-border-radius theme-box-shadow p-2 align-items-center theme-bg-white">
        <div class="col-12 col-md-3">
            <div class="d-flex">
                <div class="d-flex flex-column ms-2">
                    <span class="font-small d-inline-flex mb-0 align-middle">Test Name </span>
                    <span class="font-small d-inline-flex mb-0 align-middle">Test Num</span>
                </div>
            </div>
        </div>
        <div class="col-4 col-md-2">
            <div class="fw-bold">Test Time</div>
        </div>
        <div class="col-12 col-md-3 text-center mt-md-0 mt-2">
            <div class="fw-bold"><i class="bi bi-currency-dollar ms-2"></i>Test Cost</div>
            <button type="submit" class="btn-select btn btn-effect">
                <span class="font-small">Select</span>
            </button>
        </div>
    </div>
</div>

Here is the JavaScript Function that dynamically generates the card

  function TestFunction(parm1, param2, param3) {
            // alert('Function Scripts');
            $("#card").empty();
            var html = "";

            $.ajax({
                type: "POST",
                url: "WebService.asmx/Serverfunction",
                data: "{'param1':'" + param1 + "', 'param2':'" + param2 + "', 'param3':'" + param3 + "'}",
                // data: "{'Destination':'" + Destination + "'}",
                // data: "{'DepDate':'" + DepDate + "'}",
                contentType: "application/json",
                dataType: "json",
                success: function (data) {

                    try {
                        //alert("Testing Filter By Search Function : " + Origin);

                       
                        for (var i = 0; i < data.d.length; i++) {

                            if (data.d[i].TestName != "") {

                                html += " <div class='col-12 mb-3' data-aos='fade-up' data-aos-delay='300'>";
                        html += " <div class='row g-0 border theme-border-radius theme-box-shadow p-2 align-items-center theme-bg-white'>";

                                html += "   <div class='col-12 col-lg-3'>";

                                html += "  <div>";
                                html += "  <span class='font-small d-inline-flex mb-0 align-middle TestName'>" + data.d[i].TestName + "</span> |";
                                html += "  <span class='font-small d-inline-flex mb-0 align-middle TestNum'>"  + data.d[i].TestNum + "</span> ";
                                html += "  </div>";

                                html += "  </div>";

                                html += "  <div class='col-4 col-lg-2'>";
                                html += "  <div class='fw-bold TestTime' id='TestTime"+i+"'>" + data.d[i].TestTime + " </div>";
                                html += "  </div>";

                                html += "  <div class='col-12 col-lg-3 text-center mt-2 mt-lg-0'>";
                                html += "   <div class='fw-bold TestCost'><i class='bi bi-currency-dollar ms-2'></i>" + data.d[i].TestCost + " </div>";
                                html += "   <button id='btn"+i+"' type='submit' class='btn-select btn btn-effect'> <span class='font-small'>Select</span></button>";
                                html += "  </div>";


                                html += "  </div>";
                        html += "  </div>";

                            }
                        }
                       
                        $("#card").append(html)
                    } catch (e) {
                        error(e);
                    }
                },
                error: function (xhr, status, e) { alert(xhr.responseText); }
            });

        }

I call this function in server Side(WebService ) which is working fine. The Card is generated with regards to the returned records, if it;s 3 records it generated x3 , if its 5 records it generated x5 and so on.

The problem is retrieving the Texts of these elements in the generated card. When one the buttons is clicked, I want Insert them into the database.

I was able to identify which Button was clicked, but based on that, I could figure out awy to get the InnerText/InnerHTML of the elements of that Card.

Here is one of What I have tried so far.

$(document).on('click', '.btn-select', function(){
            var btnId = $(this).attr('id')
             alert("Cliked on : "+btnId );

            //const testName = $('#btnId').parent.parent.find('.TestName').innerText;
            const testName = $('#btnId').parent.parent.find('.TestName').innerHTML;

             alert(tot);
            alert("Testing");
        });

with gets the clicked button, but I was trying to navigate to the root parent and find the elements by class which apparently is not working, so what could I be doing wrong, what other possible solutions?. I would appreciate if anyone could me with this one, I'm really stuck. This is my first really project with Combinations.

I am using Asp.net Webforms with Javascript (WebService) as mentioned earlier, Thanks in advance.

Answer 1

To get the text of the elements in the card when the button is clicked, you can use the.text() method to retrieve the text content of the elements.

Here is an example of how you can achieve this:

First, you can give each element in the card a unique class or id, so that you can easily select it using jQuery. For example, you can give the TestName element a class.test-name, and the TestNum element a class.test-num.

Next, you can use the.click() method to attach a click event handler to the button element. Inside the event handler function, you can use the $(this) selector to reference the button element that was clicked, and then use the.closest() method to find the parent card element.

Finally, you can use the.find() method to search for the.test-name and.test-num elements within the parent card element, and then use the.text() method to retrieve the text content of these elements.

Here is an example code that demonstrates this:

$('.btn-select').click(function() {
  var $card = $(this).closest('.theme-bg-white');
  var testName = $card.find('.test-name').text();
  var testNum = $card.find('.test-num').text();

  console.log(testName, testNum);
});

I hope this helps. Let me know if you have any questions.

Answer 2

Hum, do you really need all that javascript and making web calls?

In most cases, you better off to just create a div, and float it (so the web layout becomes responsive), and that quite much it.

So, anytime (at least in web forms land), you better off to layout the ONE thing you want "one time", and then if you want it to repeat?

then surround that "thing" with a repeater.

So, say this layout:

<asp:Repeater ID="Repeater1" runat="server"  >
    <ItemTemplate>                
        <div style="border-style:solid;color:black;width:320px;height:450px;float:left;margin-right:10px;margin-bottom:10px">
            <div style="text-align:center;padding:2px 10px 2px 10px" class="cards" >
                <asp:Button ID="cmdMyView" runat="server" Text="View" 
                    CssClass="btn-info" style="float:right"
                    CommandArgument = '<%# Eval("ID") %>'
                    OnClick="cmdMyView_Click" />
                <br />

                <h3 id="hFighter" runat="server"><%# Eval("Fighter") %></h3>
                <asp:Image ID="Image2" runat="server" 
                    ImageUrl = '<%# Eval("ImagePath") %>' Width="170" />
                <h4>Engine</h4>
                <asp:Label ID="EngineLabel2" runat="server" Text='<%# Eval("Engine") %>' />
                <h4>Description</h4>
                <asp:Label ID="DescLabel" runat="server" Text='<%# Eval("Description") %>' />
                <br /> 
            </div>
        </div>

        </ItemTemplate>
</asp:Repeater>

Now, with a repeater, then we don't need javascript, we don't have messy server side code or methods, and we don't have client side javascript messy code either.

Code behind is thus:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadData()
    End If

End Sub

Sub LoadData()

    Using conn As New SqlConnection(My.Settings.TEST4)
        Dim strSQL As String =
            "SELECT * FROM Fighters"

        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            Dim rstData As New DataTable
            rstData.Load(cmdSQL.ExecuteReader)
            Repeater1.DataSource = rstData
            Repeater1.DataBind()
        End Using
    End Using

End Sub

And we now see/get this card type viewer:

And if we re-size the page, then it changes the layout quite nice, since we floated those divs.

And why the above suggestion?

Well, then note the code for the button click, it also rather easy, and thus is this:

Protected Sub cmdMyView_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim rRow As RepeaterItem = btn.NamingContainer

    Debug.Print("Row index = " & rRow.ItemIndex)
    Debug.Print("DATA ID pk = " & btn.CommandArgument)
    Dim hFighter As HtmlGenericControl = rRow.FindControl("hFighter")
    Debug.Print("Fighter name = " & hFighter.InnerText)

End Sub

Output of a button click:

Row index = 4
DATA ID pk = 5
Fighter name = Lockheed SR-71 Blackbird

Note how little wiring up and work and effort this was. In fact, it was so very little effort that I was able to cook up, post and write an working example for this post!

So, unless some real compelling reason exists to "inject" a bunch of markup into the page, in most cases, you can use say a repeater, or datalist or some other type of control to "repeat" the markup for you over and over.

Not only does this elminate a lot of messy code, but MORE bonus points is then note how easy the row button click becomes - we can get the row index, and pluck/pull/get information about each repeated item with far greater ease, and so far, we not had to create expensive web methods, not had to write expensive JavaScript code, and as noted, the bonus part is the ability to get information about the "one thing" we clicked on.

So, while a lot of platforms suggest/use/force/normally often have looping code and code to inject the markup, in webforms, in most cases, you don't need all that extra code, looping, and wiring up of code. as above shows, we did not even write ONE loop to repeat the information.