Solved

Javascript and signaturepad

Posted on 2013-05-21
5
804 Views
Last Modified: 2013-05-23
Trying to get web page to regenerate a signature pad signature (http://thomasjbradley.ca/lab/signature-pad/regenerate/) , getting the error:
Uncaught TypeError: Cannot read property 'getContext' of undefined

Full html page attached
problem.html
0
Comment
Question by:freshgrill
  • 3
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39188347
Can you please upload this to your server and post the link.  Chances are you just have a something missing.
0
 

Author Comment

by:freshgrill
ID: 39188817
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39188921
You had a few html errors.  Working sample.   http://jsbin.com/aridej/1/edit  I have had this project on my own radar and just about to implement myself.

Think about encrypting that signature either serverside or js https://code.google.com/p/crypto-js/


 <html>
 <head>
 <META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="icon" href="/images/favicon.ico" type="image/ico"/>
<meta name="viewport" content="width=480" />
<title> Order Page</title>


<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700,600" rel=stylesheet>
<script src="http://orders.freshgrillfoods.com/signature-pad/modernizr.custom.min.js"></script>
<link rel=stylesheet href="http://orders.freshgrillfoods.com/signature-pad/jquery.signaturepad.css">
<!--[if lt IE 9]><script src="/signature-pad/flashcanvas.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://orders.freshgrillfoods.com/signature-pad/jquery.signaturepad.min.js"></script>
  
<script>
var sig=[{"lx":22,"ly":19,"mx":22,"my":18},{"lx":23,"ly":18,"mx":22,"my":19},{"lx":24,"ly":19,"mx":23,"my":18},{"lx":25,"ly":21,"mx":24,"my":19},{"lx":25,"ly":22,"mx":25,"my":21},{"lx":25,"ly":24,"mx":25,"my":22},{"lx":25,"ly":26,"mx":25,"my":24},{"lx":25,"ly":28,"mx":25,"my":26},{"lx":24,"ly":32,"mx":25,"my":28},{"lx":21,"ly":36,"mx":24,"my":32},{"lx":18,"ly":38,"mx":21,"my":36},{"lx":17,"ly":40,"mx":18,"my":38},{"lx":17,"ly":38,"mx":17,"my":40},{"lx":17,"ly":37,"mx":17,"my":38},{"lx":16,"ly":37,"mx":17,"my":37},{"lx":16,"ly":35,"mx":16,"my":37},{"lx":16,"ly":34,"mx":16,"my":35},{"lx":16,"ly":32,"mx":16,"my":34},{"lx":18,"ly":30,"mx":16,"my":32},{"lx":18,"ly":29,"mx":18,"my":30},{"lx":19,"ly":27,"mx":18,"my":29},{"lx":21,"ly":25,"mx":19,"my":27},{"lx":21,"ly":23,"mx":21,"my":25},{"lx":22,"ly":22,"mx":21,"my":23},{"lx":23,"ly":21,"mx":22,"my":22},{"lx":24,"ly":20,"mx":23,"my":21},{"lx":25,"ly":20,"mx":24,"my":20},{"lx":26,"ly":19,"mx":25,"my":20},{"lx":26,"ly":18,"mx":26,"my":19},{"lx":28,"ly":18,"mx":26,"my":18},{"lx":28,"ly":17,"mx":28,"my":18},{"lx":29,"ly":17,"mx":28,"my":17},{"lx":30,"ly":17,"mx":29,"my":17},{"lx":31,"ly":17,"mx":30,"my":17},{"lx":32,"ly":17,"mx":31,"my":17},{"lx":33,"ly":17,"mx":32,"my":17},{"lx":34,"ly":17,"mx":33,"my":17},{"lx":34,"ly":18,"mx":34,"my":17},{"lx":35,"ly":18,"mx":34,"my":18},{"lx":35,"ly":19,"mx":35,"my":18},{"lx":35,"ly":20,"mx":35,"my":19},{"lx":35,"ly":21,"mx":35,"my":20},{"lx":34,"ly":22,"mx":35,"my":21},{"lx":34,"ly":23,"mx":34,"my":22},{"lx":33,"ly":23,"mx":34,"my":23},{"lx":31,"ly":24,"mx":33,"my":23},{"lx":31,"ly":25,"mx":31,"my":24},{"lx":30,"ly":25,"mx":31,"my":25},{"lx":31,"ly":25,"mx":30,"my":25},{"lx":32,"ly":25,"mx":31,"my":25},{"lx":33,"ly":26,"mx":32,"my":25},{"lx":34,"ly":27,"mx":33,"my":26},{"lx":35,"ly":27,"mx":34,"my":27},{"lx":36,"ly":28,"mx":35,"my":27},{"lx":36,"ly":29,"mx":36,"my":28},{"lx":36,"ly":30,"mx":36,"my":29},{"lx":35,"ly":30,"mx":36,"my":30},{"lx":35,"ly":31,"mx":35,"my":30},{"lx":32,"ly":32,"mx":35,"my":31},{"lx":29,"ly":34,"mx":32,"my":32},{"lx":26,"ly":34,"mx":29,"my":34},{"lx":24,"ly":34,"mx":26,"my":34},{"lx":23,"ly":34,"mx":24,"my":34},{"lx":45,"ly":28,"mx":45,"my":27},{"lx":45,"ly":26,"mx":45,"my":28},{"lx":44,"ly":26,"mx":45,"my":26},{"lx":43,"ly":26,"mx":44,"my":26},{"lx":42,"ly":26,"mx":43,"my":26},{"lx":40,"ly":26,"mx":42,"my":26},{"lx":39,"ly":26,"mx":40,"my":26},{"lx":38,"ly":26,"mx":39,"my":26},{"lx":37,"ly":26,"mx":38,"my":26},{"lx":36,"ly":26,"mx":37,"my":26},{"lx":36,"ly":28,"mx":36,"my":26},{"lx":36,"ly":29,"mx":36,"my":28},{"lx":36,"ly":30,"mx":36,"my":29},{"lx":36,"ly":31,"mx":36,"my":30},{"lx":37,"ly":31,"mx":36,"my":31},{"lx":38,"ly":32,"mx":37,"my":31},{"lx":39,"ly":32,"mx":38,"my":32},{"lx":40,"ly":32,"mx":39,"my":32},{"lx":41,"ly":33,"mx":40,"my":32},{"lx":42,"ly":33,"mx":41,"my":33},{"lx":43,"ly":33,"mx":42,"my":33},{"lx":42,"ly":33,"mx":43,"my":33},{"lx":42,"ly":32,"mx":42,"my":33},{"lx":41,"ly":32,"mx":42,"my":32},{"lx":41,"ly":31,"mx":41,"my":32},{"lx":40,"ly":31,"mx":41,"my":31},{"lx":39,"ly":31,"mx":40,"my":31},{"lx":38,"ly":30,"mx":39,"my":31},{"lx":37,"ly":30,"mx":38,"my":30},{"lx":36,"ly":30,"mx":37,"my":30},{"lx":36,"ly":29,"mx":36,"my":30},{"lx":59,"ly":26,"mx":59,"my":25},{"lx":58,"ly":25,"mx":59,"my":26},{"lx":57,"ly":25,"mx":58,"my":25},{"lx":56,"ly":24,"mx":57,"my":25},{"lx":56,"ly":23,"mx":56,"my":24},{"lx":55,"ly":22,"mx":56,"my":23},{"lx":53,"ly":20,"mx":55,"my":22},{"lx":53,"ly":14,"mx":53,"my":20},{"lx":51,"ly":10,"mx":53,"my":14},{"lx":51,"ly":8,"mx":51,"my":10},{"lx":51,"ly":7,"mx":51,"my":8},{"lx":52,"ly":8,"mx":51,"my":7},{"lx":53,"ly":9,"mx":52,"my":8},{"lx":54,"ly":11,"mx":53,"my":9},{"lx":55,"ly":13,"mx":54,"my":11},{"lx":56,"ly":20,"mx":55,"my":13},{"lx":57,"ly":25,"mx":56,"my":20},{"lx":57,"ly":28,"mx":57,"my":25},{"lx":57,"ly":30,"mx":57,"my":28},{"lx":57,"ly":31,"mx":57,"my":30},{"lx":56,"ly":30,"mx":57,"my":31},{"lx":56,"ly":29,"mx":56,"my":30},{"lx":56,"ly":27,"mx":56,"my":29},{"lx":57,"ly":25,"mx":56,"my":27},{"lx":58,"ly":24,"mx":57,"my":25},{"lx":60,"ly":21,"mx":58,"my":24},{"lx":62,"ly":20,"mx":60,"my":21},{"lx":63,"ly":19,"mx":62,"my":20},{"lx":64,"ly":19,"mx":63,"my":19},{"lx":64,"ly":18,"mx":64,"my":19},{"lx":65,"ly":18,"mx":64,"my":18},{"lx":66,"ly":18,"mx":65,"my":18},{"lx":66,"ly":19,"mx":66,"my":18},{"lx":68,"ly":20,"mx":66,"my":19},{"lx":68,"ly":21,"mx":68,"my":20},{"lx":69,"ly":23,"mx":68,"my":21},{"lx":69,"ly":24,"mx":69,"my":23},{"lx":69,"ly":25,"mx":69,"my":24},{"lx":70,"ly":26,"mx":69,"my":25},{"lx":70,"ly":27,"mx":70,"my":26},{"lx":69,"ly":28,"mx":70,"my":27},{"lx":68,"ly":29,"mx":69,"my":28},{"lx":66,"ly":29,"mx":68,"my":29},{"lx":65,"ly":30,"mx":66,"my":29},{"lx":64,"ly":30,"mx":65,"my":30},{"lx":63,"ly":30,"mx":64,"my":30},{"lx":62,"ly":30,"mx":63,"my":30},{"lx":62,"ly":29,"mx":62,"my":30},{"lx":61,"ly":28,"mx":62,"my":29},{"lx":60,"ly":28,"mx":61,"my":28},{"lx":93,"ly":32,"mx":93,"my":31},{"lx":93,"ly":30,"mx":93,"my":32},{"lx":94,"ly":30,"mx":93,"my":30},{"lx":95,"ly":30,"mx":94,"my":30},{"lx":97,"ly":28,"mx":95,"my":30},{"lx":99,"ly":26,"mx":97,"my":28},{"lx":100,"ly":25,"mx":99,"my":26},{"lx":103,"ly":23,"mx":100,"my":25},{"lx":105,"ly":22,"mx":103,"my":23},{"lx":106,"ly":20,"mx":105,"my":22},{"lx":106,"ly":18,"mx":106,"my":20},{"lx":107,"ly":17,"mx":106,"my":18},{"lx":107,"ly":15,"mx":107,"my":17},{"lx":107,"ly":14,"mx":107,"my":15},{"lx":108,"ly":14,"mx":107,"my":14},{"lx":108,"ly":15,"mx":108,"my":14},{"lx":109,"ly":17,"mx":108,"my":15},{"lx":109,"ly":19,"mx":109,"my":17},{"lx":109,"ly":20,"mx":109,"my":19},{"lx":110,"ly":24,"mx":109,"my":20},{"lx":111,"ly":27,"mx":110,"my":24},{"lx":111,"ly":30,"mx":111,"my":27},{"lx":112,"ly":32,"mx":111,"my":30},{"lx":114,"ly":32,"mx":112,"my":32},{"lx":115,"ly":32,"mx":114,"my":32},{"lx":117,"ly":31,"mx":115,"my":32},{"lx":117,"ly":30,"mx":117,"my":31},{"lx":118,"ly":28,"mx":117,"my":30},{"lx":119,"ly":26,"mx":118,"my":28},{"lx":120,"ly":26,"mx":119,"my":26},{"lx":122,"ly":26,"mx":120,"my":26},{"lx":124,"ly":27,"mx":122,"my":26},{"lx":125,"ly":27,"mx":124,"my":27},{"lx":126,"ly":28,"mx":125,"my":27},{"lx":128,"ly":29,"mx":126,"my":28},{"lx":129,"ly":30,"mx":128,"my":29},{"lx":131,"ly":29,"mx":129,"my":30},{"lx":132,"ly":29,"mx":131,"my":29},{"lx":133,"ly":28,"mx":132,"my":29},{"lx":134,"ly":27,"mx":133,"my":28},{"lx":135,"ly":26,"mx":134,"my":27},{"lx":136,"ly":26,"mx":135,"my":26},{"lx":137,"ly":26,"mx":136,"my":26},{"lx":137,"ly":27,"mx":137,"my":26},{"lx":138,"ly":27,"mx":137,"my":27},{"lx":139,"ly":27,"mx":138,"my":27},{"lx":139,"ly":26,"mx":139,"my":27},{"lx":138,"ly":25,"mx":139,"my":26},{"lx":136,"ly":24,"mx":138,"my":25},{"lx":134,"ly":23,"mx":136,"my":24},{"lx":131,"ly":22,"mx":134,"my":23},{"lx":119,"ly":18,"mx":131,"my":22},{"lx":104,"ly":14,"mx":119,"my":18},{"lx":89,"ly":14,"mx":104,"my":14},{"lx":80,"ly":13,"mx":89,"my":14},{"lx":78,"ly":13,"mx":80,"my":13},{"lx":79,"ly":13,"mx":78,"my":13},{"lx":80,"ly":13,"mx":79,"my":13},{"lx":81,"ly":13,"mx":80,"my":13},{"lx":83,"ly":13,"mx":81,"my":13},{"lx":88,"ly":13,"mx":83,"my":13},{"lx":100,"ly":15,"mx":88,"my":13},{"lx":116,"ly":15,"mx":100,"my":15},{"lx":134,"ly":15,"mx":116,"my":15},{"lx":151,"ly":15,"mx":134,"my":15},{"lx":167,"ly":15,"mx":151,"my":15},{"lx":177,"ly":15,"mx":167,"my":15},{"lx":180,"ly":15,"mx":177,"my":15},{"lx":181,"ly":14,"mx":180,"my":15},{"lx":180,"ly":14,"mx":181,"my":14}];
</script>
    </script> <script src="http://orders.freshgrillfoods.com//signature-pad/json2.min.js"></script>
<script>
   $(document).ready(function () {
    $('.sigPad').signaturePad({displayOnly:true}).regenerate(sig);
   
  
   
  });
  </script>

 </head>

<body > 
<table cellspacing=0 cellpadding=0 border=0 width="480" >
<tr><td colspan=99 ><img height=1 alt="" width=1></td></tr>
<tr><td colspan=99 bgcolor="#36c"><img height=1 alt="" width=1></td></tr>

<tr>
<td  colspan=99 bgcolor=#e5ecf9> 
<center><font size=+3  color=#FF0000><a href="/">Online Ordering</a> </font>
</center>
</td>
</tr>
<tr>
<td colspan=99>
<center>
<small>
&nbsp;&nbsp;
<a href="/index.pl?a=logout">Logout</a>
&nbsp;&nbsp;-                 
<a href="/index.pl?a=login">Login</a>
&nbsp;&nbsp;-                 
<a href="/index.pl?a=myaccount">My Account/Ordering</a>
</small> 
  </center>

</td>


</tr> 
<tr><td colspan=99 bgcolor="#36c"><img height=1 alt="" width=1></td></tr> 

  <tr><td>   <form method=post action="/index.pl" class=sigPad>
      <input type="hidden" name="a" value="printreceipt">
      <input type=hidden name=orderid id=orderid value="32">
      <input type="submit" value="Print Receipt">
      </form>
      </td>
      <td>   <form method=post action="/index.pl" class=sigPad>
      <input type="hidden" name="a" value="emailreceipt">
      <input type=hidden name=orderid id=orderid value="32">
      <input type="submit" value="Email Receipt">
      </form>
      </td>
      </tr>
<tr><td>Orderid</td><td colspan=99>32</td></tr>
<tr><td>Received</td><td colspan=99>2013-05-21 15:02:38.160</td></tr>
<tr><td>Received By:</td><td colspan=99>bob</td></tr>
<tr><td colspan=99><hr></td></tr>
<tr><td>6-77684-10148-6</td><td>FG Ham & Cheddar Super Tri </td><td>2</td><td>2.62</td><td>5.24</td></tr><tr><td>6-77684-10293-3</td><td>FG Protein Plate </td><td>2</td><td>3.33</td><td>6.66</td></tr><tr><td colspan=99><hr></td></tr><tr><td>&nbsp;</td><td>Ins Total</td><td>4</td><td>&nbsp;</td><td>11.90</td></tr><tr><td colspan=99><hr></td></tr><tr><td>6-77684-10149-3</td><td>FG Turkey & Cheddar Super Tri </td><td>2</td><td>2.62</td><td>-5.24</td></tr><tr><td colspan=99><hr></td></tr><tr><td>&nbsp;</td><td>Outs Total</td><td>-2</td><td>&nbsp;</td><td>-5.24</td></tr><tr><td colspan=99><hr></td></tr><tr><td>&nbsp;</td><td>Order Total</td><td>&nbsp;</td><td>&nbsp;</td><td>6.66</td></tr><tr><td colspan=99>
<hr> 
  <div class="sigPad signed">
  <div class="sigWrapper">
    <div class="typed">Sir John A. Macdonald</div>
     <canvas class="pad" width="200" height="55"></canvas>
  </div>
  <p>Sir John A. Macdonald<br>July 1, 1867</p>
</div>
</td></tr>




 <tr><td >&nbsp</td></tr>
   <tr><td bgcolor="#36c" colspan=99><img height=1 alt="" width=1></td></tr>
   <tr><td colspan=99 align=center bgcolor=#e5ecf9>&nbsp;</td></tr>
    <tr><td colspan=99 bgcolor=#e5ecf9>
 Elapsed Time: 0 
     </td></tr>
     <tr><td colspan=99 bgcolor=#e5ecf9>

     </td></tr>
      
         <tr><td colspan=99 align=center bgcolor=#e5ecf9>&nbsp;<br></td></tr>
          <tr><td bgcolor="#36c" colspan=99><img height=1 alt="" width=1></td></tr>
           </table>
            </body>
             </html>

Open in new window

0
 

Author Comment

by:freshgrill
ID: 39188950
I am still getting the same issue, it "writes" out whatever the name in <div class="typed">Mickey Mouse</div> instead of recreating the signature assigned to  "var sig"

Am I still missing something?

Thanks,
output1.png
output2.png
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39189380
Your table did not validate.  I made a simple table and it worked  http://jsbin.com/aridej/4/edit   It is important with js to make sure everything is valid or it gets messed up.

,{"lx":106,"ly":18,"mx":106,"my":20},{"lx":107,"ly":17,"mx":106,"my":18},{"lx":107,"ly":15,"mx":107,"my":17},{"lx":107,"ly":14,"mx":107,"my":15},{"lx":108,"ly":14,"mx":107,"my":14},{"lx":108,"ly":15,"mx":108,"my":14},{"lx":109,"ly":17,"mx":108,"my":15},{"lx":109,"ly":19,"mx":109,"my":17},{"lx":109,"ly":20,"mx":109,"my":19},{"lx":110,"ly":24,"mx":109,"my":20},{"lx":111,"ly":27,"mx":110,"my":24},{"lx":111,"ly":30,"mx":111,"my":27},{"lx":112,"ly":32,"mx":111,"my":30},{"lx":114,"ly":32,"mx":112,"my":32},{"lx":115,"ly":32,"mx":114,"my":32},{"lx":117,"ly":31,"mx":115,"my":32},{"lx":117,"ly":30,"mx":117,"my":31},{"lx":118,"ly":28,"mx":117,"my":30},{"lx":119,"ly":26,"mx":118,"my":28},{"lx":120,"ly":26,"mx":119,"my":26},{"lx":122,"ly":26,"mx":120,"my":26},{"lx":124,"ly":27,"mx":122,"my":26},{"lx":125,"ly":27,"mx":124,"my":27},{"lx":126,"ly":28,"mx":125,"my":27},{"lx":128,"ly":29,"mx":126,"my":28},{"lx":129,"ly":30,"mx":128,"my":29}

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Need help with this homework problem. 5 54
Link not working 6 41
Html date format 9 20
[form-control] Retain values after a POST action 21 32
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question