JSFiddle - React, Tailwind, and code Playground

by Azhar Kanorwala

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<h1>Orders</h1>

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr data-id="1">
            <td>1</td>
            <td>24234234</td>
            <td>A</td>
        </tr>
        <tr data-id="2">
            <td>2</td>
            <td>24234234</td>
            <td>A</td>
        </tr>
        <tr data-id="3">
            <td>3</td>
            <td>24234234</td>
            <td>A</td>
        </tr>
    </tbody>
</table>
<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
         <h3>Order</h3>

    </div>
    <div id="orderDetails" class="modal-body"></div>
    <div id="orderItems" class="modal-body"></div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

JavaScript

$(function () {
    $('#orderModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false,

    }).on('show', function () {

    });

    $(".table").find('tr[data-id]').on('click', function () {
        debugger;

        //do all your operation populate the modal and open the modal now. DOnt need to use show event of modal again

        $('#orderDetails').html($('<b> Order Id selected: ' + $(this).data('id') + '</b>'));
        $('#orderModal').modal('show');



    });

});