Search code examples
javascripthtmlsignaturepad

Signature Pad looses focus

I have this html code with javascript that uses bootstrap and Signature Pad. I am using Bootstrap's Collapse feature. When I set first panel as default the Signature Pad does not work(I am not able to sign) but when I add 3rd panel as Default where the Signature Pad is place, it works as intended. Any idea why would this happen?

Here is the code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Signature Pad demo</title>
   <link href="css/signature-pad.css" rel="stylesheet" />
    <title>Employee Onboarding Demo</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <meta name="description" content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link rel="stylesheet" href="css/signature-pad.css">
</head>
<body onselectstart="return false">

<form id="form1" >
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Enter Your Personal Details</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                <table>
                        <tr>
                            <td>First Name</td>
                            <td>

                                <input type="text" ID="txtFName" name="txtFName"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Last Name</td>
                            <td>
                                <input type="text" ID="txtLName" name="txtLName"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Middle Initial</td>
                            <td>
                                <input type="text" ID="txtMiddleI" name="txtMiddleI"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Other Name</td>
                            <td>
                                <input type="text" ID="txtOtherName" name="txtOtherName"></td>
                            <td></td>
                        </tr>
                        <tr><td colspan="3"><button ID="btnSavePersonal" OnClick="btnSavePersonal_Click">Save</button>
                        </td></tr>
                </table>
                </div>
            </div>
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Answer These Questions</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <table>
                        <tr>
                            <td>
                                <asp:CheckBox ID="CheckBox1" runat="server" /></td>
                            <td>1. A citizen of the United States</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><asp:CheckBox ID="CheckBox2" runat="server" /></td>
                            <td>2. A noncitizen national of the United States (See instructions)</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><asp:CheckBox ID="CheckBox3" runat="server" /></td>
                            <td>3. A lawful permanent resident. (Alien Registration Number/USCIS Number):</td>
                            <td>
                                <asp:TextBox ID="txtARNUSCIS" runat="server"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td><asp:CheckBox ID="CheckBox4" runat="server" /></td>
                            <td>4. An alien authorized to work until (expiration date, if applicable, mm/dd/yyyy):</td>
                            <td>
                                <asp:TextBox ID="txtARNExpDt" runat="server"></asp:TextBox></td>
                        </tr>
                        <tr><td colspan="3"><asp:Button ID="btnSaveQA" runat="server" Text="Save" OnClick="btnSaveQA_Click" /></td></tr>
                </table>
            </div>
            </div>
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Sign Here</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                  <div id="signature-pad" class="m-signature-pad">
                        <div class="m-signature-pad--body">
                          <canvas></canvas>
                        </div>
                        <div class="m-signature-pad--footer">
                          <div class="description">Sign above</div>
                          <button type="button" class="button clear" data-action="clear">Clear</button>
                          <button type="button" class="button save" data-action="save">Save</button>
                          <input type="text" name="abc" id="abc">
                        </div>
                  </div>
                </div>
            </div>
    </div>
</div>  
</form>
  <script src="js/signature_pad.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

Solution

  • I ended up putting my Signature Pad script in iFrame and then handled the responses back to the main page using a hidden input. Worked like a charm.