Develop Reference

Is there way to export all html table pagination data using jspdf and autotable in javascript

I am exporting HTML table data into PDF. I have a lot of data to export, therefore my HTML table has a pagination option. while exporting I am getting only data which is appearing on the JSP page. Other data which are on pagination is not fetching in PDF. Is there any way to get all HTML table pagination data? I must have to use pagination option in HTML table because Data may be too large.
function exportTableToPDF(filename,report_title) {
var doc = new jsPDF('p', 'pt','a4');
var header = function(data) {
if (data.pageCount > 1) {
return false;
}
else
{
doc.setFontSize(11);
//doc.setTextColor(200, 0, 255);
doc.setFontStyle('bold');
doc.text(report_title, data.settings.margin.left + 35, 60);
doc.text('<%=DateLib.getDateTimeNow()%>', data.settings.margin.left + 35, 80);
}
};
var totalPagesExp = '{total_pages_count_string}';
var footer = function(data) {
var str = 'Page ' + data.pageCount;
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
str = str + ' of ' + totalPagesExp;
console.log('test');
}
doc.text(str, data.settings.margin.left, doc.internal.pageSize.height - 30);
};
var options = {
beforePageContent: header,
afterPageContent: footer,
pagesplit: true,
margin: {
top: 100
}
};
var elem = document.getElementById('datatable-1');
var data = doc.autoTableHtmlToJson(elem);
doc.autoTable(data.columns, data.rows, options);
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
doc.putTotalPages(totalPagesExp);
}
doc.save(filename);
}
This provided code only extract data which are appearing on JSP at that time. For example, if my HTML table on page 4 using the pagination option, this will extract only page 4 data.

All data might not exist locally. You could either create a way to fetch the data for the pdf as json or include it on page right away some other way.

Toggle function on strings

I am not sure if this is possible, but it is possible to toggle a string? I have a string that echo's out of a DB. And i wanted to toggle the sting as all the products the string reads out is enormous, in order for the page to be more user friendly.
mysqli_report(MYSQLI_REPORT_INDEX); //overrid a common php nonsense error
$fc_sel = $dbc->query("SELECT * FROM Food_Cat");
$fc_sel->data_seek(0);
echo("<br>");
echo("<button onclick='toggle_visibility('forms')'>Hello!</button>");
echo("<div class='forms'>");
while ($output = $fc_sel->fetch_assoc()) {
$fc_run .= $output['Food_Cat_name'] . $output['Food_Cat_Desc'] . '<br>';
$_SESSION['Food_Cat_name'] = $output['Food_Cat_name']; //echo out product name
$_SESSION['Food_Cat_Desc'] = $output['Food_Cat_Desc']; //echo out product desc
// echo out all add on's and delete button
echo("<div id='header'>");
echo(" <p id='session'>" . $_SESSION['Food_Cat_name'] . " </p>");
echo("</br>");
echo("<input type='button' id='submit_addon' name='submit_addon' onclick='toggle_visibility('forms')'>");
echo("</div>");
Javascript
//turn entire div into toggle
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.display == '')
e.style.display = 'none';
else
e.style.display = 'block';
}
I have tested what i am using on HTML and its works perfectly. But does not work in the string.
Any suggestions.

use \'
echo('<input type="button" id="submit_addon" name="submit_addon" onclick="toggle_visibility(\'forms\')">');
In your javascript use http://api.jquery.com/toggle/
function toggle_visibility(id) {
$( "#"+id ).toggle();
}

function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.display == '')
e.style.display = 'none';
else
e.style.display = 'block';
}
This Javascript function will check the "ID" tag of your HTML element. In your view code, you have 'forms', but it is a class, not an ID.
To make it work, change your DIV element in your view file:
<div id='forms'>
instead of
<div class='forms'>

How do I load a my Java applet on a Click event?

