This is my HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="http://tablesorter.com/jquery-latest.js" type="text/javascript"/>
<script src="http://tablesorter.com/jquery.tablesorter.js" type="text/javascript"/>
<script type="text/javascript">$(document).ready(function () {
$("#myTable").tablesorter({sortList: [[0, 0]]});
});
</script>
</head>
<body>
<h1>Repid Type Table</h1>
<table class="tablesorter" id="myTable">
<tr>
<th>PERNR</th>
<th>INNBOUND</th>
<th>FIRSTNAME</th>
<th>LASTNAME</th>
<th>CATSHOURS</th>
<th>DIFF</th>
</tr>
<tr>
<td>00017808</td>
<td>26.50</td>
<td>Roland</td>
<td>Block</td>
<td>1830.70</td>
<td>1804.20</td>
</tr>
<tr>
<td>123412</td>
<td>111.34</td>
<td>Koray</td>
<td>Tugay</td>
<td>945.56</td>
<td>234.43</td>
</tr>
</table>
</body>
</html>
But the table I see does not seem to be functional at all. What am I missing?
I think you're missing closed </script> tag for you "includes":
<script src="http://tablesorter.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"></script>
Update
Fix source path. Might also consider to use some CDN to load your javascript library. For example https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.2/js/jquery.tablesorter.min.js
Related
I'm trying to toggle CSS stylesheets by clicking one of two buttons. However, my code isn't working. Not sure what I'm missing. I'm working with a separate index.html that I cannot modify and a separate js file.
Here is my code below. I'm getting a TypeError: cannot read properties of null (reading addEventListener'.
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment 4</title> <link id="styleSheet" href="styleA.css" rel="stylesheet" type="text/css">
<script src="styler.js"></script>
</head>
<body>
<form>
<button id="styleA" type="submit">Use styleA</button>
<button id="styleB" type="submit">Use styleB</button>
</form>
<article>
<h1>OSU Beaver Store - CS 290 Version</h1>
<p>Catering to All Your Beaver-Gear Needs</p>
<div>
<table>
<caption>Our Most Popular Items</caption>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orange Beaver Polo</td>
<td>49.00</td>
</tr>
<tr>
<td>3 Pack Beaver Socks</td>
<td>28.00</td>
</tr>
<tr>
<td>Orange Beavers Hat</td>
<td>32.50</td>
</tr>
<tr>
<td>Waterproof Jacket</td>
<td>65.55</td>
</tr>
</tbody>
</table>
</div>
<div id="beaver-store">
Visit The Official Beaver Store
</div>
</article>
<div>
<span id="o">O</span><span id="s">S</span><span id ="u">U</span>
</div>
</body>
</html>
JS File:
"use strict";
let aLink= document.querySelector("link");
const aButton = document.getElementById("styleA");
const bButton = document.getElementById("styleB");
function changeToA(){
preventDefault();
aLink.setAttribute('href', 'styleB.css');
}
function changeToB(){
aLink.setAttribute('href', 'styleB.css');
}
aButton.addEventListener("click",changeToA);
bButton.addEventListener("click",changeToB);
***Update:
I figured it out. Needed to have another event listener for DOMloadedcontent.
I have implemented Datatables into my Spring MVC, Java, Bootstrap 5, Thymeleaf project and the results are great. The only issue is a cosmetic one - the text is wrapping in the length menu and search sections. This can be seen at the top of the attached image where "Show 10 entries" is split across 3 lines and the Search table and box are split over 2 lines.
I am using the latest versions of jquery.dataTables.min.css, jquery.dataTables.min.js and dataTables.bootstrap5.min.js with no custom configuration: -
$(document).ready(function () {
$('table.display').DataTable();
});
Here is an HTML snippet with one row of data:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Java Documentum Services</title>
<link rel="stylesheet" href="/assets/jquery/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="/assets/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="/assets/dropzonejs/dropzone.css"/>
</head>
<body>
<div class="container pt-3 pb-3">
<table id="search-results"
class="display"
style="width:100%">
<thead>
<tr>
<th>Filename</th>
<th>Test</th>
<th>Case Id</th>
<th>Upload Time</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>download.pdf</span>
</td>
<td>
<span>JH-06062022-01</span>
</td>
<td>
<span>test-case-12344444</span>
</td>
<td>
<span>2022-07-22 11:03 GMT</span>
</td>
<td>
<!--Actions button-->
<!--Download button-->
<!--Delete button-->
</td>
</tr>
</tbody>
</table>
<script src="/assets/jquery/jquery-3.5.1.js"></script>
<script src="/assets/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/datatables/dataTables.bootstrap5.min.js"></script>
<script src="/assets/jds/dataTables.js"></script>
<script src="/assets/bootstrap/bootstrap.min.js"></script>
<script src="/assets/dropzonejs/dropzone.min.js"></script>
<script src="/assets/jds/dropzone.js"></script>
</body>
</html>
I can see that these two sections are defined in sLengthMenu and sSearch in the JavaScript code, so perhaps a code change could be an option, but it would be preferable if it could be fixed with a configuration change instead. I also wondered if perhaps there is a clash with one of the other CSS stylesheets or JavaScript libraries that I am using - these are visible in the sample HTML.
I am building an application using Meteor. I am using the jquery datatables plugin to render a table of data.
https://www.datatables.net/
When my table loads, ALL of the data is loaded, instead of the default 'show 10 entries'. Furthermore, when I click on a column to sort, all of the data disappears and becomes "No data available in table".
Here is my html:
<template name="Tires">
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
</head>
<script>
//$(document).ready( function () {
//$('#tires').DataTable();
//});
</script>
<h1>tires</h1>
<br>
<table id="tires">
<thead>
<tr>
<th>Brand</th>
</tr>
</thead>
<tbody>
{{#each products}}
<tr>
<td>{{brand}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
Here is my template helpers page:
Template.Tires.onRendered(function() {
$('#tires').DataTable();
alert('rendred!');
});
Note - for development purposes, I am only showing the "Brand" column for now... Does anyone have any idea what might be going on?
I can't update my label with Jquery. It should update after every second on my page but nothing happens. Is there something wrong with my javascript?
Basically what I want to do is update the label every second. But somehow this isn't working. Can anyone please help me out?
Below you can find the code for my 2 files:
////////////// Index.html: /////////////////
<!--AWP_IN_Variable Name='"webdata".AmountOfErrors' -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Gebr. Gerrits Recycling Helmond</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/default.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>
</head>
<body>
<div class="Maindiv">
<div class="header">
<img src="images/gerritslogo800.jpg" class="Logo">
</div>
<div class="content">
<br/>
<table>
<tr>
<th>Part</th>
<th>Value</th>
</tr>
<tr>
<td>Ferro:</td>
<td>0 kg</td>
</tr>
<tr>
<td>Non-Ferro:</td>
<td>0 kg</td>
</tr>
<tr>
<td>Errors:</td>
<td><label id="amountOfErrors" name="amountOfErrors">:="webdata".AmountOfErrors:</label></td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function()
{
//query the amountOfErrors variable every second
$.ajaxSetup({ cache: false });
setInterval(function()
{
$.get("IOamountOfErrors.htm", function(result)
{
$('#amountOfErrors').text(result);
});
},1000);
});
</script>
<div class="footer">
Gebr. Gerrits Metaalhandel Helmond B.V. <br/>
Gebr. Gerrits Metaalrecycling B.V. <br/>
Auto Verschrotings Industrie "A.V.I." Den Bosch B.V. <br/>
Euregio Recycling B.V.<br/>
</div>
</div>
</body>
</html>
////////////// IOamountOfErrors.htm: /////////////////
< !-- AWP_IN_Variable Name='"webdata".AmountOfErrors' -->
:="webdata".AmountOfErrors:
(added the space between '<' and '!' else it wouldn't show the code on this site)
Already searched the net for this: I actually found the same stuff that I needed but for me it isn't working: https://www.dmcinfo.com/latest-thinking/blog/id/8567/siemens-s7-1200-web-server-tutorial--from-getting-started-to-html5-user-defined-pages
Please help me out!
Thanks in advance,
Bart
My best would be that you're debugging this local and not on a webserver right?
Because your javascript is trying to do a cross origin requests which doesn't work on file://
EDIT:
Can you try this code
<script type="text/javascript">
$(document).ready(function()
{
//query the amountOfErrors variable every second
setInterval(function()
{
$.post("IOamountOfErrors.htm", function(result)
{
$('#amountOfErrors').text(result);
});
},1000);
});
</script>
Well to update your label you can use setInterval. Here's Code which might be useful
var count = 20;
function myFunction() {
setInterval(function(){ startCounter() }, 1000);
}
$("#counterStart").click(function(e){
myFunction();
});
function startCounter() {
$("#counter").text(count);
}
HTML:
<input type="button" value="counter" id="counterStart" />
<span id="counter">dfsdfs </span>
Working FIDDLE
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#delrow').click(function(){
alert(':)');
$(this).closest('tr').animate({'backgroundColor':'#EF3E23','color':'#fff'},300,function(){
$(this).remove();
});
return false;
});
});
</script>
</HEAD>
<BODY>
Hello
<table>
<tr>
<td>abc</td>
<td><a id="delrow" title="Click to remove" href="#">Delete</a></td>
</tr>
</table>
</BODY>
</HTML>
Here you can test my code: http://goo.gl/XNQb5j
The "Delete" button should remove the row from the table.
It's working when I don't include jQuery UI (but then, of course, animation is not working).
What am I doing wrong?
Sorry for my English errors.
the version of the jQuery UI that youve linked is incompatible with the version of the jQuery you linked. better take the version numbers from jQuery examples on their website.
notice how your code works when the versions are compatible:
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#delrow').click(function() {
alert(':)');
$(this).closest('tr').animate({
'backgroundColor': '#EF3E23',
'color': '#fff'
}, 300, function() {
$(this).remove();
});
return false;
});
});
</script>
</HEAD>
<BODY>Hello
<table>
<tr>
<td>abc</td>
<td><a id="delrow" title="Click to remove" href="#">Delete</a>
</td>
</tr>
</table>
</BODY>
</HTML>