dropdown

by igor_nov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
      <div class="col-lg-12">
        <div id="results" class="panel panel-default">
          <div class="panel-heading">Recent Test Results</div>
          <div class="panel-body">
            <div class="table-responsive">
              <table class="table table-striped table-hover resultsTable">
                <thead>
                  <tr>
                    <th>Job ID</th>
                    <th>System(s)</th>
                    <th>Start date</th>
                    <th>Time Taken</th>
                    <th>Status</th>
                    <th>Completed Percentage</th>
                    <th>Outcome</th>
                    <th>Free Resources</th>
                    <th>Options</th>
                    <th>Description</th>
                  </tr>
                </thead>
                <tbody id="resultsbody">
                  <tr class="RowClickable" data-toggle="collapse" id="job_4" data-target="#4_details">
                    <td>
                      <span>4</span>
                      <a href="/vector/jobDetailedPage?job_id=4">(Details)</a>
                    </td>
                    <td></td>
                    <td id="4_startdate">2015-09-23</td>
                    <td id="4_duration">1:03:09</td>
                    <td id="4_status" style="text-transform:capitalize">completed</td>
                    <td id="4_progressBar">
                      <div class="progress"></div>
                    </td>
                    <td>FAILED</td>
                    <td class="nomargin">
                      <button id="shutdown-job-4" class="btn btn-primary btn-block" disabled="disabled" data-original-title="" title="">R.I.P</button>
          ...

JavaScript

$(document).ready(function() {
   $("li.disabled a").click(function(e) {
     e.preventDefault();
   });
    
    var href_resubmit = href_rip = href_stop = href_restart = href_restart_images = '';
    
     var drop_down = $('<div class="btn-group">\
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">\
                                    <span class="glyphicon glyphicon-cog"></span>\
                                </button>\
                                <ul class="dropdown-menu" role="menu">\
                                <li class="resubmit_btn">\
                                    <a href="'+href_resubmit+'"><span class="glyphicon glyphicon-repeat"></span> Resubmit</a>\
                                </li>\
                                <li class="restart_btn">\
                                    <a href="'+href_restart+'"><span class="glyphicon glyphicon-refresh"></span> Restart Driver</a>\
                                </li>\
                                <li class="restart_images_btn">\
                                    <a href="'+href_restart_images+'"><span class="glyphicon glyphicon-refresh"></span> Restart Images</a>\
                                </li>\
                                <li class="stop_btn">\
                                    <a href="'+href_stop+'"><span class="glyphicon glyphicon-stop"></span> Stop</a>\
                                </li>\
                                <li class="rip_btn">\
                                    <a href="'+href_rip+'"><span class="glyphicon glyphicon-stop"></span> R.I.P.</a>\
                                </li>\
                                </ul>\
                            </div>');
    
    $('.test').html(drop_down);
    
    drop_down.find('.resubmit_btn').addClass('disabled');
    drop_down.find('.rip_btn').addClass('disabled')
    
    console.log(drop_down)
    
});