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  data-aos="fade-up" data-aos-delay="300">
    <div >
        <div >
            <div >
                <div >
                    <span >Test Name </span>
                    <span >Test Num</span>
                </div>
            </div>
        </div>
        <div >
            <div >Test Time</div>
        </div>
        <div >
            <div ><i ></i>Test Cost</div>
            <button type="submit" >
                <span >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.

CodePudding user response：

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.