Open mwilliams00 opened 4 years ago
@mwilliams00 I'm not sure how this relates to Signature Pad. Can you give a little more detail on the problem you're trying to solve?
When the code is ran below and creates the signature box, there is a postback at the time I use a custom control to lookup data on the server. The signature box disappears. How can I make it where this code isn't effected at the time the Post Back happens.
$(document).ready(function() {
// Find the guts of the InfoPath form in the page
var infoPathContainer = $("div[id$='XmlFormView']");
// if there's no InfoPath form, then we have nothing to do here (escape early)
if (infoPathContainer.length !== 0) {
setupSignatures(infoPathContainer);
}
});
// There's an InfoPath form in the page, so look for signature fields and set them up
function setupSignatures(infoPathContainer) {
// The Signature "signature" in the form. This makes it easy to select the proper form elements
var signatureSignature = "==Signature==";
// The signature field should be inside a section with its tooltip=signatureSignature
var signatureContainer = infoPathContainer.find("fieldset[title='" + signatureSignature + "']");
// The Signature field is the lone input element in the section
var signatureBox = signatureContainer.find("input");
// We may have multiple signature fields in the form
signatureBox.each(function() {
var thisSignatureBox = $(this);
// We need a reference to the fieldset which represents the section several times
var thisSignatureFieldset = thisSignatureBox.closest("fieldset");
// Clean up the display by hiding the field we're using to store the JSON
thisSignatureBox.hide();
// The signature data is the value of the signatureBox
var signatureData = thisSignatureBox.val();
// If there's no signature yet...
if (signatureData === "") {
// Add the appropriate markup to the page
thisSignatureBox.before(buildSignatureBox());
// Bind to the click event for the 'Ready to Sign' button
thisSignatureFieldset.find(".signature-ready").click(function() {
$(this).toggle();
$(this).next("div").toggle();
});
// Activate the signature pad in drawOnly mode
var signatureArea = thisSignatureFieldset.find(".signature-box").signaturePad({
drawOnly: true,
lineTop: 125,
output: thisSignatureBox,
onBeforeValidate: function(context, settings) {
thisSignatureBox.focus(); // Needed to fire the change events bound to the field
thisSignatureBox.blur(); // Needed to fire the change events bound to the field
thisSignatureBox.hide(); // In case it becomes visible again
}
});
// When the user clicks the button below the signature pad, validate
thisSignatureFieldset.find(".signature-done").click(function() {
thisSignatureFieldset.find("p.error").remove();
signatureArea.validateForm();
});
// If we already have signature data, just show the existing signature
} else {
// Add the appropriate markup to the page
thisSignatureBox.before(buildSignatureDisplay());
// Activate the signature pad in displayOnly mode
thisSignatureFieldset.find(".sigPad").signaturePad({
displayOnly: true
}).regenerate(signatureData);
}
});
}
// Function to emit the markup for the signature pad in signing mode
function buildSignatureBox() {
var signatureBox = "<div class='signature-box'>" +
"<input class='signature-ready' type='button' value='Ready to sign'/>" +
"<div style='display:none;'>" +
"<ul class='sigNav'>" +
"<li class='drawIt'><a href='#draw-it'>Sign Here</a></li>" +
"<li class='clearButton'><a href='#clear'>Clear</a></li>" +
"</ul>" +
"<div class='sig sigWrapper'>" +
"<canvas class='pad' width='700' height='150'></canvas>" +
"<input type='hidden' name='output' class='output'>" +
"</div>" +
"<input class='signature-done' type='button' value='Capture signature'/>" +
"</div>" +
"</div>";
return signatureBox;
}
// Function to emit the markup for the signature pad in display mode
function buildSignatureDisplay() {
var signatureDisplay = "<div class='sigPad signed'>" +
"<div class='sigWrapper'>" +
"<canvas width='700' height='150' class='pad'></canvas>" +
"</div>" +
"</div>";
return signatureDisplay;
}
@mwilliams00 it's hard to tell without a more complete repro, but you do have several calls to hide()
and toggle()
in your code that look like they could be the culprit. If you can push up a repo that has an easy to run reproduction, I can take a closer look.
I have created a Custom List Form in InfoPath and added a JavaScript Control to Sign the form (Link below). However, when I use the people picker or populate a field based on another field the Custom control fails to render. I've read on Post back or Ajax update the JavaScript function isn't called. How can I stop the Custom Control from being effected on Post back or Ajax update?