Hinzufügen von jSignature zum Bootstrap-Formular

Question

Ich versuche, das jSignature-Widget zu einem Standard-Bootstrap-Formular hinzuzufügen, aber bis jetzt wird nichts auf dem Formular angezeigt (andere Formularfelder zeigen Ordnung).

Hier ist meine Form:

<form id="saveEvent" action="index.php" method="post"> 
 
    <div class="form-group"> 
 
    <label for="yourName">Your Name</label> 
 
    <input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label for="yourSignature">Your Signature</label> 
 
    <div id="signature"></div> 
 
    </div> 
 
    <hr /> 
 
    <button type="reset" class="btn btn-default">Reset</button> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
</form>

Ich einschließlich aller Dateien am unteren Rand der Seite in der richtigen Reihenfolge:

<script src="assets/js/jquery.min.js"></script> 
 
<script src="assets/js/jSignature.min.js"></script> 
 

 
<!--[if lt IE 9]> 
 
\t <script type="text/javascript" src="assets/js/flashcanvas.js"></script> 
 
\t <![endif]--> 
 

 
<script> 
 
    $(document).ready(function() { 
 
    $("#signature").jSignature() 
 
    }) 
 
</script>

, aber der Signaturbereich wird nicht angezeigt. Hier ist ein Screenshot von dem, was ich sehe, wenn das hilft:

Ich bin keine Serverfehler oder Konsole Fehler immer so ganz im Moment ratlos - dies ist mein erster Sprung auf jSignature verwenden.

Answer 1

Hallo jetzt dieser Code funktioniert überprüfen Sie bitte Ihren Code richtig korrekt ist

Ref this code

$('#signature').signature();

#signature{ 
 
width:300px; 
 
    height:200px; 
 
    border:solid 1px red; 
 
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet"> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 

 
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet"> 
 
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script> 
 

 

 

 
<form id="saveEvent" action="index.php" method="post"> 
 
    <div class="form-group"> 
 
    <label for="yourName">Your Name</label> 
 
    <input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label for="yourSignature">Your Signature</label> 
 
    <div id="signature"></div> 
 
    </div> 
 
    <hr /> 
 
    <button type="reset" class="btn btn-default">Reset</button> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
</form>

Answer 2

Bei einer weiteren Untersuchung mit den Entwickler-Tools ich, dass die Höhe bemerkt der Signatur div war 0px. Ich beendete das Hinzufügen dieser an das Skript bis:

$(document).ready(function() { 
 
    $("#signature").jSignature({ 
 
    height: 200 
 
    }); 
 
    $("#signature").resize(); 
 
})

und dies zumindest jetzt die Unterschriftserfassung zeigt.