jSignature doesn't seem to work on IE9

m-ghaoui commented 12 years ago

Which I find quite strange. You would expect IE9 to have support for the canvas element.

Is there a workaround for this?

brinley commented 12 years ago

I believe that canvas on IE9 works with HTML5 doctype declaration, however I've not tested it with jSignature to see if it works. There is a fork of jSignature https://github.com/willowsystems/jSignature which may work better.

m-ghaoui commented 12 years ago

Hmm. I've noticed that the fork uses flashcanvas, which might help. I'll give it a try!

dvdotsenko commented 12 years ago

The Willow Systems version falls back to flashcanvas only on canvas-less IE6,7 (Flash canvas is written with IE in mind only, so it should not work well on other Canvas-less browsers).

IE 9 is tested during development of Willow System's version and it should work with just Canvas.

The Willow System's version is very close to "production" quality. The internals are pretty much settled on, but the API is in a bit of a flux. Once it becomes properly settled, documented, (up to a month) it will be pitched to @brinley for folding into mainline (this) repo. Until then, dont be afraid to as me a lot of questions.

m-ghaoui commented 12 years ago

@brinley @dvdotsenko I've replaced the jSignature code with the Willow Systems fork and with a few minor adjustments to the HTML it works perfectly! Thank you both.

brinley commented 12 years ago

@Yuioup was there any other tweaks made to the html other than html5 doc type?

dvdotsenko commented 12 years ago

@brinley

Because jSignature under Willow Systems does feature-detection for Canvas, Quirks mode or IE9 rendering page in IE8, IE7 modes is somewhat irrelevant, as appropriate, either Canvas or FlashCanvas version will load. Canvas-native version is much faster, so kicking IE in Standards, recent mode has a premium, but for existing "Quirks" pages or worse, cases where IE9 kicks in IE 8, 7 modes, there is always a fall-back to FlashCanvas even for IE 9, 10.

The testing we do is on IE9, and we just flip the "Standard" / "Quirks" and "IE7","IE8", "IE9" modes to see either Canvas or FlashCanvas load.

Part of the (yet nonexistent) documentation should be explanation for "dressing up" signature applet for IE and for mobile. I'd just recommend going using the template from Html5Boilerplate project pretty much verbatim, except for Meta tags contents, where the Metas provided in the index.html in Willow's jSignature is recommended over those in Html5Boilerplate. (Specifically 'width=device-height' part)

m-ghaoui commented 12 years ago

@brinley

Here is a summary of the changes I made. This used to be ASP.NET 1.1 web application, so some of the HTML you see here might be a bit archaic, but it works.

This is the original HTML at the top of the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script language="JavaScript" type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/jquery_plugins/jSignature.js"></script>

The signature plugin is embedded in an ASP.NET component (.ascx). This was the original code:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="cmpSignature.ascx.vb" Inherits="GSiteBack.cmpSignature" %>
<style type="text/css">
    .signature 
    {
        border: 1px solid black;
        background-color: White;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#signature1").jSignature({ cssclass: "signature", width: 315, height: 125 });
        $("#signature1").jSignature("importData", $("#<%= hdnData.ClientID %>").attr("value"));
    });

    function saveSignatureData() {
        $("#<%= hdnData.ClientID %>").attr("value", $("#signature1").jSignature('getData'));
    }
</script>
<div style="width:100%">
<div id="signature1" style="float:left;width:315px;"></div>
<div style="padding-left:5px;width:50px;text-align:right;float:left;">
<input type="button" class="btn" onclick="$('#signature1').jSignature('clear')" value="Wissen" />
</div>
</div>

<asp:HiddenField ID="hdnData" runat="server" />

The HTML at the top of the page was modified to:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
     Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" />
    <!-- this is for mobile (Android) Chrome -->
    <meta name="viewport" content="initial-scale=1.0, width=device-height" />
    <!--  mobile Safari, FireFox, Opera Mobile  -->
    <!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery_plugins/jSignature/flashcanvas.js"></script>
<![endif]-->
    <title></title>
    <script language="JavaScript" type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/jquery_plugins/jSignature/jSignature.js"></script>

The component code was modified to:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="cmpSignature.ascx.vb" Inherits="GSiteBack.cmpSignature" %>
<style type="text/css">
    .signature 
    {
        border: 1px solid black;
        background-color: White;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#signature1").jSignature({ cssclass: "signature", width: 315, height: 125 });
        $("#signature1").jSignature("setData", $("#<%= hdnData.ClientID %>").attr("value"), 'image');
    });

    function saveSignatureData() {
        $("#<%= hdnData.ClientID %>").attr("value", $("#signature1").jSignature('getData', 'image'));
    }
</script>
<div style="width:100%">
<div id="signature1" style="float:left;width:315px;"></div>
<div style="padding-left:5px;width:50px;text-align:right;float:left;">
<input type="button" class="btn" onclick="$('#signature1').jSignature('reset')" value="Wissen" />
</div>
</div>

<asp:HiddenField ID="hdnData" runat="server" />

That's pretty much it. I basically opened the "index.html" example code in the Willow Systems plugin and copied the first 15 lines into my web page, and changed some of the calls in the component.

dvdotsenko commented 12 years ago

@Yuioup

Willow's version of jSignature does NOT have code behind "setData" for "image" (What's the point?)

In addition to that, "getData" is exactly the part of API that was in flux. "image" export plugin changed in the last 2 days to what (i think will be its) final shape.

The documentation is updated so read up on "default" (backward-compatible with old jSignature('getData') usage) export format. Although the change to HTML is good to keep, you should be able to use the old API.

Also read the "Note about choosing the export format" at the bottom of the docs. :)

m-ghaoui commented 12 years ago

@dvdotsenko It seems to work perfectly for me ...

brinley / jSignature

jSignature doesn't seem to work on IE9 #8