Canvas signature touch creates issue in phonegap

Question

I found a few posts related to "phonegap canvas signature" but they did not help. I have some drop down boxes, text boxes, and one signature field. I want to insert these fields in sqlite Database.

My database table creation looks like this:

tx.executeSql("CREATE TABLE IF NOT EXISTS parts(id INTEGER PRIMARY KEY AUTOINCREMENT,nr,productId,description,toolsVerified)"); tx.executeSql("CREATE TABLE IF NOT EXISTS costs(id INTEGER PRIMARY KEY AUTOINCREMENT,nr,date,starttime,endtime,reason,cost)"); tx.executeSql("CREATE TABLE IF NOT EXISTS sign(orderNr unique ,rapport,sign)"); 

Read the field values like normal for text and dropdown for canvas signature field is like

kundusSign = $("#mKundusskirt")[0]; kundensUnderSkrift = kundusSign.toDataURL(); 

Here is the code for insert data:

db     .transaction(function(tx) {         // for parts table         tx                 .executeSql(                         "insert into parts(nr,productid,description,toolsVerified) values(?,?,?,?)",                         [ nr, productId, desc, tool ]);         // for cost table         tx                 .executeSql(                         "insert into costs(nr,date,starttime,endtime,reason,cost) values (?,?,?,?,?,?)",                         [ nr, date, startTime, endTime, reason, cost ]);          // for sign table         signQuery = 'UNION SELECT ' + nr + ", '" + rapport + "','"                 + kundensUnderSkrift + "'";         tx                 .executeSql('insert or replace into "sign" SELECT "orderNr","rapport","sign"'                         + signQuery);     }); 

I included sign plugin for signatures. Now my problem is that when I type in the signature field, the database fields are not inserted. Also when I try to remove the sign insert query and put sign means the other two table (cost and parts) values are also not inserted. If I didn't touch the sign fields, all values are inserted successfully for image the inserts the toDataurl() format.

I only got this error in stack trace:

sqlite (23) not authorised.

Please give some solution to this.

EDIT: I also tried this:

tx.executeSql("insert into sign(orderNr,sign,rapport)values(?,?,?)",[nr,rapport,kundensUnderSkrift]); 

Answer 1

Well, it can be from many places.

1st of all are you testing it on Android (2.3 or lower)? If so than the problem is most probably that .toDataUrl() is not supported by Android default browser which means it will not work in PhoneGap either.

So first think I suggest you to do is to double check that you really have a string in kundensUnderSkrift.

2nd sometimes WebSql can be tricky I will so to be on the safe side I will use this to create the table:

tx.executeSql("CREATE TABLE IF NOT EXISTS sign(orderNr unique ,rapport,sign STRING)"); 

WebSql updates do not seem to work at all, so make sure you clear data or uninstall up, than give it another go.

3rd Your statement order look wrong:

tx.executeSql("insert into sign(orderNr,sign,rapport)values(?,?,?)",[nr,rapport,kundensUnderSkrift]); 

Should be:

tx.executeSql("insert into sign(orderNr,rapport,sign)values(?,?,?)",[nr,rapport,kundensUnderSkrift]); 

If after checking all 3 points it's still not working, I will suggest to try the following UGLY approach:

tx.executeSql("insert into sign(orderNr,sign,rapport) values('"+nr+"','"+ kundensUnderSkrift+"','"+rapport+"');",[],function(tx,success){alert("ALL OK");},function(tx,error){alert(error.message);}); 

You can use console.log instead of alert but on mobile's I find it a lot easier to do debug with alert. (except windows phone, where alert is not supported by default).

Let me know if this helped you.