I have a div where I load a Java applet, but the new version of Java is giving an unsigned certificate error:
I would like to know if I can restrict the loading of my Java applet (DeployJava.RunApplet), currently instantiated while the page is loaded, to only load when user clicks the View in 3D button?
Applet loading code:
<div id="appletContainer" runat="server" style="width:(document.body.clientWidth - 270);height:300" clientidmode="Static">
<script type="text/javascript">
var showCI = 0;
if (document.getElementById("hdnHas3D").value == "1" && !isAppleMobile()) {
var J3DStyleID = document.getElementById("hdn3DStyleID").value;
var code = "com.wirefusion.player.AppletPlayer";
var archiveList = "Some achive List";
var width = document.body.clientWidth - 270;
var height = 300;
var attributes = {
id: "appletContainerX",
name: J3DStyleID,
code: code,
codebase: ".",
width: width,
height: height,
mayscript: "true"
};
var parameters = {
progressFunc: "handleAppletProgress",
archive: archiveList,
java_arguments: "-Xmx200m",
regid: "6050-25",
resourcefolder: "/RichContent/3D_Vehicles/J3D/Vehicles/" + J3DStyleID + "/",
preloadfile: J3DStyleID + ".jar",
environmentType: "WEBSITE",
environmentWidth: width,
environmentHeight: height,
groupsXMLFile: "../../Resources/groups.xml",
vehicleXMLFile: J3DStyleID + ".xml"
};
var version = '1.6.0_20';
if (deployJava.versionCheck(version + '+')) {
docWriteWrapper(function () {
deployJava.runApplet(attributes, parameters, version);
});
} else {
if (document.getElementById("iframeContainer").style.display != "none") {
alert("Unable to load Interactive mode");
showCI = 1;
}
}
}
</script>
</div>

Don't include the regular <applet> (or <object>) tag in your HTML. Instead follow this tutorial on how to do dynamically add it to your page, using JavaScript.
HTML 4
function loadApplet(code,codebase,width,height,alt){
var placeholder=document.getElementById('placeholder');
if(window.opera){
placeholder.innerHTML='<applet code="'+code+'" codebase="'+codebase+'" width="'+width+'" height="'+height+'" alt="'+alt+'"></applet>';
}else{
var a=document.createElement('applet');
a.setAttribute('code',code);
a.setAttribute('codebase',codebase);
a.setAttribute('width',width);
a.setAttribute('height',height);
a.setAttribute('alt',alt);
placeholder.appendChild(a);
}
}
HTML 5
function loadApplet(code,codebase,width,height,alt){
var placeholder=document.getElementById('placeholder');
var a = document.createElement('object');
a.setAttribute('type','application/x-java-applet');
a.setAttribute('width',width);
a.setAttribute('height',height);
a.setAttribute('alt',alt);
var codeParam = document.createElement('param');
codeParam.setAttribute('name','code');
codeParam.setAttribute('value',code);
a.appendChild(codeParam);
var codebaseParam = document.createElement('param');
codebaseParam.setAttribute('name','codebase');
codebaseParam.setAttribute('value',codebase);
a.appendChild(codebaseParam);
placeholder.appendChild(a);
}
In your HTML create a placeholder DIV, i.e. where you want to it to be loaded into, and a link to load your applet. You will need to customise the values in the load link to your values of the Applet.
<div id="placeholder"></div>
<input type="button" value="Load Applet" onclick="loadApplet('TestApplet.class','.','200','300','demo applet')" />
The linked tutorial explains more about how to make it pretty. The code above is just simply the concept.
Update since modification of question
Your code appears to load the applet using JavaScript already. The problem is the script is being run as soon as the page is loaded and not when the user clicks on the View in 3D button.
To prevent it running immediately, you can wrap the loader code in a function called loadApplet. So explained in pseudo code:
function loadApplet() {
// Your existing applet loading code
}
So using your included source code, I have wrapped it with a function, which will prevent it running when your page is loaded.
<div id="appletContainer" runat="server" style="width:(document.body.clientWidth - 270);height:300" clientidmode="Static">
<script type="text/javascript">
// Wrap your code with a function called loadApplet
function loadApplet() {
// Your applet loading code:
var showCI = 0;
if (document.getElementById("hdnHas3D").value == "1" && !isAppleMobile()) {
var J3DStyleID = document.getElementById("hdn3DStyleID").value;
var code = "com.wirefusion.player.AppletPlayer";
var archiveList = "Some achive List";
var width = document.body.clientWidth - 270;
var height = 300;
var attributes = {
id: "appletContainerX",
name: J3DStyleID,
code: code,
codebase: ".",
width: width,
height: height,
mayscript: "true"
};
var parameters = {
progressFunc: "handleAppletProgress",
archive: archiveList,
java_arguments: "-Xmx200m",
regid: "6050-25",
resourcefolder: "/RichContent/3D_Vehicles/J3D/Vehicles/" + J3DStyleID + "/",
preloadfile: J3DStyleID + ".jar",
environmentType: "WEBSITE",
environmentWidth: width,
environmentHeight: height,
groupsXMLFile: "../../Resources/groups.xml",
vehicleXMLFile: J3DStyleID + ".xml"
};
var version = '1.6.0_20';
if (deployJava.versionCheck(version + '+')) {
docWriteWrapper(function () {
deployJava.runApplet(attributes, parameters, version);
});
} else {
if (document.getElementById("iframeContainer").style.display != "none") {
alert("Unable to load Interactive mode");
showCI = 1;
}
}
}
}
</script>
</div>
Then to your View in 3D element you must add an onclick attribute calling the loadApplet() function. For example:
<input type="button" value="Show in 3D" onclick="loadApplet()" />
Note: It may be the case that your View in 3D button already has an onclick attribute wired to a function that brings your applet into view, in which case you would still want this to be called after your load function. I have used showApplet() as an example, this is most likely different for you.
<input type="button" value="Show in 3D" onclick="loadApplet(); showApplet();" />
If you provide the code for your Show in 3D button, I can better assist you here.

