Get row data into bootstrap modal

Question

I am fetching data from database and showing it through table. Inside table i want to implement update functionality for each row. For this i am using jquery. I am able to retrieve text data but not receiving image from table row. And the data which i am receiving is displaying on console but not in modal form. On clicking update button modal is showing blank data but i want it to show data prefilled.

How can i get image from row and why no data is showing inside modal?

My table

<table class="table table-bordered text-center">
                    <thead>
                        <tr>
                            <th scope="col">S.No</th>
                            <th scope="col">Title</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Size</th>
                            <th scope="col">Image</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <%
                            int i = 1;
                            for (Product res : result) {
                        %>
                        <tr>
                            <th scope="row"><%=i%></th>
                            <td><%=res.getTitle()%></td>
                            <td><%=res.getQuantity()%></td>
                            <td><%=res.getSize()%></td>
                            <td style="width: 25%"><img
                                src="C:/Users/shubhamrai/eclipse-workspace/Ecommerce/src/main/webapp/images/<%=res.getImage()%>"></td>
                            <td class="mt-5">
                            <button type="button" class="btn btn-sm editbtn btn-primary" data-toggle="modal"
                                    data-target="">Update</button></td>
                        </tr>
                        <%
                            i++;
                            }
                        %>
                    </tbody>
                </table>

My modal form

    <!-- Modal -->
    <div class="modal fade" id="editmodal" tabindex="-1"
        role="dialog" aria-labelledby="exampleModalLongTitle"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Update Data</h5>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span class="text-lg-left" aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="AddProductControl" enctype="multipart/form-data"
                    method="POST" class="mb-5">
                    <div class="row g-5 align-items-center">
                        <div class="col-auto">
                            <label for="title" class="col-form-label">Title</label>
                        </div>
                        <div class="col-auto">
                            <input type="text" id="title" name="title" class="form-control">
                        </div>
                    </div>
                    <div class="row g-3 align-items-center mt-2 mb-4">
                        <div class="col-auto">
                            <label for="quantity" class="col-form-label">Quantity</label>
                        </div>
                        <div class="col-auto ms-1">
                            <input type="number" name="quantity" id="quantity"
                                class="form-control">
                        </div>
                    </div>
                    <div class="row g-5 align-items-center">
                        <div class="col-auto">
                            <label for="size" class="col-form-label">Size</label>
                        </div>
                        <div class="col-auto ms-1">
                            <input type="number" name="size" id="size" class="form-control">
                        </div>
                    </div>
                    <div class="row g-3 align-items-center mt-0">
                        <div class="col-auto">
                            <label for="image" class="col-form-label">Image</label>
                        </div>
                        <div class="col-auto ms-3">
                            <input type="file" id="image" name="image" class="form-control">
                        </div>
                    </div>
                    <div class="position-absolute m-3 bottom start-15 border">
                        <input class="bg-info" type="submit" value="Add"> <input
                            type="hidden" name="username" value="<%=currentUser%>" />
                    </div>
                </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <script>
    $(document).ready(function(){
        $('.editbtn').on('click', function(){

            $('#editmodal').modal('show');
            $tr =$(this).closest('tr');
            var data= $tr.children("td").map(function(){
              return $(this).text();
            }).get();

            console.log(data);
            $('#title').val(data[0]);
            $('#quantity').val(data[1]);
            $('#size').val(data[2]);
        });
    });
  </script>

Can you add data-attributes to the td elements? Yeap, I know that it's ugly solution but even better then current one - values are mapped by index..... So, you can add smth like this `<%=res.getTitle()%>` Do the same for the image URL too. To extract data you can do `var data= $tr.children("[data-name][data-value]")....` — Alex, Oct 11 '21 at 17:42
@Alex text data is working now. But i have problem in retrieving image . How can i get image in jquery and show in modal as uploaded? — TOP 10, Oct 11 '21 at 17:46
after you you did `var data = ...` push to data array image src `data.push($tr.find('img').attr('src'))` — Alex, Oct 12 '21 at 06:52

score 2 · Accepted Answer · answered Oct 12 '21 at 11:12

Here is a working demo of what you want to achieve and one more thing you can't bind files to HTML input type files using jquery. For detail you can prefer this link

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

 

<table class="table table-bordered text-center">
                    <thead>
                        <tr>
                            <th scope="col">S.No</th>
                            <th scope="col">Title</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Size</th>
                            <th scope="col">Image</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr>
                            <th scope="row">1</th>
                            <td>Title 1</td>
                            <td>521</td>
                            <td>1</td>
                            <td style="width: 25%;hieght:50%"><img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" style="
    hight: 25px;
    height: 52px;
"></td>
                            <td class="mt-5">
                            <button type="button" class="btn btn-sm editbtn btn-primary" data-toggle="modal"
                                    data-target="">Update</button></td>
                        </tr>
                         
                    </tbody>
                </table>
                
                  <!-- Modal -->
    <div class="modal fade" id="editmodal" tabindex="-1"
        role="dialog" aria-labelledby="exampleModalLongTitle"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Update Data</h5>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span class="text-lg-left" aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="AddProductControl" enctype="multipart/form-data"
                    method="POST" class="mb-5">
                    <div class="row g-5 align-items-center">
                        <div class="col-auto">
                            <label for="title" class="col-form-label">Title</label>
                        </div>
                        <div class="col-auto">
                            <input type="text" id="title" name="title" class="form-control">
                        </div>
                    </div>
                    <div class="row g-3 align-items-center mt-2 mb-4">
                        <div class="col-auto">
                            <label for="quantity" class="col-form-label">Quantity</label>
                        </div>
                        <div class="col-auto ms-1">
                            <input type="number" name="quantity" id="quantity"
                                class="form-control">
                        </div>
                    </div>
                    <div class="row g-5 align-items-center">
                        <div class="col-auto">
                            <label for="size" class="col-form-label">Size</label>
                        </div>
                        <div class="col-auto ms-1">
                            <input type="number" name="size" id="size" class="form-control">
                        </div>
                    </div>
                    <div class="row g-3 align-items-center mt-0">
                        <div class="col-auto">
                            <label for="image" class="col-form-label">Image</label>
                        </div>
                        <div class="col-auto ms-3">
  
                            <input type="file" id="image" name="image" class="form-control">
                                                 <img src="img_girl.jpg" id="SetImage" alt="Your retrived image is here" width="100" height="100">
                        </div>
                    </div>
                    <div class="position-absolute m-3 bottom start-15 border">
                        <input class="bg-info" type="submit" value="Add"> <input
                            type="hidden" name="username" value="<%=currentUser%>" />
                    </div>
                </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
  <script>
    $(document).ready(function(){
        $('.editbtn').on('click', function(){

            $('#editmodal').modal('show');
            $tr =$(this).closest('tr');
            var data= $tr.children("td").map(function(){
              return $(this).text();
            }).get();

var Imagedata = [];
Imagedata.push($tr.find('img').attr('src'))

            
            $('#SetImage').attr("src",Imagedata[0]);
            $('#title').val(data[0]);
            $('#quantity').val(data[1]);
            $('#size').val(data[2]);
            
        });
    });
  </script>
</body>

 
</html>

Get row data into bootstrap modal

1 Answers1