how to Update data in a table using jquery ajax php and mysql

Question

I would appreciate your help!

The situation is as follows:

There are two tables with data from the database. The number of tables actually depends on the user who will post them. I used "while cycle method" to post the table with data on the page.

So, now I want the data in each of these tables could be changed by clicking the Update button.

Each table has it's own ID.

I found many solutions on Youtube with the usage of jquery ajax php and mysql.

I have tried this code below so far:

<html>

 <!-- My table structure which cannot be chanhed -->

 <?php       
     while ($row = mysqli_fetch_array($result_set)):;
 ?>

<table class="myTable" cellspacing="5"> 
   <tbody>
       <tr id="<?php echo $row['id'];?>">
        <th>Title</th>
        <td data-target="title" class="title"><b><?php echo 
     $row['title'];?></b></td>
            </tr>
    <tr>
        <th>Description</th>
        <td data-target="description"><p class="description" 
     align="justify"><?php echo $row['description'];?></p></td>
    </tr>   
    <tr>
        <th>Phone number</th>
        <td data-target="tel"><?php echo $row['tel'];?></td>
    </tr>
    <tr>
        <th>---</th>
        <td><a href="#" data-role="update" data-id="<?php echo 
       $row['id'];?>">Update</a></td>
    </tr>

    </tbody>        
    </table>
     <?php endwhile;?>



   <!-- Bootstrap Modal -->
   <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

     <!-- Modal content-->
     <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times; 
    </button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body" align="center">
    <div class="form-group">
        <label>Title</label>
        <textarea id="title" name = "title" rows = "1" cols = "60" 
     required></textarea>
    </div>
    <div class="form-group">
        <label>Description</label>
        <textarea id="description" name = "description" rows = "20" 
    cols = "60" required></textarea>
    </div>
    <div class="form-group">
        <label>Phone number (optional)</label>
        <input type="text" id="tel" name="tel"/>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#" id="save" class="btn btn-primary pull- 
  right">Update</a>
<button type="button" class="btn btn-default pull-left" data- 
   dismiss="modal">Close</button>
    </div>
    </div>

  </div>
 </div>

 </html>

An here is I have a problem!!! Because the children method is not working for my TABLE structure! But I cannot find another solution.

 <script>
 $(document).ready(function(){
 $(document).on('click','a[data-role=update]',function(){
 var id = $(this).data('id');
 var title =  $('#'+id).children('td[data-target=title]').text();
 var description = $('#'+id).children('td[data- 
 target=description]').text();
 var tel = $('#'+id).children('td[data-target=tel]').text();


 $('#title').val(title);
 $('#description').val(description);
 $('#tel').val(tel);
 $('#myModal').modal('toggle');

 })
 });
 </script>

So, the problem that data from the table does not append in input fields when the Modal window is popup p.s Sorry for my English! — Azike
– Azike, Commented Jun 23, 2019 at 22:28

msg · Accepted Answer · 2019-06-23 23:09:07Z

1

Your problem is caused because the elements are not immediate children of #id. So you have to target a different element to start with. And then, since they are descendants (not children), use a different function that can find them.

$(document).ready(function() {
  $(document).on('click', 'a[data-role=update]', function() {
    var $body = $(this).closest('tbody');
    var title = $body.find('td[data-target=title]').text().trim();
    var description = $body.find('td[data-target=description]').text().trim();
    var tel = $body.find('td[data-target=tel]').text().trim();

    $('#title').val(title);
    $('#description').val(description);
    $('#tel').val(tel);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="myTable" cellspacing="5">
  <tbody>
    <tr id="1">
      <th>Title</th>
      <td data-target="title" class="title">
        <b>Title</b></td>
    </tr>
    <tr>
      <th>Description</th>
      <td data-target="description">
        <p class="description" align="justify">
          Description
        </p>
      </td>
    </tr>
    <tr>
      <th>Phone number</th>
      <td data-target="tel">
        Phone
      </td>
    </tr>
    <tr>
      <th>---</th>
      <td><a href="#" data-role="update" data-id="1">Update</a></td>
    </tr>

  </tbody>
</table>


<div class="form-group">
  <label>Title</label>
  <textarea id="title" name="title" rows="1" cols="60" required></textarea>
</div>
<div class="form-group">
  <label>Description</label>
  <textarea id="description" name="description" rows="20" cols="60" required></textarea>
</div>
<div class="form-group">
  <label>Phone number (optional)</label>
  <input type="text" id="tel" name="tel" />
</div>
</div>

edited Jun 23, 2019 at 23:09

answered Jun 23, 2019 at 22:58

msg

8,2363 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Azike Over a year ago

Thank you very much!! It works. You helped me a lot!! =))

Azike Over a year ago

Hi! I am working on my own project and I decided to mention all people who somehow helped me with the code in this project. So I would like to mention you too. But I need to know your Full name for this. If you prefer me not to do this, let me know, please! And if you Agree let me know how I can get your name.

Collectives™ on Stack Overflow

how to Update data in a table using jquery ajax php and mysql

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related