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">×
</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>