Combine HTML5, CSS and JS

Question

I'm trying to change an editable css table extracted from codepen to something a little bit different. However, I'm having trouble simply getting the HTML5, CSS, JS and JQuery parts to work. This is the link: http://codepen.io/ashblue/pen/mCtuA .

I have pasted the below codes into dreamweaver cs6. Basically the problem is that when I open up the html file I am unable to use any of the add, remove, move functions. I can only edit the name and value entries and am able to see the boostrap components, but they do not function. I'm assuming I only need to open the HTML file as I've linked the CSS and JS within it.

Also, I'm running a local apache client and opening the html file from local host.

The HTML code is:

<!DOCTYPE html>
<html lang"en">
<head>
    <meta charset="utf-8">
    <title>...</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="csspart.css" />
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="jspart.js"></script>
</head>

<body>
<div class="container">
  <h1>HTML5 Editable Table</h1>
  <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p>

  <ul>
    <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li> 
    <li>Simple / powerful features such as add row, remove row, move row up/down.</li>
  </ul>

  <div id="table" class="table-editable">
    <span class="table-add glyphicon glyphicon-plus"></span>
    <table class="table">
      <tr>
        <th>Name</th>
        <th>Value</th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td contenteditable="true">Stir Fry</td>
        <td contenteditable="true">stir-fry</td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up"></span>
          <span class="table-down glyphicon glyphicon-arrow-down"></span>
        </td>
      </tr>
      <!-- This is our clonable table line -->
      <tr class="hide">
        <td contenteditable="true">Untitled</td>
        <td contenteditable="true">undefined</td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up"></span>
          <span class="table-down glyphicon glyphicon-arrow-down"></span>
        </td>
      </tr>
    </table>
  </div>

  <button id="export-btn" class="btn btn-primary">Export Data</button>
  <p id="export"></p>
</div>
</body>
</html>

The CSS code is:

@charset "utf-8";
/* CSS Document */

.table-editable {
  position: relative;
}
.table-editable .glyphicon {
  font-size: 20px;
}

.table-remove {
  color: #700;
  cursor: pointer;
}
.table-remove:hover {
  color: #f00;
}

.table-up, .table-down {
  color: #007;
  cursor: pointer;
}
.table-up:hover, .table-down:hover {
  color: #00f;
}

.table-add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;
}
.table-add:hover {
  color: #0b0;
}

The JS code is:

// JavaScript Document

var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');

$('.table-add').click(function () {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('table').append($clone);
});

$('.table-remove').click(function () {
  $(this).parents('tr').detach();
});

$('.table-up').click(function () {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return; // Don't go above the header
  $row.prev().before($row.get(0));
});

$('.table-down').click(function () {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function () {
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];

  // Get the headers (add special header logic here)
  $($rows.shift()).find('th:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });

  // Turn all existing rows into a loopable array
  $rows.each(function () {
    var $td = $(this).find('td');
    var h = {};

    // Use the headers from earlier to name our hash keys
    headers.forEach(function (header, i) {
      h[header] = $td.eq(i).text();   
    });

    data.push(h);
  });

  // Output the result
  $EXPORT.text(JSON.stringify(data));
});

What am I doing wrong?

Cheers :)

Answer 1

All your js code, you should wrap it with doc ready block and make sure you have loaded the jQuery library before your js script:

<script src="jquery.min.js"></script>

and in your js file do this:

$(function(){
    // put all your code in here.
});

just noticed:

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery-1.11.2.min.js"></script>

You have referenced different versions of jQuery and you are loading jQuery ui library before the actual jQuery library.

So the suggestion is to remove the older one and use the latest version of jquery and the order should be:

<script src="jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

If you have locally served the jquery library then omit the ver - 1.8.x .

Combine HTML5, CSS and JS

Question

1 answers

solution1
1 ACCPTED 2015-02-23 13:05:53

just noticed:

Combine HTML5, CSS and JS

Question

1 answers

solution1 1 ACCPTED 2015-02-23 13:05:53

just noticed:

solution1
1 ACCPTED 2015-02-23 13:05:53