You are viewing limited content. For full access, please sign in.

Question

Question

Signature not behaving correctly

Forms
Updated August 18, 2014
asked on August 15, 2014

I added the signature code to a form that I am also using pagination on. When the form loads the the signature space is small and unusable, however if i refresh the same instance of the form the signature space is correct and usable. I am sure it is something in the code I have, but am unsure as to where.

 

Any help would be greatly appreciated. smiley

$(document).ready(function () {
$('.sections, .Submit').hide();
  $('.section1').show();
  $('.navitem').on('touchstart click', function () {
		$('.sections').hide();
        $('.navbar').find('.navitem').removeClass('selected');
        if ($(this).hasClass('deposit')) {
            $('.section1').show();
            $('.navbar').find('.deposit').addClass('selected');
        }
        else if ($(this).hasClass('personal')) {
            $('.section2').show();
            $('.navbar').find('.personal').addClass('selected');
        }
          else if ($(this).hasClass('employment')) {
            $('.section3').show();
                    $('.navbar').find('.employment').addClass('selected');
        }
    else if ($(this).hasClass('retirement')) {
            $('.section4').show();
                    $('.navbar').find('.retirement').addClass('selected');
    }
    else if ($(this).hasClass ('fica')) {
      $('.section5').show();
      $('.navbar').find('.fica').addClass('selected');
    }
    else if ($(this).hasClass ('sign')) {
      $('.section6').show();
      $('.navbar').find('.sign').addClass('selected');
    }

    })
    $('.navitem.info').trigger('click');
});

   function htmlEncode(value) {
    return $('<div/>').text(value).html();
}

function htmlDecode(value) {
    return $('<div/>').html(value).text();
}

$.getScript('http://trtc843/forms/js/jSignature.min.js', function () {
    $('.signature').jSignature();
});

/**When the page loads, check if the sig data (hidden) field has a value.
   If it has a value, decode it and put it in the image, and remove the
   signature pad and its buttons.**/
$(document).ready(function(){
$('.sigCollection').each(function () {
    var sigvalue = $(this).find('.sigdata textarea').text();
    var sigrovalue = $(this).find('.sigdata .ro').text();
    if (sigvalue != '' || sigrovalue != '') {
        var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
        var $img = $('<img class=imported></img>');
        $img.attr("src", decoded).appendTo($(this).find('.sigimage'));
        $(this).find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
        $(this).find('.sigwarning').hide();
    }
});

$('.donebutton').click(function () {
   var section = $(this).closest('.sigCollection');
    var sigdata = section.find('.signature').jSignature('getData');
    section.find('.sigdata textarea').val(htmlEncode(sigdata));
    var $img = $('<img class=imported></img>');
    $img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
    section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
    section.find('.sigwarning').hide();
 $('.Submit').show();
 
});

$('.clearbutton').click(function () {
    var section = $(this).closest('.sigCollection');
    section.find('.signature').jSignature('clear');
});
});

 

 

0 0

Answer

SELECTED ANSWER
replied on August 18, 2014

The signature was not loading because the $(document).ready function was closed after the pagination code. Putting the signature code inside the $(document).ready function resolves this issue.

0 0

Replies

replied on August 15, 2014 • Show version history

See my answer to this post for more information. Basically, the signature is hidden and disabled when the form loads. The code needs to be modified so the .jSignature() function is called on the signature field when it is not hidden.

0 0
replied on August 15, 2014 • Show version history

When I add the suggestion from that answer i lose the pagination aspect

$(document).ready(function () {
$('.sections, .Submit').hide();
  $('.section1').show();
  $('.navitem').on('touchstart click', function () {
		$('.sections').hide();
        $('.navbar').find('.navitem').removeClass('selected');
        if ($(this).hasClass('deposit')) {
            $('.section1').show();
            $('.navbar').find('.deposit').addClass('selected');
        }
        else if ($(this).hasClass('personal')) {
            $('.section2').show();
            $('.navbar').find('.personal').addClass('selected');
        }
          else if ($(this).hasClass('employment')) {
            $('.section3').show();
                    $('.navbar').find('.employment').addClass('selected');
        }
    else if ($(this).hasClass('retirement')) {
            $('.section4').show();
                    $('.navbar').find('.retirement').addClass('selected');
    }
    else if ($(this).hasClass ('fica')) {
      $('.section5').show();
      $('.navbar').find('.fica').addClass('selected');
    }
    else if ($(this).hasClass ('sign')) {
      $('.section6').show();
      $('.navbar').find('.sign').addClass('selected');
    }

    })
    $('.navitem.info').trigger('click');
});

  function htmlEncode(value) {
    return $('<div/>').text(value).html();
}

