I have already added these js file to my aspx page. But i still couldn't able to get pdf file of my table data. the generated pdf is blank.i need all table data to that generated pdf .please if any one know how to do this?
<script src="../Script/jspdf.js"></script>
<script src="../Script/FileSaver.js"></script>
<script src="../Script/Blob.js"></script>
<script src="../Script/BlobBuilder.js"></script>
<script src="../Script/deflate.js"></script>
<script src="../Script/adler32cs.js"></script>
<script src="../Script/jspdf.plugin.addhtml.js"></script>
<script src="../Script/jspdf.plugin.from_html.js"></script>
<script src="../Script/jspdf.plugin.split_text_to_size.js"></script>
<script src="../Script/jspdf.plugin.standard_fonts_metrics.js"></script>
<script src="../Script/base64.js"></script>
<script src="../Script/sprintf.js"></script>
// Here is my aspx table or div content:
<div id="divReport" style="display: none">
<input type="button" id="btnSavePdf" value="Save as Pdf" />
<table id="example">
<tr id="trProject">
<td><span>Project :</span></td>
<td><span id="spanProject" runat="server"></span></td>
</tr>
<tr>
<td><span>Total Number of Employee :</span></td>
<td>
<asp:Label ID="spanTotalEmp" runat="server" EnableViewState="false" ClientIDMode="Static" ></asp:Label>
</td>
</tr>
<tr>
<td><span>Total Number of Hours :</span></td>
<td>
<asp:Label ID="spanTotalHours" runat="server" name="_name2" EnableViewState="false" ClientIDMode="Static" ></asp:Label>
</td>
</tr>
</table>
</div>
// Below is my Javascript button onclick code:
$('#btnSavePdf').click(function () {
var doc = new jsPDF('p', 'in', 'letter');
var source = $('#divReport').html();
var specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true;
}
};
doc.fromHTML(
source, // HTML string or DOM elem ref.
0.5, // x coord
0.5, // y coord
{
'width': 7.5, // max width of content on PDF
'elementHandlers': specialElementHandlers
});
doc.output('dataurl');
I assume you want to render the table only instead of the entire page. You can do this using the HTML table export jQuery plugin. This is what your HTML would look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- jQuery 2.0.2 -->
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="application/javascript" src="tableExport.js"></script>
<script type="application/javascript" src="jquery.base64.js"></script>
<script type="application/javascript" src="jspdf/libs/sprintf.js"></script>
<script type="application/javascript" src="jspdf/jspdf.js"></script>
<script type="application/javascript" src="jspdf/libs/base64.js"></script>
</head>
<body>
<table id="example">
<!-- rows here -->
</table>
As PDF
</body>
</html>
That style="display:none" would prevent it from rendering, thus you get a blank page.
That said, i think you're using quite old templates, cause sprintf.js and base64.js were removed something like three years ago. You should just need to include one of the files available on the dist folder.
https://github.com/MrRio/jsPDF/tree/master/dist
Here you have a working fromHTML table example using the latest version: http://jsfiddle.net/dGLmr/7/
Related
I am trying to figure out how to take user button clicks from buttons.html to dynamically toggle column visibility on a second userinput.html. I'm using DataTables for the userinput.html table and thought I had the solution with column.visible. In the DataTables manual there is an example of clicking a <a> and toggling column visibility. I am trying to apply that logic across html files. Unfortunately, the code I've tried is not working. Here's what I've got:
BUTTON PAGE
<!DOCTYPE html>
<html>
<head>
<title>buttons</title>
<link rel="stylesheet" type="text/css" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
<link rel="stylesheet" type="text/css" href="designscratchpad.css">
</head>
<body>
<h1>Button page</h1>
<button id='id1' class='class1' data-column="1">Clickme</button>
<button id='id2' class='class1' data-column="2">Clickme</button>
<button id='id3' class='class1' data-column="3">Clickme</button>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js">
</script>
<script type="text/javascript" src='stackexample.js'>
</script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
USER INPUT PAGE
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css"/>
<body>
<table id="userinput" class="display" cellspacing="1" width="100%">
<thead>
<tr>
<th>A</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr class="ac">
<td>
<input type="text" autofocus placeholder="e.g; " name="input" >
</td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<td>
<input type="text" placeholder="" name="P" class="h"></td>
</tr>
</tbody>
</table>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
<script type="text/javascript" src='stackexample.js'></script>
</body>
</html>
</body>
</html>
JS
$(document).ready( function () {
var table = $('#userinput').DataTable( {
"paging": false,
"ordering": false,
"scrollX" : true,
"scrollY" : true,
"scrollCollapse" : true,
"searching" : false,
// "stateSave" : true,
});
$('button.class1').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
});
;
There are no errors in the console on either html page. I think the error may be the use of the this keyword, but I'm not sure how to adjust the code to apply across html files.
It's not required to have the buttons on a separate page, in fact, I'd gratefully accept any constructive criticism.
Thank you in advance.
You can click button on one page to toggle (or any effect) on your another page ? So you can use webStorage(localstorage, sessionstorga) or cookies (read aboit this) or somthing like this. You click button and use script on first page but when you skip to another your js is restarting so you want to somthing to storage your data.
Just a quick question here. How can I call a click event of a button that is wrapped inside another html tag inside a main html page?
Sample code below is copied from a Dynamics CRM page source and the second html tag is inserted as a web resource on a Dynamics CRM form.
UPDATED CODE
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//alert("first ready ...");
//alert($("#btnHangup"));
$("#btnHangup").click();
});
</script>
</head>
<body>
<table>
<tr>
<td class="ms-crm-Field-Data-Print" colspan="2" rowspan="2" style="" visible="false">
<div class="ms-crm-Field-Data-Print" style="" data-height="48" colspan="2" rowspan="2" id="WebResource_Hangup_d">
<span>
<iframe frameborder="0" id="WebResource_Hangup" onload="if(!IsNull(Mscrm.InlineIFrameControlView)) Mscrm.InlineIFrameControlView.loadHandler("WebResource_Hangup")" class="ms-crm-Custom-Read" style="border: 0px; visibility: visible; display: block;" tabindex="0" url="/5Um2/%7B635594134590000132%7D/WebResources/cc_HangupButtonWebResource?orglcid=1033&orgname=15Um2&userlcid=1033&type=10006&typename=cc_&id=" src="/_static/blank.htm" iswebresource="True" scrolling="no">
#document
<html>
<head>
<meta charset="utf-8">
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
</head>
<body style="word-wrap: break-word;">
<title></title>
<script src="../WebResources/ClientGlobalContext.js.aspx" type="text/javascript" script=""></script>
<script type="text/javascript" src="/15Um2/_common/global.ashx?ver=-860134328"></script>
<script type="text/javascript" src="/15Um2/_common/windowinformation/windowinformation.js.aspx?lcid=1033&ver=-860134328"></script>
<script type="text/javascript" src="/15Um2/_common/entityproperties/entitypropertiesutil.js.aspx?tstamp=100732643&ver=-860134328"></script>
<script src="../WebResources/cc__wizard" type="text/javascript"></script>
<link href="../WebResources/cc_Style" rel="stylesheet" type="text/css">
<script src="../WebResources/cc_jquery_163" type="text/javascript"></script>
<table>
<tbody>
<tr>
<td>
<input class="hangup-btn" title="Click to hangup" id="btnHangUp" style="width: 110px;" type="button" value="Hangup">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#btnHangUp").click(function () {
alert("hangup clicked");
});
});
</script>
</body>
</html>
</iframe>
</span>
</div>
</td>
</tr>
</table>
</body>
</html>
Your code in the main page is looking for #btnHangup in that document, but it's not in that document, it's in the document associated with the iframe.
For the rest of this answer I'm going to assume you can't change the contents of the iframe, as seems to be suggested by your comments on the question.
To trigger a click on the element, you'll need to:
Wait for the iframe to load
Retrieve the element from the iframe's document
Trigger the click on that element
So I would do something like this (see comments):
// When our document is ready...
$(document).ready(function() {
// Try to do the click
tryClick();
function tryClick() {
var frame, button, jqFrame;
// Get the frame
frame = $("#WebResource_Hangup")[0];
// If we have it and it has its document...
if (frame && frame.contentDocument && frame.contentWindow) {
// Inject jQuery into it if we haven't
jqFrame = frame.contentWindow.jQuery;
if (!jqFrame) {
$("script[src*=jquery]").clone().appendTo(frame.contentWindow);
} else {
// We have, hook up a ready handler
jqFrame(frame.contentDocument).ready(function() {
// Fire the click
jqFrame("#btnHangup").click();
});
// Done
return;
}
}
// If we get here, we haven't hooked up the ready handler,
// so try again in a moment
setTimeout(tryClick, 10);
}
});
I am working on a history search function.
I have managed to get a working code to save the value from the textbox but I do not know how to load them into a listbox.
I want a listbox with clickable items so that I can click on a previous search value and load that value as I do from the textbox.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="jquery.js"></script>
<script src="j.js"></script>
</head>
<body>
<center>
<table>
<tr>
<td style="text-align: center">
<font size="22">Sök order</font>
</td>
</tr>
<tr>
<td>
<form action="test.php" method="post">
<input style="font-size: 44pt; text-align: center" size="9" type="text" name="txtSearch" id="txtSearch"/>
<input type="submit" id="submit" value="submit">
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
And the j.js that handles the local storage function.
$(function () {
$("#submit").click(function () {
var txtSearch = $("#txtSearch").val();
localStorage.setItem('searchvalue',txtSearch);
});
});
And last my test.php that handles the post search request
<?php
$txtSearch = $_REQUEST['txtSearch'];
header('Location: '.'https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr='.$txtSearch);
?>
How can I achieve this?
Thank you.
by js, you can
window.location = "https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr="+localStorage.getItem('searchvalue');
to save in listbox or any other
document.getElementById("id").value=localStorage.getItem('searchvalue');
to save in array
var a = [];
a[0]=localStorage.getItem('searchvalue');
I migrated a VS 2003 app to VS 2010.
The application has side_menu.ascx which is referenced in default.aspx.
in side_menu.ascx, a javascript function menu is invoked which is present in side_menu.js.
However, when the function menu is invoked, it gives an error during runtime - 'Cannot find function menu' This works fine in VS 2003
This is where I am getting this error - this code is in side_menu.ascx
new menu (SIDE_MENU_ITEMS, SIDE_MENU_POS, SIDE_MENU_STYLES)
This is the code in default.aspx
<!-- Side Menu -->
<td valign="top" class="page_side_menu">
<mycontrols:sidemenu id="SideMenu1" runat="server"/>
</td>
This is the code in side_menu.ascx
<%# Control Language="vb" AutoEventWireup="false" Codebehind="side_menu.ascx.vb" Inherits="TOrders.UI.Controls.SideMenu" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<table cellPadding="0" width="100%">
<tr>
<td vAlign="top" align="left" width="100%">
<table cellSpacing="10" cellPadding="0" width="100%">
<tr>
<td align="left">
<asp:Literal ID="litError" Runat="server" Text="<font color=#E0E0E0 size=1>* </font>" Visible="False"></asp:Literal><asp:label id="lblJump" runat="server" ForeColor="#E0E0E0" Font-Size="XX-Small">Jump to Telex/Order:</asp:label>
<br>
<asp:textbox id="txtJumpTo" runat="server" Width="125px" CssClass="textbox"></asp:textbox> <input type="button" value="Go" runat="server" id="btnGo" class="TabOut-Button">
</td>
</tr>
</table>
</td>
</tr>
</table>
<script language="JavaScript" src="~/library/scripts/side_menu.js" type="text/javascript"></script>
<script language="JavaScript" src="~/library/scripts/side_menu_items.js" type="text/javascript"></script>
<script language="JavaScript" src="~/library/scripts/side_menu_tpl.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
new menu (SIDE_MENU_ITEMS, SIDE_MENU_POS, SIDE_MENU_STYLES);
// -->
</script>
This is the javascript function side_menu.js
var menus = [];
function menu (item_struct, pos, styles) {
// browser check
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];
this.add_item = menu_add_item;
this.hide = menu_hide;
this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;
var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children[i].visibility(true);
menus[this.id] = this;
}
try removing tilde (~) from javascript src path and make sure path is actually correct
To me it was the same and so solution is:
Change the relative path and leave them in taking away the root ~ /
before
<%# Control Language="VB" AutoEventWireup="false" CodeFile="wucDTmisc1.ascx.vb" Inherits="wucDTmisc1" %>
<%# Register Src="wucBeneficiarios.ascx" TagName="wucBeneficiarios" TagPrefix="uc1" %>
<%# Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%# Register Src="Controles/wucMoneda.ascx" TagName="wucMoneda" TagPrefix="uc1" %>
<link href="~/css/content.css" rel="stylesheet" type="text/css" />
<link href="~/css/Blue.css" rel="stylesheet" type="text/css" />
<script src="~/js/siscli.js" type="text/javascript"></script>
<script src="~/js/json2.js" type="text/javascript"></script>
<script src="~/js/date.js" type="text/javascript"></script>
after
<%# Control Language="VB" AutoEventWireup="false" CodeFile="wucDTmisc1.ascx.vb" Inherits="wucDTmisc1" %>
<%# Register Src="wucBeneficiarios.ascx" TagName="wucBeneficiarios" TagPrefix="uc1" %>
<%# Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%# Register Src="Controles/wucMoneda.ascx" TagName="wucMoneda" TagPrefix="uc1" %>
<link href="/css/content.css" rel="stylesheet" type="text/css" />
<link href="/css/Blue.css" rel="stylesheet" type="text/css" />
<script src="/js/siscli.js" type="text/javascript"></script>
<script src="/js/json2.js" type="text/javascript"></script>
<script src="/js/date.js" type="text/javascript"></script>
Also while looking for the solution, I realized that in controls is better to leave the JS code.
It worked for me, I hope you too.
What you need is maybe something as explained here. You'll have to replace the "~" with something that will follow the usercontrol where he PRESENTLY is instead of where he is landed phisicaly in the application.
<script language="javascript" type="text/javascript" src="<%=Page.ResolveUrl("~/JS/VerticalMenu.js")%>"></script>
<script language="javascript" type="text/javascript" src="<%=Page.ResolveUrl("~/library/scripts/side_menu_items.js")%>"></script>
<script language="javascript" type="text/javascript" src="<%=Page.ResolveUrl("~/library/scripts/side_menu_tpl.js")%>"></script>
RESOLVED
I finally found the solution to the problem. It was with the script tag
I rewrote it as
<script src="../library/scripts/side_menu.js" type="text/javascript" />
instead of
<script src="../library/scripts/side_menu.js" type="text/javascript"></script>
I come from MVC background and I have little experience with web forms.
I have established where the problem is, but so far I have been unable to fix this.
I have a form which is meant to execute Javascript function when body of the form loads. Please notice that head tag has a run at server attribute as it needs to use Request.QueryString.
The code is below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function doSomething()
{
// Use web forms to do something
var foo = <%= Request.QueryString["input"] %>;
}
</script>
<title>Foo</title>
</head>
<body onload="doSomething()">
<form id="MainForm" runat="server">
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
...
</td>
</tr>
</table>
</form>
</body>
</html>
I get the following error:
SCRIPT5007: The value of the property doSomething is null or undefined, not a Function object.
My guess is that something executes on a server or other way round. This has worked previously (over a year ago), so potentially something in a web config was overwritten. I have spent the most of day on this and had no luck so far.
Edit: Generated output is below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function doSomething()
{
debugger;
var o = crmForm.queryString;
}
</script>
<title></title>
</head>
<body onload="doSomething()">
<form name="MainForm" method="post" action="fooPage.aspx?input=queryString" id="MainForm">
<div>
// hidden fields
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
// inputs
</td>
</tr>
</table>
</form>
</body>
</html>
Instead of using the onload attribute of the body tag, you can also add the following code within the <script> tags:
if(window.addEventListener) window.addEventListener("load", doSomething, true);
else window.onload = doSomething;