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 the printable version of the ticket, but the time isn't displayed. (nothing happended really)
The only thing what happends is that the date and time are shown without the rest of the printable form.
I think the placemanet of the javascript is not in th right place, it needs to be in the head section which is generated also by javascript
Can anyone please help me with this? or point me in a vorm of example what to do?
<style>
input.createtable {
display:none;
}
</style>
<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>
<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>
<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: <div id=date></div>
<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>
