Displayed Data using foreach, on another #div using onclick

user_18939689 0
Viewed 83

I have a table like this:

<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Usernames</th>
      <th scope="col">number</th>
      <th scope="col">Type</th>
      <th scope="col">Date</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <?php 
     foreach($projects as $project)
     {
        echo '<tr>';
        echo '<th>'.$project['id'].'</th>';
        echo '<td>'.$project['user'].'</td>';
        echo '<td>'.$project['number'].'</td>';
        echo '<td>'.$project['user_type'].'</td>';
        echo '<td>'.$project['logs'].'</td>';
        echo '<td><a href="view-details" class="btn btn-sm btn-primary" id="view_files" ">View</a></td>';
        echo '</tr>';
      }
    ?>
  </tbody>
</table>

I am trying to render the details of the table above on another div (shown below) in the same page but on another window view pane using the 'View' button.

<div class="row my-4">
  <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
    <div class="card">
      <h5 class="card-header">Customers</h5>
      <div class="card-body" id="more-info">
        <h5 class="card-title">
          <?php echo $post['id']; ?>
        </h5>
        <p class="card-text">
          <?php echo $post['user']; ?>
        </p>
        <p class="card-text text-success">
          <?php echo $post['catch_code']; ?>
        </p>
      </div>
    </div>
  </div>

The foreach in the first example is been iterated with the "view" button for each element. I need each element to be displayed as I click 'View' on it. I was worried if clicking "view" then all elements will be displayed, being that the iteration is the same as the id on the View button..

Please kindly propose a solution for me.

php jquery ajax javascript
1 Answers

The issue you have is that you're creating multiple elements with the same id in your loop. This is invalid as id values must be unique within the DOM.

To fix this issue change the id attribute to a class instead. You can then populate the 'View' link with data attributes that hold the information to populate the #more-info div when the button is clicked.

Try this:

let $idField = $('h5.user-id');
let $userField = $('p.user');
let $catchCodeField = $('p.catch-code');

$('.view-files').on('click', e => {
  e.preventDefault();
  let $btn = $(e.target);
  let id = $btn.data('id');
  let user = $btn.data('user');
  let catchCode = $btn.data('catchcode');
  
  $idField.text(id);
  $userField.text(user);
  $catchCodeField.text(catchCode);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Usernames</th>
      <th scope="col">number</th>
      <th scope="col">Type</th>
      <th scope="col">Date</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>001</th>
      <td>User 001</td>
      <td>Number 001</td>
      <td>User type 001</td>
      <td>Logs 001</td>
      <td><a href="view-details" class="btn btn-sm btn-primary view-files" data-id="001" data-user="User 001" data-catchcode="Catch code 001">View</a></td>
    </tr>
    <tr>
      <th>002</th>
      <td>User 002</td>
      <td>Number 002</td>
      <td>User type 002</td>
      <td>Logs 002</td>
      <td><a href="view-details" class="btn btn-sm btn-primary view-files" data-id="002" data-user="User 002" data-catchcode="Catch code 002">View</a></td>
    </tr>
    <tr>
      <th>003</th>
      <td>User 003</td>
      <td>Number 003</td>
      <td>User type 003</td>
      <td>Logs 003</td>
      <td><a href="view-details" class="btn btn-sm btn-primary view-files" data-id="003" data-user="User 003" data-catchcode="Catch code 003">View</a></td>
    </tr>
  </tbody>
</table>

<div class="row my-4">
  <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
    <div class="card">
      <h5 class="card-header">Customers</h5>
      <div class="card-body" id="more-info">
        <h5 class="card-title user-id"></h5>
        <p class="card-text user"></p>
        <p class="card-text text-success catch-code"></p>
      </div>
    </div>
  </div>
</div>

user_5194130
Related