Filter from Fusion Table to Google Maps v3 Checkbox Issues

Rather than use a million kmls (which would have stopped displaying after ten or so) I've tried to take a Fusion table and use checkboxes to toggle between different filters. This worked pretty well for the first two, but now the other categories won't show unless the first one or two are clicked and clicked off. Clearly something is amiss. I stole the code from the Google example (IN, about pizza shops) but this hasn't worked on expansion. Also, I've got an expanding sidebar, which isn't helping me keep this under control.
I've created a bunch of these:
google.maps.event.addDomListener(document.getElementById('Food Manufacturing/Wholesale'),
'click', function() {
filterMap(layer, tableId, map);
});
And then later this:
function filterMap(layer, tableId, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'Longitude',
from: tableId,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var stores = document.getElementsByName('store');
for (var i = 0, store; store = stores[i]; i++) {
if (store.checked) {
var storeName = store.value.replace(/'/g, '\\\'');
filter.push("'" + storeName + "'");
}
}
var where = '';
if (filter.length) {
where = "'Displ_Type' IN (" + filter.join(',') + ')';
}
return where;
}
google.maps.event.addDomListener(window, 'load', initialize);
And then these in a div body:
<li><a1><input type="checkbox" name="store" id="cafe" value="Cafe">Cafe</a1></li>
<li><a1><input type="checkbox" name="store" id="Catering" value="Catering"> Catering</a1></li>
<li><a1><input type="checkbox" name="store" id="Cooking School" value="Cooking School"> Cooking School</a1></li>
Also
http://jsfiddle.net/pwhqq/1/
The Fusion table is:
https://www.google.com/fusiontables/DataSource?snapid=S7955100ZHL

Annnnnd I'm an idiot. The solution is not to name your Fusion Table columns (which will become your ids and your names and your values) anything with capital letters or spaces or punctuation marks. Java does not take kindly to it.

How do I click a javascript button with htmlunit?

I'm working on an application that will automatically click a button on a webpage using htmlunit in Java. Only problem is that that button is a javascript button, so the standard getInputByName() won't work. Any suggestions with dealing with this? The code for the button is included below.
<a class="vote_1" id="1537385" href="/javascript%3Avoid%280%29/index"><img src="/images/parts/btn-vote.gif" alt="Btn-vote" /></a>
In addition, here's the other code for voting.
<div id="content"><script type="text/javascript" src="/js/scriptFeeds/voteArticle.js"></script>
Which leads to the following javascript:
var pressed = new Array();
$j(document).ready(function() {
var nr = $j("input#number_of_articles").val();
for(var i=1; i<=nr; i++){
$j("a.vote_"+i).click(function(){
var article = $j(this).attr("id");
$j('#'+article).hide();
if (!pressed[article]) {
pressed[article] = "yes";
jQuery.post('/vote-article', {
_token: $j("#_token").val(),
article_id: article
},function(data) {
$j("span.numberOfVotes_"+data.id).html(data.votes);
}, "json");
}
return false;
});
}
});

Try using this addOn for firefox, it records your actions and generates the HTMLUnit code for the same. may be it could help.
http://code.google.com/p/htmlunitscripter/

There's nothing special about clickable images. Something like this should work:
button = page.getHtmlElementById( "1537385" ) ;
page = button.click() ;
HtmlUnit will then run the Javascript and return the updated page.
If the id attribute of the 'a' tag isn't constant, you may need to use XPath to grab it.

I have a very similar link on one of my pages. If you can call .click() on any HtmlElement, it should be able to run associated Javascript. Here is my code (generated from HtmlUnitScripter):
HtmlElement element4 = null;
Iterable<HtmlElement> iterable5 = page.getAllHtmlChildElements();
Iterator<HtmlElement> i6 = iterable5.iterator();
while(i6.hasNext())
{
HtmlElement anElement = i6.next();
if(anElement instanceof HtmlImage)
{
HtmlImage input = (HtmlImage) anElement;
String[] elements = "http://example.com/pages/powerbutton.png".split( "/" );
if(input.getSrcAttribute().indexOf(elements[elements.length-1] )> -1 )
{
element4 = input;
break;
}
}
}
HtmlPage page = element4.click();