{"id":934,"date":"2012-09-26T08:34:02","date_gmt":"2012-09-26T06:34:02","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=934"},"modified":"2014-03-21T17:58:49","modified_gmt":"2014-03-21T15:58:49","slug":"xpages-capture-signatures-with-the-jquery-plugin-jsignature","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=934","title":{"rendered":"XPages: Capture Signatures with the jQuery-Plugin &#8218;jSignature&#8216;"},"content":{"rendered":"<p>In one of my current projects it is one of the goals that the members of the field staff have the possibility to sign a report directly on their iPad. After some research I found the very cool jQuery plugin <a title=\"github.com: jSignature Demo\" href=\"http:\/\/willowsystems.github.com\/jSignature\/#\/demo\/\" target=\"_blank\">jSignature<\/a>, which easily allows to add a signature capture field to a XPage.<\/p>\n<p>The plugin is very easy to use: Just add a &lt;div&gt; to your XPage and initialize the plugin with the <em>.jSignature()<\/em> constructor and that&#8217;s it! The API is very simple, but provides everything needed: The captured signatures can be stored in different formats like PNG or SVG or as native Vector. Additionally they can be encoded as BASE64 or BASE30. The data can restored as easy as they can be saved: Just one API call and it&#8217;s done.<\/p>\n<p>To save the signatures to a Notes document, the resulting data can be copied to a hidden input field. In the provied example above I additionally added the format of the signature. For a better handling of the generated data I decided to store the data in the <a title=\"wikipedia.org: SVG\" href=\"http:\/\/en.wikipedia.org\/wiki\/Scalable_Vector_Graphics\" target=\"_blank\">SVG format<\/a>, because this allows to save it directly in standard notes text field (without having problems because of the 32 K limit). This works well and the data can be displayed in standard browsers without any problems. Only in XPiNC this will not work, because the <a title=\"wikipedia.org: SVG\" href=\"http:\/\/en.wikipedia.org\/wiki\/Scalable_Vector_Graphics\" target=\"_blank\">SVG format<\/a> is not supported. PDFs doesn&#8217;t support SVG too, that&#8217;s why I created a converted agent using the <a title=\"apache.org: Batik\" href=\"http:\/\/xmlgraphics.apache.org\/batik\/\" target=\"_blank\">Apache Batik<\/a> framework.<\/p>\n<p>I will add a demo database asap. A description of parameters to customize the plugin can be found <a title=\"unbolt.net: jSignature\" href=\"http:\/\/www.unbolt.net\/jSignature\/\" target=\"_blank\">here<\/a>.<\/p>\n<p>P.S. The compressed Version is not running on teamstudio Unplugged. You have to use the uncompressed Version. The example uses the <a title=\"openntf.org: x$ jQuery selector for XPages\" href=\"http:\/\/openntf.org\/XSnippets.nsf\/snippet.xsp?id=x-jquery-selector-for-xpages\" target=\"_blank\">x$ function<\/a> of Mark Roden.<\/p>\n<h2>\u00a0XPage example<\/h2>\n<pre>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\r\n&lt;xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\"&gt;\r\n\r\n\u00a0\u00a0 \u00a0&lt;xp:this.resources&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:script src=\"\/x$.js\" clientSide=\"true\"&gt;&lt;\/xp:script&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:script src=\"\/jSignatureHandler.js\" clientSide=\"true\" \/&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:styleSheet href=\"\/jSignature.css\"&gt;&lt;\/xp:styleSheet&gt;\r\n\u00a0\u00a0 \u00a0&lt;\/xp:this.resources&gt;\r\n\u00a0\u00a0 \u00a0&lt;xp:this.data&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:dominoDocument var=\"documentSig\" \r\n           formName=\"frmSignature\" \/&gt;\r\n\u00a0\u00a0 \u00a0&lt;\/xp:this.data&gt;\r\n\r\n\u00a0\u00a0 \u00a0&lt;script src=\"js\/jquery-1.8.1.min.js\" \/&gt;\r\n\u00a0\u00a0 \u00a0&lt;script src=\"js\/jSignature\/jSignature.min.js\" \/&gt;\r\n\r\n\u00a0\u00a0 \u00a0&lt;xp:div id=\"jSignature\" style=\"width:400.0px\"&gt;&lt;\/xp:div&gt;\r\n\u00a0\u00a0 \u00a0&lt;xp:scriptBlock id=\"scriptBlockSignature\"&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:this.value&gt;&lt;![CDATA[\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(document).ready(function() { \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0sigHandler.init( \"#{id:jSignature}\", \r\n               \"#{id:inputHiddenSignatureData}\", \r\n               \"#{id:inputHiddenSignatureFormat}\" );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0)]]&gt;&lt;\/xp:this.value&gt;\r\n\u00a0\u00a0 \u00a0&lt;\/xp:scriptBlock&gt;\r\n\r\n\u00a0\u00a0 \u00a0&lt;xp:button id=\"button1\" value=\"Reset\"&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:eventHandler event=\"onclick\" submit=\"false\"&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:this.script&gt;&lt;![CDATA[\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0sigHandler.reset();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0]]&gt;&lt;\/xp:this.script&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;\/xp:eventHandler&gt;\r\n\u00a0\u00a0 \u00a0&lt;\/xp:button&gt;\r\n\r\n\u00a0\u00a0 \u00a0&lt;xp:button id=\"button2\" value=\"Save\"&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:eventHandler event=\"onclick\" submit=\"true\"\r\n           refreshMode=\"complete\"&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:this.script&gt;&lt;![CDATA[ \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return sigHandler.save();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0]]&gt;&lt;\/xp:this.script&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:this.action&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;xp:saveDocument var=\"documentSig\" \/&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;\/xp:this.action&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;\/xp:eventHandler&gt;\r\n\u00a0\u00a0 \u00a0&lt;\/xp:button&gt;\r\n\r\n\u00a0\u00a0 \u00a0&lt;xp:inputHidden id=\"inputHiddenSignatureData\" \r\n       value=\"#{documentSignature.SignatureData}\" \/&gt;\r\n\u00a0\u00a0 \u00a0&lt;xp:inputHidden id=\"inputHiddenSignatureFormat\"\r\n       value=\"#{documentSignature.SignatureFormat}\" \/&gt;\r\n\r\n&lt;\/xp:view&gt;<\/pre>\n<h2>CSJS library &#8222;jSignatureHandler.js&#8220;<\/h2>\n<pre><code>\/**\r\n\u00a0* signatureHandler\r\n\u00a0* JS Object for handling the signature data\r\n\u00a0* Requires jSignature jQuery plugin &amp; special \r\n * function \"x$\" from Mark Roden\r\n\u00a0* \r\n\u00a0* @author Sven Hasselbach\r\n\u00a0* @category JavaScript\r\n\u00a0* @category jQuery\r\n\u00a0* @category UI\r\n\u00a0* @version 1.0\r\n\u00a0*\/\r\nvar signatureHandler = function() {\r\n\u00a0\u00a0 \u00a0_module = \"signatureHandler\";\r\n\r\n\u00a0\u00a0 \u00a0_idJSignature: null; \/\/ DOM id of JSignatue DIV\r\n\u00a0\u00a0 \u00a0_idItemData: null; \/\/ DOM id of INPUT for signature data\r\n\u00a0\u00a0 \u00a0_idItemFormat: null; \/\/ DOM id of INPUT for signature format\r\n\u00a0\u00a0 \u00a0_objDOMJSignature: null; \/\/ handle to DOM object\r\n\u00a0\u00a0 \u00a0_objDOMItemData: null; \/\/ handle to DOM object\r\n\u00a0\u00a0 \u00a0_objDOMItemFormat: null; \/\/ handle to DOM object\r\n\u00a0\u00a0 \u00a0_maxSize = 32000; \/\/ max characters to store (32K limit!)\r\n\u00a0\u00a0 \u00a0_format = \"svg\"; \/\/ format used\r\n\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * set DOM id of JSignature DIV\r\n\u00a0\u00a0 \u00a0 * @param String id\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.setJSignatureId = function( id ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._idJSignature = id;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * get DOM id of JSignature DIV\r\n\u00a0\u00a0 \u00a0 * @return String id\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.getJSignatureId = function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return this._idJSignature;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * set DOM id of data item\r\n\u00a0\u00a0 \u00a0 * @param String id\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.setItemDataId = function( id ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._idItemData = id;\r\n\u00a0\u00a0 \u00a0} \r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * get DOM id of data item\r\n\u00a0\u00a0 \u00a0 * @return String id\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.getItemDataId = function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return this._idItemData;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * set DOM id of format item\r\n\u00a0\u00a0 \u00a0 * @param String id\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.setItemFormatId = function( id ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._idItemFormat = id;\r\n\u00a0\u00a0 \u00a0} \r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * get DOM id of format item\r\n\u00a0\u00a0 \u00a0 * @return String id\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.getItemFormatId = function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return this._idItemFormat;\r\n\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * get handle to DOM object of JSignature DIV\r\n\u00a0\u00a0 \u00a0 * @return Object\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.getJSignatureDOMObj = function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return this._objDOMJSignature;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * set handle to DOM object of JSignature DIV\r\n\u00a0\u00a0 \u00a0 * @param Object\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.setJSignatureDOMObj = function( obj ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMSignature = obj;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * get handle to DOM object of data item\r\n\u00a0\u00a0 \u00a0 * @return Object\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.getItemDataDOMObj = function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return this._objDOMItemData;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * set handle to DOM object of data item\r\n\u00a0\u00a0 \u00a0 * @param Object\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.setItemDataDOMObj = function( obj ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMItemData = obj;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * get handle to DOM object of format item\r\n\u00a0\u00a0 \u00a0 * @return Object\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.getItemFormatDOMObj = function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return this._objDOMItemFormat;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * set handle to DOM object of format item\r\n\u00a0\u00a0 \u00a0 * @param Object\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.setItemFormatDOMObj = function( obj ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMItemFormat = obj;\r\n\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * initialize object\r\n\u00a0\u00a0 \u00a0 * \r\n\u00a0\u00a0 \u00a0 * @param String id of jSignature DIV\r\n\u00a0\u00a0 \u00a0 * @param String id of data item INPUT\r\n\u00a0\u00a0 \u00a0 * @param String id of format item INPUT\r\n\u00a0\u00a0 \u00a0 * \r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.init = function( idJSig, idItemData, idItemFormat ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0try{\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ init jSignature\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._idJSignature = idJSig;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMSignature = x$( this._idJSignature ) ;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMSignature.jSignature();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ init data item\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._idItemData = idItemData;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMItemData = x$( this._idItemData );\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ init format item\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._idItemFormat = idItemFormat;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMItemFormat = x$( this._idItemFormat );\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return true;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}catch(e){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var errMsg = _module + \"::\" + arguments.callee.name + \"\\n\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for( p in e ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0errMsg += p + \": '\"\u00a0 + e[p] + \"'\\n\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0console.error( \"Error!\\n\\n\" + errMsg );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * reset jSignature\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.reset = function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0try{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMSignature.jSignature(\"reset\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return true;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}catch(e){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var errMsg = _module + \"::\" + arguments.callee.name + \"\\n\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for( p in e ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0errMsg += p + \": '\"\u00a0 + e[p] + \"'\\n\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0console.error( \"Error!\\n\\n\" + errMsg );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * saves the data from jSignature\r\n\u00a0\u00a0 \u00a0 * \r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0this.save = function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0try{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var datapair =\u00a0 this._objDOMSignature.jSignature( \"getData\", _format );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var format = \"data:\" + datapair[0];\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var data = datapair[1];\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ check max size!\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if( data.length &gt;\u00a0 _maxSize){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0alert( \"The size of the signature is too large. Please retry!\" );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMItemData.val( data );\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this._objDOMItemFormat.val( format )\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return true;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}catch(e){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var errMsg = _module + \"::\" + arguments.callee.name + \"\\n\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for( p in e ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0errMsg += p + \": '\"\u00a0 + e[p] + \"'\\n\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0console.error( \"Error!\\n\\n\" + errMsg );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0}\r\n}\r\n\r\n\/\/ init JS instance\r\nsigHandler = new signatureHandler();<\/code><\/pre>\n<p><strong>EDIT:<\/strong><br \/>\nUrsus created a demo database. You can <a title=\"hasselba.ch: TestjSig.zip\" href=\"http:\/\/hasselba.ch\/share\/TestjSig.zip\">find it here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In one of my current projects it is one of the goals that the members of the field staff have the possibility to sign a report directly on their iPad. After some research I found the very cool jQuery plugin &hellip; <a href=\"https:\/\/hasselba.ch\/blog\/?p=934\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89,9,42,81,74],"tags":[79,7,77,31,4,43,94,32,12,3],"class_list":["post-934","post","type-post","status-publish","format-standard","hentry","category-java","category-javascript","category-mobile","category-web","category-xpages","tag-agenten","tag-domino","tag-html","tag-java","tag-js","tag-jquery","tag-mobile","tag-tipp","tag-web","tag-xpages"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=934"}],"version-history":[{"count":16,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/934\/revisions"}],"predecessor-version":[{"id":1436,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/934\/revisions\/1436"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}