function htmlDecode(value) {
    return $('<div/>').html(value).text();
} 
$('sign').click(function(){
$.getScript('http://trtc843/forms/js/jSignature.min.js', function () {
    $('.signature').jSignature();
});

/**When the page loads, check if the sig data (hidden) field has a value.
   If it has a value, decode it and put it in the image, and remove the
   signature pad and its buttons.**/
$(document).ready(function(){
$('.sigCollection').each(function () {
    var sigvalue = $(this).find('.sigdata textarea').text();
    var sigrovalue = $(this).find('.sigdata .ro').text();
    if (sigvalue != '' || sigrovalue != '') {
        var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
        var $img = $('<img class=imported></img>');
        $img.attr("src", decoded).appendTo($(this).find('.sigimage'));
        $(this).find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
        $(this).find('.sigwarning').hide();
    }
});

$('.donebutton').click(function () {
   var section = $(this).closest('.sigCollection');
    var sigdata = section.find('.signature').jSignature('getData');
    section.find('.sigdata textarea').val(htmlEncode(sigdata));
    var $img = $('<img class=imported></img>');
    $img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
    section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
    section.find('.sigwarning').hide();
 $('.Submit').show();
 
});

$('.clearbutton').click(function () {
    var section = $(this).closest('.sigCollection');
    section.find('.signature').jSignature('clear');
});
});
0 0
View 6 previous replies
replied on August 15, 2014 • Show version history

You had a syntax error and, on line 43, you probably meant .sign instead of sign.

 

$(document).ready(function () {
    $('.sections, .Submit').hide();
    $('.section1').show();
    $('.navitem').on('touchstart click', function () {
        $('.sections').hide();
        $('.navbar').find('.navitem').removeClass('selected');
        if ($(this).hasClass('deposit')) {
            $('.section1').show();
            $('.navbar').find('.deposit').addClass('selected');
        }
        else if ($(this).hasClass('personal')) {
            $('.section2').show();
            $('.navbar').find('.personal').addClass('selected');
        }
        else if ($(this).hasClass('employment')) {
            $('.section3').show();
            $('.navbar').find('.employment').addClass('selected');
        }
        else if ($(this).hasClass('retirement')) {
            $('.section4').show();
            $('.navbar').find('.retirement').addClass('selected');
        }
        else if ($(this).hasClass('fica')) {
            $('.section5').show();
            $('.navbar').find('.fica').addClass('selected');
        }
        else if ($(this).hasClass('sign')) {
            $('.section6').show();
            $('.navbar').find('.sign').addClass('selected');
        }

    })
    $('.navitem.info').trigger('click');
});

function htmlEncode(value) {
    return $('<div/>').text(value).html();
}

function htmlDecode(value) {
    return $('<div/>').html(value).text();
}
$('.sign').click(function () {
    $.getScript('http://trtc843/forms/js/jSignature.min.js', function () {
        $('.signature').jSignature();
    });

    /**When the page loads, check if the sig data (hidden) field has a value.
       If it has a value, decode it and put it in the image, and remove the
       signature pad and its buttons.**/

    $('.sigCollection').each(function () {
        var sigvalue = $(this).find('.sigdata textarea').text();
        var sigrovalue = $(this).find('.sigdata .ro').text();
        if (sigvalue != '' || sigrovalue != '') {
            var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
            var $img = $('<img class=imported></img>');
            $img.attr("src", decoded).appendTo($(this).find('.sigimage'));
            $(this).find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
            $(this).find('.sigwarning').hide();
        }
    });

    $('.donebutton').click(function () {
        var section = $(this).closest('.sigCollection');
        var sigdata = section.find('.signature').jSignature('getData');
        section.find('.sigdata textarea').val(htmlEncode(sigdata));
        var $img = $('<img class=imported></img>');
        $img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
        section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
        section.find('.sigwarning').hide();
        $('.Submit').show();

    });

    $('.clearbutton').click(function () {
        var section = $(this).closest('.sigCollection');
        section.find('.signature').jSignature('clear');
    });
});

 

0 0
replied on August 15, 2014

Thank you Eric for helping with this, but now the signature area (sigGroup html under Sig Data field) doesn't appear at all.

 

I do not have much experience with coding and am not able to see what must be obvious to you.

0 0
replied on August 15, 2014

Try this:

 

$(document).ready(function () {
    $('.sections, .Submit').hide();
    $('.section1').show();
    $('.navitem').on('touchstart click', function () {
        $('.sections').hide();
        $('.navbar').find('.navitem').removeClass('selected');
        if ($(this).hasClass('deposit')) {
            $('.section1').show();
            $('.navbar').find('.deposit').addClass('selected');
        }
        else if ($(this).hasClass('personal')) {
            $('.section2').show();
            $('.navbar').find('.personal').addClass('selected');
        }
        else if ($(this).hasClass('employment')) {
            $('.section3').show();
            $('.navbar').find('.employment').addClass('selected');
        }
        else if ($(this).hasClass('retirement')) {
            $('.section4').show();
            $('.navbar').find('.retirement').addClass('selected');
        }
        else if ($(this).hasClass('fica')) {
            $('.section5').show();
            $('.navbar').find('.fica').addClass('selected');
        }
        else if ($(this).hasClass('sign')) {
            $('.section6').show();
            $('.navbar').find('.sign').addClass('selected');
        }

    })
    $('.navitem.info').trigger('click');
});

function htmlEncode(value) {
    return $('<div/>').text(value).html();
}

function htmlDecode(value) {
    return $('<div/>').html(value).text();
}
$('.sign').click(function() {
    $.getScript('http://trtc843/forms/js/jSignature.min.js', function () {
        $('.signature').find('canvas').remove();  
        $('.signature').jSignature();
    });
});

/**When the page loads, check if the sig data (hidden) field has a value.
   If it has a value, decode it and put it in the image, and remove the
   signature pad and its buttons.**/

$('.sigCollection').each(function () {
    var sigvalue = $(this).find('.sigdata textarea').text();
    var sigrovalue = $(this).find('.sigdata .ro').text();
    if (sigvalue != '' || sigrovalue != '') {
        var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
        var $img = $('<img class=imported></img>');
        $img.attr("src", decoded).appendTo($(this).find('.sigimage'));
        $(this).find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
        $(this).find('.sigwarning').hide();
    }
});
 
$('.donebutton').click(function () {
    var section = $(this).closest('.sigCollection');
    var sigdata = section.find('.signature').jSignature('getData');
    section.find('.sigdata textarea').val(htmlEncode(sigdata));
    var $img = $('<img class=imported></img>');
    $img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
    section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
    section.find('.sigwarning').hide();
    $('.Submit').show();

});
 
$('.clearbutton').click(function () {
    var section = $(this).closest('.sigCollection');
    section.find('.signature').jSignature('clear');
});

 

0 0
replied on August 15, 2014 • Show version history

Same thing. It is not showing that field at all. I switched back to the original code I posted and the field is back, however I have the same original issue. (Refreshing the instance works every time.) Below is what I have in the CSS area. I have filed rules as well, but not on the signature page.

#power, .sigdata {display: none;}
#q22, #q23, #q24 {display: inline-block;}
#q26, #q27 {display: inline-block;}
#q40, #q41, #q42 {display: inline-block;}
#q43, #q44, #q45 {display: inline-block;}
#q52, #q54 {display: inline-block;}
.navbar {
  text-align:center;
  display:center;
}

.navbar div {
  padding-top: 12px;
  cursor: pointer;
  width: 130px;
  height: 50px;
  border-radius: 6px;
  background-color: #e5e5e5;
  text-align: center;
  margin: auto;
  border: 2px white solid;
  display:inline-block;
}

.navbar div:hover {
  background-color: #C0C0C0;
}
.navbar .selected{
  background-color: #C0C0C0;
}

.cf-form {padding: 0px 10px 40px;}
#cf-formtitle {margin-bottom:0px;}
li[attrtype="custom"].form-focused {background-color:white;}

 

0 0
replied on August 15, 2014 • Show version history

I didn't include your pagination code in this because these examples are getting long. Basically, replace your signature code (not all your code, just the part for signatures) with this:

 

 function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }

    function htmlDecode(value) {
        return $('<div/>').html(value).text();
    }
    $('.sign').click(function () {
        $.getScript('https://dl.dropboxusercontent.com/u/14829216/jSignature.min.js', function () {
            $('.signature').find('canvas').remove();
            $('.signature').jSignature();
        });
    });

    /**When the page loads, check if the sig data (hidden) field has a value.
       If it has a value, decode it and put it in the image, and remove the
       signature pad and its buttons.**/

    $('.sigCollection').each(function () {
        var sigvalue = $(this).find('.sigdata textarea').text();
        var sigrovalue = $(this).find('.sigdata .ro').text();
        if (sigvalue != '' || sigrovalue != '') {
            var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
            var $img = $('<img class=imported></img>');
            $img.attr("src", decoded).appendTo($(this).find('.sigimage'));
            $(this).find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
            $(this).find('.sigwarning').hide();
        }
    });

    $('.donebutton').click(function () {
        var section = $(this).closest('.sigCollection');
        var sigdata = section.find('.signature').jSignature('getData');
        section.find('.sigdata textarea').val(htmlEncode(sigdata));
        var $img = $('<img class=imported></img>');
        $img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
        section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
        section.find('.sigwarning').hide();
        checkSignatures();
    });

    $('.clearbutton').click(function () {
        var section = $(this).closest('.sigCollection');
        section.find('.signature').jSignature('clear');
    });

    function checkSignatures() {
        $('.sigGroup').length <= 0 ? $('.Submit').removeAttr('disabled') : $('.Submit').attr('disabled', true);
    }

If that works, update the .getScript() URL to your local copy.

0 0
replied on August 18, 2014

Same issue(does not show signature area at all). I am going to try something different.

 

I appreciate all your help, I wouldn't be as far as I am without the code you provided in the BPM251 course.

0 0
SELECTED ANSWER
replied on August 18, 2014

The signature was not loading because the $(document).ready function was closed after the pagination code. Putting the signature code inside the $(document).ready function resolves this issue.

0 0
replied on August 18, 2014

Thanks for the help. Works perfectly.smiley

0 0
replied on August 18, 2014

You're welcome!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...