Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
this jsfiddle works fine for me http://jsfiddle.net/xzZ7n/1/ However, when I try to run it locally or from Sharepoint, nothing happens when I press the pdf button.Any idea why this happens?here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-git.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type='text/javascript' src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<style type='text/css'>
</style>
</head>
<body>
<div id="customers">
<table id="tab_customers" class="table table-striped">
<colgroup>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr class='warning'>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chinna</td>
<td>1,363,480,000</td>
<td>March 24, 2014</td>
<td>19.1</td>
</tr>
<tr>
<td>India</td>
<td>1,241,900,000</td>
<td>March 24, 2014</td>
<td>17.4</td>
</tr>
<tr>
<td>United States</td>
<td>317,746,000</td>
<td>March 24, 2014</td>
<td>4.44</td>
</tr>
<tr>
<td>Indonesia</td>
<td>249,866,000</td>
<td>July 1, 2013</td>
<td>3.49</td>
</tr>
<tr>
<td>Brazil</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
</tbody>
</table>
</div>
<button onclick="javascript:demoFromHTML();">PDF</button>
<script type='text/javascript'>//<![CDATA[
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#customers')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins);
}
//]]>
</script>
</body>
</html>
Any idea why doesn't work? Thanks!
Most of the dependencies URLs you included in the <head /> are broken because you omit a part of it: you need to add some http:// to obtain valid remote URLs.
here ------|
<head> v
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Same thing for other libraries you use... -->
</head>
Also you forgot to include jQuery, just at the beginning of the <head> tag.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
</head>
Related
I have an existing HTML table. I'd like a thin JS library to add simple search and sorting. GridJS looks promising, but I don't understand the docs for loading from HTML. For example, I'm unable to use the useRef function. Even the first line of code in the example fails for me:
>>> gridjs.useRef(null)
Uncaught TypeError: Bt is undefined
Preact 3
<anonymous> debugger eval code:1
Here is a minimal example:
<html>
<head>
<link href='https://unpkg.com/gridjs/dist/theme/mermaid.min.css' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
</head>
<body>
<table id='table'>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</table>
<script>
window.onload = function() {
var node = document.getElementById('table');
new gridjs.Grid({'from': node});
}
</script>
</body>
</html>
I get the error
Uncaught TypeError: t.querySelector(...) is null
fromHTMLTable header.ts:288
fromUserConfig header.ts:256
fromUserConfig config.ts:179
update config.ts:146
e grid.ts:15
onload example.html:17
EventHandlerNonNull* example.html:15
I know this answer comes a bit late, but I hope it helps future visitors.
It looks like you still need to call the render function, and the way it seems to work is it hides the table in the DOM and injects the Grid.js table into the wrapper you specify.
For example, this worked for me:
new gridjs.Grid({
from: document.getElementById('mySourceTable'),
}).render(document.getElementById('myDestinationWrapper'));
Lastly, I think thead & tbody is needed - the documentation shows these elements as well: From HTML Table
Here's a snippet as a demo:
document.addEventListener("DOMContentLoaded", function() {
new gridjs.Grid({
from: document.getElementById('sourceTable')
}).render(document.getElementById('destinationWrapper'));
});
<html>
<head>
<link href='https://unpkg.com/gridjs/dist/theme/mermaid.min.css' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
</head>
<body>
<div id='destinationWrapper'></div>
<table id='sourceTable'>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</tbody>
</table>
</body>
</html>
I want to move my functions to a separate js file, but when I do it, they stop working. How to approach this problem? Are there some other syntaxes when you want to move the functions to a separate *.js file?
function edit_description() {
var targetDescription = $("#description-1");
var value = targetDescription.text();
if (value != "") {
value = ""
};
targetDescription.html(`<input class="description form-control" data-target="description-1" type="text" value=${value}>`);
$("input:text").focus();
$("input").blur(function (e) {
e.preventDefault();
var target = targetDescription.children('input').attr("data-target");
$(`#${target}`).text($(this).val());
var description = $(this).val();
save_description(identification = "description-1", description);
});
};
function save_description(identification, description){
console.log('Saved!');
var userInput = {"identification":identification, "description":description};
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src=/static/main.js></script>
<div class="table-wrapper">
<table id="table" class="table table-striped">
<thead>
<tr>
<th scope="col"><span>Edit</span></th>
<th scope="col"><span>Description</span></th>
</tr>
</thead>
<tbody>
<tr>
<td id = "edit-1"><a class="btn" role="button" onclick="edit_description();">Edit ></a></td>
<td id = "description-1">Lorem</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
As you can see I put my js in a file called main.js in a static directory.
Avoid using absolute paths since an app may not always live in the root of a domain, stick to relative paths.
If the script is in the same folder as the HTML file, use src="./main.js"
Double Quotation ("") is missing!
Try this:
<script src="/static/main.js"></script>
Or this:
<script src="~/static/main.js"></script>
I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in datatables. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -> HTML (DOM) source data -> and under Javascript tab I entered the lines required.
Is there something I am doing incorrect here with the script tags or is the plug in just not working? I do not have the files downloaded and imported to my project.
Expecting a standard look like this
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Your problem is a mismatch in the number of <td> </td>. You are just rendering 1 <td> in foreach loop but you have two <th></th> in the table header
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
<td>
<a href=#url>#item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```
My goal is to attach a hidden value of either 0 or 1 to each entry in a table. If the value is a 0 the entry will be colored Red, and if the value is a 1, the entry will be colored green.
I tried implementing this using filters and creating two different classes 'success' and 'danger' if the class 'success was added to the entry then the entry would be colored green and for 'danger' it would be colored red. I was able to get this to work by using a filter that checks for the string "True" or "False" in the entry. If the String is "True" then it adds the success class if if it is false it adds the danger class. This works however I now want to expand this idea so that every entry will have an assigned boolean.
I am looking for some help on how to do this.
This is my current code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.success { background:green; }
.danger { background:red; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
$(function(){
$('tr:has(td:contains("True"))').addClass('success');
$('tr:has(td:contains("False"))').addClass('danger');
});
</script>
</head>
<body>
<table width="100%">
<tr><td>True</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>True</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
</html>
I would recommend you add an id to your table so you can access it directly.
After that we get the array of tr. Also I can recommend here you validate that this array is of the same size than your results array. Just for good measure.
Then we can just iterate over this array using jQuery's each function.
let status = [false , true , false , true , false , false , true , true ];
$('#mainTable tr').each((i,tr) => {
if(status[i])
$(tr).addClass('success');
else
$(tr).addClass('danger');
})
.success { background:green; }
.danger { background:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id='mainTable' width="100%">
<tr><td>True</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
Hope this helps :)
Something like this seems to work...
<table width="100%">
<tr><td>True</td></tr>
<tr><td>2</td><td style="display:none">0</td></tr>
<tr><td>3</td><td style="display:none">1</td></tr>
<tr><td>4</td><td style="display:none">0</td></tr>
<tr><td>5</td><td style="display:none">0</td></tr>
<tr><td>6</td><td style="display:none">1</td></tr>
<tr><td>7</td><td style="display:none">0</td></tr>
</table>
You can add an own property (e.g. data-boolean) to your cells.
//get all elements with attribute data-boolean and convert the HTML collection into an array
var aCells = [].slice.call(document.querySelectorAll("[data-boolean]"));
//Loop the elements and add the styleclass
aCells.forEach(function(v,i){
if(v.getAttribute("data-boolean") === "true"){
v.classList.add("success");
}
if(v.getAttribute("data-boolean") === "false"){
v.classList.add("danger");
}
});
.success {
background: green;
}
.danger {
background: red;
}
<table width="100%">
<tr>
<td data-boolean="true">True</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td data-boolean="false">False</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
</table>
I want tableRow.html to be drawn under the table head but the ng-repeat is not drawing at all and the examples are above the table head. If I drop the row with examples directly into the proper location in index.html it will draw just fine. What am I doing wrong?
index.html
<html>
<head>
<title>Currency Exchange</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h1>A title to the table</h1>
<div>
<div class= "ExTableDiv">
<table class= "ExTable">
<thead>
<tr>
<th class="column">Currency Code</th>
<th class="column">Currency Name</th>
<th class="column">Exchange Rate vs USD</th>
</tr>
</thead>
<tbody ng-controller="TestController"><!--**if you try TestController as TC it will throw an error, why?**-->
<test-directive></test-directive>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/directives/tableFiller.js"></script>
</html>
app.js
(function(){
var app = angular.module('myApp',['exchange-directives']);
app.controller('TestController', ['$http', function($http) {
var table = this;
table.rows = [];
$http.get('/item.json').success(function(data){
table.rows = [{"name":"Captain","rate":"0.8910","inverce":"1.1223"}]; //I added this here so I know I am getting json data
});
}]);
})();
tableFiller.js
(function(){
var app = angular.module('exchange-directives', []);
app.directive('testDirective', function(){
return {
restrict: 'E',
templateUrl: 'js/directives/tableRow.html'
};
});
})();
tableRow.html
<tr ng-repeat='row in TestController.table.rows'>
<td>{{row.name}}</td>
<td>{{row.rate}}</td>
<td>{{row.inverse}}</td>
</tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
</tr>
Replace <tr ng-repeat='row in TestController.table.rows'> with
<tr ng-repeat='row in TestController.rows'>
In your controller you're setting table = this, so table.rows actually is this.rows and thus available to the markup via TestController.rows
I am choosing to answer this question:
Also the tutorial I followed on codeschool wraps angular.module within a function but I see that most other examples don't. What is the difference? Why choose one over the other?
This is called an immediately invoked function expression or (IIFE). It is a light-weight way to introduce modules into JavaScript. The goal of using something like this is to ensure lexical scoping of all variables declared at the top level of the module. Without something like this, it is easy to accidentally introduce global variables, which in general is a baaaaad thing.