Export HTML table to PDF, WORD, PNG using TableExport.js - javascript

I am trying to export a Table via PDF using the js provided by Ngiriraj Table Export Demo.
The code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./js/tableExport.js"></script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/sprintf.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/base64.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<button id="export" style="height: auto; width: auto;" onClick="$('#tableID').tableExport({type:'pdf',escape:'false'});">Click Here for PDF!</button>
<table id="tableID">
<tr>
<td>ABC</td>
<td>BDE</td>
</tr>
</table>
</body>
</html>
However, when I click on the button, nothing happens. Console shows a error UNCAUGHT TYPE ERROR whenever the button is clicked.

Include any scripts reliant on jQuery after the jQuery. I'd say best practice is to put jQuery first. Let me know if this works:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/tableExport.js"></script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/sprintf.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/base64.js"></script>

Related

Using <canvas> to draw screen in .erb file

I'm using the following javascript code to help me draw an output screen in a .erb file which doesn't render properly. The canvas tag is unhelpful.
There is no output screen. The linking is proper and I am able to get output "hello" when I add a testing line.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programming++! Build Your Own Blocks</title>
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" src="morphic.js"></script>
<script type="text/javascript" src="widgets.js"></script>
<script type="text/javascript" src="blocks.js"></script>
<script type="text/javascript" src="threads.js"></script>
<script type="text/javascript" src="objects.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="paint.js"></script>
<script type="text/javascript" src="lists.js"></script>
<script type="text/javascript" src="byob.js"></script>
<script type="text/javascript" src="xml.js"></script>
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript" src="locale.js"></script>
<script type="text/javascript" src="cloud.js"></script>
<script type="text/javascript" src="sha512.js"></script>
<script type="text/javascript" src="FileSaver.min.js"></script>
<script type="text/javascript">
var world;
window.onload = function () {
world = new WorldMorph(document.getElementById('world'));
world.worldCanvas.focus();
new IDE_Morph().openIn(world);
loop();
};
function loop() {
requestAnimationFrame(loop);
world.doOneCycle();
}
</script>
</head>
<body style="margin: 0;">
<canvas id="world" tabindex="1" style="position: absolute;" />
</body>
</html>
Any help please ?

can't display a simple graph using jqplot

I'm a new employee at a company and also new to php and jqplot. :$
I'm trying to create a simple graph using jqplot.
I followed all the instructions at http://www.jqplot.com/tests/line-charts.php
but nothing is displayed in my div :(
can someone help?
I think the problem might that its not loading the jqplot files :,(
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Capacity Report</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../../../jqplot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css"/>
<link rel="stylesheet" href="../../../css/style.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="../../../jqplot/jquery.jqplot.css"/>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../../../jqplot/jquery.js"></script>
<script type="text/javascript" src="../../../jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.ohlcRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.highlighter.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.trendline.js"></script>
</head>
<body>
<div id="chartdiv" style="height:400px;width:300px; ">graph1</div>
<div id="chart1" style="height:400px;width:300px; ">graph2</div>
</body>
</html>
<script> $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
</script>
Hello everyone i solved my error!
the problem was in the file path! after many hours of playing around i realized i was trying to open jqplot file with a wrong path!!! :P
hope this will help someone else with the same problem
this is my final working code 100% bullet proof :)
<html>
<head>
<title>Working plots functions</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.jqplot.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart2', [[3,7,9,1,5,6,8,2,5]]);
});
</script>
Here is the start of the page...<br>
<div id="chart1" style="height:400px;width:300px;">graph1</div>
<div id="chart2" style="height:400px;width:300px;">graph2</div>
</body>
</html>

Issue including elFinder and JQuery UI

