Modal Demo(undone)

Modal shows no content

by Azhar Kanorwala

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="page-header">
                        <h2 class="header">Parts Picker</h2>
                    </div>
                </div>
            </div>
        </div>
        <!---Container Class---->
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <div class="jumbotron">
                        <div class="btn-group" role="group">
                            <div class="btn-group btn-group-lg" role="group">
                                <button type="button" class="btn btn-primary a1" id="mb">Motherboards</button>
                                <button type="button" class="btn btn-primary a2" id="pr">Processors</button>
                                <button type="button" class="btn btn-primary a3" id="rm">Ram</button>
                                <button type="button" class="btn btn-primary a4" id="cb">Cabinet</button>
                                <button type="button" class="btn btn-primary a5" id="hd">Hard Drives</button>
                                <button type="button" class="btn btn-primary a6" id="ps">Power Supplies</button>
                            </div>
                        </div>

                        <table class="table" id="table_mb">
                            <thead>
                                <tr>
                                    <th>Serial NO</th>
                                    <th>Model NO</th>
                               ...

CSS

body {
        font-family: 'Play', sans-serif;
        background-image: url(/images/default.jpg);
        background-position: right;
        /*background: #1976D2;*/
    }
    
    .header {
        font-family: 'Play', sans-serif;
        color: whitesmoke;
    }
    
    td {
        border: 1px #DDD solid;
        padding: 5px;
        cursor: pointer;
    }
    
    .selected {
        background-color: #2196F3;
        color: #FFF;
    }
    
    .a1 {
        position: relative;
        bottom: 48px;
    }
    
    .a2 {
        position: relative;
        bottom: 48px;
    }
    
    .a3 {
        position: relative;
        bottom: 48px;
    }
    
    .a4 {
        position: relative;
        bottom: 48px;
    }
    
    .a5 {
        position: relative;
        bottom: 48px;
    }
    
    .a6 {
        position: relative;
        bottom: 48px;
    }
    
    .demo {
        display: none;
    }
    
    .table_mb {
        display: inline-block;
    }

JavaScript

$(document).ready(function () {

            $("#table_mb tr").click(function () {
                $(this).addClass('selected').siblings().removeClass('selected');
                var value = $(this).find('td:first').html();
                //alert(value);
            });

            $('.ok').on('click', function (e) {
                alert($("#table_mb tr.selected td:first").html());
            });

            $(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');

                });

            });
        });