javascript printer friendly form with date problem
beneath you see a piece of custom code for Zendesk. Everything works fine, till I want to implement a date/time snippet.
Normally the script works like this:
1 - there is a button which says "Print Ticket".
2 - The button has a onclick event to open a printer friendly page ready for printing. After implementing the date/time code (what I didn't do well I believe) I only get a blanc page with only the date and time.
The only thing what happends is that the date and time are shown without the rest of the printable form.
I think I have to call the date/time javascript in a other way, but I really don't know how.
Can anyone please help me with this?
<style>
input.createtable {
display:none;
}
</style>
<script language="JavaScript">
<!--
writeConsole = function(content) {
top.consoleRef=window.open('','myconsole',
'width=800,height=800'
+',menubar=0'
+',toolbar=0'
+',status=0'
+',scrollbars=1'
+',resizable=1')开发者_运维技巧
// top.consoleRef.document.open("text/html","replace");
top.consoleRef.document.writeln(
'<html><head><title>Signature Page</title></head>'
+'<style>th {color: #FFFFFF;border-bottom: 1px solid #000000;background-color:#CCCCCC;}tr {color: #000000;border-bottom: 1px solid #cccccc;}td.small {color: #000000; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;}td.large {color: #000000; font-size: 120%; font-family: Arial, Helvetica, sans-serif;font-weight: bold; text-align:center;}</style>'
+'<link href="http://asset3.zendesk.com/stylesheets_old/zd_print.css?1270161524" media="print" rel="stylesheet" type="text/css" />'
+'<body onLoad="self.focus()" style="background: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif">'
+'<center><A HREF="javascript:window.print()">Print Werkorder</A></center>'
+'<table width="100%"><tr><td align="left" valign="middle">'
+'</td><br />'
+'www.domain.nl<br />'
+'Tel: 058-111111111<br />'
+'E-mail info@domain.nl'
+'</tr></table>'
+content
+'</body></html>'
)
top.consoleRef.document.close()
}
//-->
</script>
<script language="JavaScript">
// Get today's current date.
var now = new Date();
// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;
// Print out the data.
document.write(today);
// End -->
</script>
<form>
<input class="createtable" name=userInput type=textarea size="1" value="<table width=100% height=825 border=0 cellpadding=6 cellspacing=4>
<tr>
<th colspan=6><h1>WERKORDER NR#: {{ticket.id}}</h1></th>
</tr>
<tr>
<td colspan=6><hr width=100% noshade=noshade /></td>
</tr>
<tr>
<td width=13% valign=top><strong>Klantinformatie:</strong></td>
<td width=87% align=left valign=top><p><strong>Datum:
<script language="JavaScript">
// Get today's current date.
var now = new Date();
// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;
// Print out the data.
document.write(today);
// End -->
</script>
<br />
Naam</strong>: {{ticket.requester.name}}<br />
<strong>Bedrijf:</strong> {{ticket.organization.name}}<br />
<strong>Telefoonnummer:</strong> {{ticket.ticket_field_484140}}<br />
<strong>E-mail:</strong> {{ticket.requester.email}}</p></td>
</tr>
<tr>
<td valign=top><strong>In ontvangst genomen:</strong></td>
<td align=left valign=top><strong>Merk & Model:</strong> {{ticket.ticket_field_483591}}<br />
<strong>Hardware Type:</strong> {{ticket.ticket_field_484179}}<br />
<strong>Uitbesteed:</strong> {{ticket.ticket_field_483608}}<br />
<strong>Prioriteit:</strong> {{ticket.priority}}</td>
</tr>
<tr>
<td colspan=6><hr width=100% noshade=noshade /></td>
</tr>
<tr>
<td valign=top><strong>Overeengekomen:</strong></td>
<td colspan=5 rowspan=2 valign=top><p> </p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan=6><hr width=100% noshade=noshade /></td>
</tr>
<tr>
<td valign=top><strong>Handtekening voor akkoord:</strong></td>
<td colspan=5><table width=100% border=0 cellspacing=7 cellpadding=7>
<tr>
<td width=33%> </td>
<td width=33%> </td>
<td width=31%> </td>
</tr>
<tr>
<td width=33%><hr noshade=noshade /></td>
<td width=33%><hr /></td>
<td><hr /></td>
</tr>
<tr>
<td width=33%> {{ticket.requester.name}} </td>
<td width=33%>Datum:</td>
<td>Plaats:</td>
</tr>
</table> <p><br />
</p></td>
</tr>
</table>">
<input type=button value="Print Werkorder"
onClick="writeConsole(this.form.userInput.value)"
>
</form>
Edit question
This is what I have now, the form appears again, but without a date, why is this?
I'll post in short the code again:
the altered javascript:
<script language="JavaScript">
// Get today's current date.
var now = new Date();
// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;
// Print out the data.
// document.write(today);
// Begin altered code
document.getElementById("date").innerHTML = today;
// End altered code
// End -->
</script>
In the form I call the date like this:
<tr>
<td width=13% valign=top><strong>Klantinformatie:</strong></td>
// this part has being altered
<td width=87% align=left valign=top><p><strong>Datum: <div id=date></div>
// end altered part
<br />
Naam</strong>: {{ticket.requester.name}}<br />
<strong>Bedrijf:</strong> {{ticket.organization.name}}<br />
<strong>Telefoonnummer:</strong> {{ticket.ticket_field_484140}}<br />
<strong>E-mail:</strong> {{ticket.requester.email}}</p></td>
</tr>
By using document.write you are getting rid of everything else in the document. Instead put a div on the page with an id and fill it using innerHTML.
document.getElementById("date").innerHTML = today;
Editing Answer due to Question Edit
By putting your JS in the head tag you are running everything before the DOM is ready and that causes an error when trying to get the Div by id since it is not there. There are two ways to get around this.
- Take a look at the jQuery method of .ready(), http://api.jquery.com/ready/.
- Move the document.getElementById call into a seperate script tag at the bottom of the body. This will then cause the browser to layout the page, thus having a full DOM, and then will run your code to fill in the date.
加载中,请稍侯......
精彩评论