I'm trying to setup an elFinder window on my website. So I downloaded the latest release of from GitHub and followed it's instructions.
I included every file they asked for:
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
And I include this into my head-section as well:
<script type="text/javascript">
$().ready(function() {
var elf = $('#elfinder').elfinder({
lang: 'nl', // language (OPTIONAL)
url : '../includes/elfinder/php/connector.php' // connector URL (REQUIRED)
}).elfinder('instance');
});
</script>
But for some reason, all I get is this image:
But those files are, obviously, included... So I'm wondering what I'm doing wrong since I can't get my finger on the issue...
Why don't you combine the jQuery UI files into one?
Yes the order of includes does matter.
Here a working demo.
Here is the code
HTML
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://elfinder.org/demo/css/elfinder.min.css" />
</head>
<div id="elfinder"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://elfinder.org/demo/js/elfinder.min.js" ></script>​
Javascript
$().ready(function() {
var f = $('#elfinder').elfinder({
url : '/connector'
}).elfinder('instance');
});​
have you tried changing the order of inclusion?
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
Let me know ;)

get jQuery mobile datebox running (TypeError: a.mobile.datebox is undefined)

I cannot get the jQueryMobile - DateBox running. It is not shown at all and I get some JS errors. Here is my code:
Header:
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="css/jqm-datebox-1.1.0.min.css" />
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/jqm-datebox-1.1.0.mode.calbox.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.datebox.i18n.de.utf8.js"></script>
Body:
<form id="formular" name="formular" method="post" action="enquiry.php">
<table>
<tr>
<td>Arrival</td>
<td><input name="arrival" id="frm_arrival" type="date" data-role="datebox" data-options='{"mode": "calbox"}' value="<?php echo $arrival; ?>" /></td>
</tr>
<!-- .... -->
</table>
</form>
The datepicker is not shown and Firebug gives me the following errors:
TypeError: a.mobile.datebox is undefined
TypeError: jQuery.mobile.datebox is undefined
The error should be on line 11 of jquery.mobile.datebox.i18n.de.utf8.js. This is the line:
jQuery.extend(jQuery.mobile.datebox.prototype.options.lang, {
I cannot find the error. Is it a jQuery conflict? Am I using jQueryMobile - DateBox the wrong way? What I'm doing wrong?
Switch these two lines, I'm guessing the first one depends on the second one:
<script type="text/javascript" src="js/jqm-datebox-1.1.0.mode.calbox.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.datebox.i18n.de.utf8.js"></script>
To this:
<script type="text/javascript" src="js/jquery.mobile.datebox.i18n.de.utf8.js"></script>
<script type="text/javascript" src="js/jqm-datebox-1.1.0.mode.calbox.min.js"></script>
EDIT
You need to include the actual datebox file in your header. The German version is only a translation. It doesn't contain the datebox plugin itself.
Arrange your script tags like so:
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jquery.mobile.datebox-something-something.js"></script>
<script type="text/javascript" src="jqm-datebox-1.1.0.mode.calbox.min.js"></script>
<script type="text/javascript" src="jquery.mobile.datebox.i18n.de.utf8.js"></script>

ical jqtouch extension works perfect local but doesn't even show up online

Hi
I have created a web app that uses ical. When I run it locally it works like a charm. However when I upload it to my server via ftp so as to test it online the ical script doesn't show up.
My safari inspector gives me an error--->
TypeError: Result of expression '$('#any_id').getCalendar' [undefined] is not a function.
This is my code:
<style type="text/css" media="screen">#import "jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">#import "themes/artspot/theme.css";</style>
<style type="text/css" media="screen">#import "jqt.calendar.css";</style>
<script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="extensions/jqt.calendar/jqt.calendar.js" type="application/x-javascript" charset="utf-8"></script>
<style type="text/css" media="screen">#import "../../extensions/jqt.listIndex/jqt.listIndex.css";</style>
<script src="../../jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.listIndex/jqt.listIndex.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({});
$(function() {
$('#any_id').getCalendar();
});
</script>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="jqt">
<div id="home" class="current">
<div class="toolbar">
<h1>Calendar</h1>
</div>
<div id="any_id">
<ul>
<li><time datetime="2011-01-26T14:30Z">210 mg/dl</time></li>
<li><time datetime="2011-01-26T14:30Z">100 mg/dl</time></li>
</ul>
</div>
</div>
</div>
</body>
my problematic web app is --->web app ical
Error: $("#any_id").getCalendar is not a function
Source File: http://webstore.web44.net/
Line: 20
You are loading everything twice
<script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>

Categories