CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapbootstrap-modal
Sairam Duggi
Sairam Duggi

Reputation: 165

Data into bootstrap modal from table row using javascript

I am using a bootstrap table and bootstrap modal, I need the row data to shown in the bootstrap modal on modal loading,Am using JS to load the bootstrap modal, how can i get the data into the modal using java script or jquery

Can we use data-id concept to get the data into the bootstrap modal or better to use Jquery? The entire row values should be displayed in the modal

Table HTML

<table id="example" class="table table-striped table-bordered nowrap">
<thead>
<tr>
    <th>HQ</th>
    <th>STOCKIEST</th>
    <th>CHEMIST</th>
    <th>INVOICE NUMBER</th>
    <th>INVOICE AMOUNT</th>
    <th>INVOICE DATE</th>
    <th>INVOICE IMAGE</th>
    <th>CHEQUE AMOUNT</th>
    <th>CHEQUE IN FAVOUR OF</th>
    <th>CHEQUE NUMBER</th>
    <th>CHEQUE DATE</th>
    <th>BANK'S NAME</th>
    <th>COURIER NAME</th>
    <th>STATUS</th>
    <th>ACTIONS</th>

</tr>
</thead>


<tbody>

    <tr>
        <td>Hyderabad</td>
        <td>Balaji Pharmacon</td>
        <td>Sanjeevan Medical</td>
        <td>368</td>
        <td>Rs.21,239</td>
        <td>22-10-2017</td>
        <td>INV-368</td>
        <td>Rs.2124</td>
        <td>Santhosh Kudalkar</td>
        <td>531034</td>
        <td>22-11-2017</td>
        <td>IDBI</td>
        <td>DTDC</td>
        <td>Approved</td>
        <td class="text-center">
        <button class="btn btn-icon btn-primary btn-xs" id="myBtn">Close</button>
        </td>

    </tr>
    <tr>
        <td>Hyderabad</td>
        <td>Balaji Pharmacon</td>
        <td>Sanjeevan Medical</td>
        <td>743</td>
        <td>Rs.21,245</td>
        <td>21-10-2017</td>
        <td>INV-743</td>
        <td>Rs.2124</td>
        <td>Santhosh Kudalkar</td>
        <td>531035</td>
        <td>22-11-2017</td>
        <td>IDBI</td>
        <td>DTDC</td>
        <td>Approved</td>
        <td class="text-center">
        <button class="btn btn-icon btn-primary btn-xs" id="myBtn">Close</button>
        </td>

    </tr>
</tbody>

Modal:

<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">

            <h4 class="modal-title">Cheque Confirmation</h4>
        </div>
        <div class="modal-body">
        <div class="form-group row">
                <label class="col-sm-4 control-label">Invoice Amount</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control input-sm" Placeholder="Enter Invoice Amount" onkeypress="return isNumber(event)">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 control-label">Cheque Amount</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control input-sm" Placeholder="Enter Cheque Amount" onkeypress="return isNumber(event)">
                </div>
            </div>
           <div class="form-group row">
                <label class="col-sm-4 control-label">Cheque Number</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control input-sm" Placeholder="Enter Cheque Number" onkeypress="return isNumber(event)">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 control-label">Name of the Bank</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control input-sm" value="IDBI">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 control-label">Name of the Courier</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control input-sm" value="DTDC">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 control-label">Cheque Date</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control input-sm" placeholder="mm/dd/yyyy" value="11/23/2017" id="datepicker">
                </div>
            </div>


        </div>
        <div class="modal-footer">

            <button type="button" class="btn btn-info waves-effect waves-light">Confirm and Approve</button>
             <button type="button" class="btn btn-primary waves-effect waves-light">Close</button>
        </div>
    </div>
</div>

Modal JS:

$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#con-close-modal").modal();
    });
});

Upvotes: 0

Views: 7659

Answers (1)

Peter Stark
Peter Stark

Reputation: 608

  <button class="btn btn-icon btn-primary btn-xs" id="myBtn">Close</button>

Slight problem with your html, you have button with duplicate ID --> myBtn.

Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on relatedTarget,

From boostrap 3 docs, you have event.relatedTarget to play with.

https://getbootstrap.com/docs/3.3/javascript/#modals-related-target

Change your modal trigger to

<td class="text-center">
    <button class="btn btn-icon btn-primary btn-xs" 
       data-toggle="modal" 
       data-target="#con-close-modal" >Close</button>
</td>

And add some class to your table 

 ...
  <td class="invoice-amt">Rs.21,239</td>
  <td>22-10-2017</td>
  <td>INV-368</td>
  <td class="cheque-amt">Rs.2124</td>
 ...

Modify your modal html too, to add class on your desired input

...
<input type="text" class="form-control input-sm cheque-amt" Placeholder="Enter Cheque Amount" onkeypress="return isNumber(event)">
...
...
<input type="text" class="form-control input-sm invoice-amt" Placeholder="Enter Invoice Amount" onkeypress="return isNumber(event)">
...

Add this event handler 

$('#con-close-modal').on('show.bs.modal', function (e) {

    var _button = $(e.relatedTarget);

    // console.log(_button, _button.parents("tr"));
    var _row = _button.parents("tr");
    var _invoiceAmt = _row.find(".invoice-amt").text();
    var _chequeAmt = _row.find(".cheque-amt").text();
    // console.log(_invoiceAmt, _chequeAmt);

    $(this).find(".invoice-amt").val(_invoiceAmt);
    $(this).find(".cheque-amt").val(_chequeAmt);
});

Have fun :)

p.s. Assumptions:

  • your table data is static and not from server-data or json

jsfiddle
https://jsfiddle.net/sudarpochong/nxL8jezp/

Upvotes: 3

Related Questions