1

I am new to JS and appreciate some assistance please. Thank you to Swati, sometimes missing a thing like a tags can cause hair pulling! ☺

Overview: My script receives Json Array data from Php/SQL database via AJAX GET. My scripts creates bootstrap card rows and populates them and appends them. The script works fine. Testing: To avoid you setting up a database to test, I have replicated the received data format in the example below so it already contains the Data in a Obj called var = data. On page load it auto runs and populates.

Below the main script I set up a script alert the ID of theD iv, when you click the text "RecordID (click me)"in the row results

Problem: After the change attribute line below is ran and the RecordID text is clicked onthe row results. Only the first record alerts the ID from the Jason Data. The other records do Nothing when clicked.

carDetailCloned.find('.testid').attr("id",car.id);

I changed my ID alert script with another and I still got the same result!

Below is the The Complete working File

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


</style>  
    </head>
    <body>
    
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="album py-1">
  <div class="container bg-light">
    <div class="row py-2">
      <div class="col-md-3 card-container">
        <div class="card mb-3 shadow-sm">
          <div class="hover-container">
           
            
              </a>
          </div>
          <div class="card-body CarDetail">
          
          <div class="testid"  id=""> RecordID (click me):</div> 
          <p class="card-text font-weight-bold">
            </p>
            <p class="card-text font-weight-bold">Make:
              <span class="Make"></span>
            </p>
            <p class="card-text font-weight-bold">Model:
              <span class="Model"></span>
            </p>
            <div class="d-flex justify-content-between align-items-center">
              <p class="font-italic table_data">Year 
                <span class="Year"></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <button id="testbtn" type="submit" class="btn btn-success">AJAX</button>
</div>
<script>
$(document).ready(function(){

  var data = [
  
   {id:31,make:"Audi",model:"R8",year:2000},
   {id:32,make:"Ferrari",model:"FF",year:2000},
   {id:33,make:"Mazda",model:"Rx-7",year:2000},
  
  ];
  
    $.each(data, function( i, car ) {
    if(i == 0) {
      $('.card').find('.testid').attr("id",car.id);
      $('.card').find('.Make').text(car.make);
      $('.card').find('.Model').text(car.model);
      $('.card').find('.Year').text(car.year);
      
    } else {
      var carDetailCloned = $('.card').first().clone();
      carDetailCloned.find('.testid').attr("id",car.id);
      carDetailCloned.find('.Make').text(car.make);
      carDetailCloned.find('.Model').text(car.model);
      carDetailCloned.find('.Year').text(car.year);
     
      $('.card-container').append(carDetailCloned); 
    }
  });
});
</script>


<script>
//  Click to alert ID of div 
$('.testid').click( function(){
    var name = $(this).attr("id");
    alert(name);
});
</script>
   
    </body>
</html>
Jvaskana
  • 53
  • 9
  • You are finding only the 'testid' class so its correct that nothing else change https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find In the example find method only return the first one – Khant Jan 21 '21 at 17:29
  • `$('.testid').click(...)` adds an event listener to the elements that are in the DOM at the time of execution, which is only the first one. The other elements are only generated after that `.click()` task has been executed already. – Andreas Jan 21 '21 at 17:30
  • Either use the methods in the dupe target or simply move the `$('.testid').click(...)` part into the `$(document).ready(function() { ... })` and below the `$.each()` loop – Andreas Jan 21 '21 at 17:31

0 Answers0