Question posted in
You can find the official documentation here.

hidden division is not appearing after operating click event for dynamic table – Jquery ajax

I am fetching data to a table from mysql database using php and jquery. But I want to keep the "details" column hidden, which I want should be slide down(appear ) in the corresponding table row after clicking a button named "show details". The following Image may clear my thought:

enter image description here

The jquery Code I am using for slide down is :

$(document).ready(function(){
    $("#get_details").click(function(){
        $("#get_details_button").slideToggle("slow");
      });
  });

The code I am using to fetch data is :

$sub_array = array();
$sub_array[] = $row["id"];
$sub_array[] = $row["product_name"].'<p id="get_details">'.$row["details"].'</p>';
$sub_array[] = '<button type="button" name="get_details_button" id="get_details_button" class="btn btn-success btn-xs get_details_button">Get Details</button>';
$data[] = $sub_array;
}

Please feel free to ask for any additional code if you need.

the html part is here :

            <table id="user_data" class="table table-bordered table-striped">
                 <thead>
                  <tr>
                   <th width="30%">Image</th>
                   <th width="50%">Product Name</th>
                   <th width="20%">get Details</th>
                  </tr>
                 </thead>
              </table>
Tags:

2

Answers


  1. 0

    You need to use class for p tag then whenever button is clicked use $(this).closest('tr').find(".get_details") to get p tag and show/hide same

    Demo Code :

    $(document).ready(function() {
  //onclick of button
  $(".get_details_button").click(function() {
    //get p tag and show/hide it
    $(this).closest('tr').find(".get_details").slideToggle("slow");
  });
});
    .get_details {
  display: none
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="user_data" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th width="30%">Image</th>
      <th width="50%">Product Name</th>
      <th width="20%">get Details</th>
    </tr>
  </thead>
  <tr>
    <td>1
    </td>
    <td>Soemthig,,
      <!--use class-->
      <p class="get_details">Soemthing.....</p>
    </td>
    <td><button type="button" name="get_details_button" class="btn btn-success btn-xs get_details_button">Get Details</button>
    </td>
  </tr>
  <tr>
    <td>2
    </td>
    <td>Soemthig,,2
      <p class="get_details">Soemthing2.....</p>
    </td>
    <td><button type="button" name="get_details_button" class="btn btn-success btn-xs get_details_button">Get Details</button>
    </td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    You don’t need any ids to make this work. I don’t know your markup but here is an example. You will need to work it out for your markup.

    <div class="container">
  <table>
    <tr>
      <td>{{ id }}</td>
      <td>{{ product_name }}</td>
      <td><button>details</button></td>
    </tr>
  </table>
  <div class="product-details" style="display:none">...</div>
</div>

<div class="container">
  <table>
    <tr>
      <td>{{ id }}</td>
      <td>{{ product_name }}</td>
      <td><button>details</button></td>
    </tr>
  </table>
  <div class="product-details" style="display:none">...</div>
</div>

<div class="container">
  <table>
    <tr>
      <td>{{ id }}</td>
      <td>{{ product_name }}</td>
      <td><button>details</button></td>
    </tr>
  </table>
  <div class="product-details" style="display:none">...</div>
</div>

    jquery

    $('.container').find('button').on('click', function(e) {
  e.preventDefault();
  $(this).parent().parent().parent().parent().find('.product-details').slideToggle();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search