Add jquery plugin to form to capture signatures

[joshblevins]

I found a jquery plug-in (signature capture (Signature Pad)) which allows you to capture signatures via a mouse or by tablet screen.

I am wondering if there is a way to easily use the java script plug in to do this by a pop up when a form is submitted but before being applied to the data base.

Info about Signature Pad
http://keith-wood.name/signature.html

 

[cheesegrits]

Which "javascript plugin"? I don't think we have a JS plugin in 3.x. It'd probably be best to customize a template, and include the JS and CSS as explained on their web site in the default.php for the template, for including all the files, and and setting up the div structure the widget needs.

Doing it by popup would probably be possible, but will complicate things, so I suggest you start simple. Just add a div at the bottom of the form, in default.php, before we insert the submit buttons, etc.

I'm guessing you'll want to submit the signature data with the form, otherwise there doesn't seem to be much point in doing it. So as far as I can tell, what you could do is create a hidden textarea element in Fabrik, and use that as the 'syncField' as documented in the Save/Restore tab on their page, to automatically save changes to the sig to.

Then I think you'd need to add a page load event to actually create the sig in your div, from the hidden sync textarea, pretty much using the their example code, but wrapping it in (I think) a fabrik.loaded event:

window.addEvent('fabrik.loaded', function () {
   [SIZE=14px][FONT=monospace][COLOR=#000000]$([/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=blue]'#yourSigDiv'[/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=#000000]).signature([/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=blue]'draw'[/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=#000000], $([/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=blue]'#yourtable___hidden_sig'[/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=#000000]).val());[/COLOR][/FONT][/SIZE]
[SIZE=14px][FONT=monospace][COLOR=#000000]});[code][/COLOR][/FONT][/SIZE]
 
[SIZE=14px][FONT=monospace][COLOR=#000000]Once you get all that working ... then we can think about how to do it in a popup.[/COLOR][/FONT][/SIZE]
 
[SIZE=14px][FONT=monospace][COLOR=#000000] -- hugh[/COLOR][/FONT][/SIZE]
[SIZE=14px][FONT=monospace][COLOR=#000000][/COLOR][/FONT][/SIZE]
 
[SIZE=14px][FONT=monospace][COLOR=#000000][/COLOR][/FONT][/SIZE]

 

[cheesegrits]

Dammit, I just lost a whole long post explaining how to go about this, by accidentally hitting the Back button. ::sigh::

There isn't a JS "plugin" in Fabrik 3.0, so you'll need to customize a template ... which is OK, as you'd need to do that anyway, for the CSS and div structure.

For now, I'd advise getting it going just in a straight div on the page, and worry about making a popup once that's working, as it'll complicate things.

So ... clone a custom template, edit default. php, include the JS and CSS as per their docs. Create the div to use for the sig, probably at the bottom of the form, just before we include the buttons.

As per their Save/Restore info, you can specify a textarea to sync the sig with. So that's how you can submit the data - create a hidden textarea element, and use that as the field to automatically sync the sig to when saved.

To create the sig, you'd then need to use their 'redraw sig' example, only instead of hanging it on a button click, put it on the fabrik.loaded event, which fires when the form is built:

window.addEvent('fabrik.loaded', function() {
  jQuery('#yourSigDiv').signature('draw', jQuery('#yourtable___hidden_sig').val());
});

NOTE - their code uses the $() shorthand, which I advise against using. Use whatever your jQuery 'noconflict' is set to.

-- hugh

 

[joshblevins]

I was thinking the form's had the ability to add js to them but doesnt seem that they do.... Maybe this was a option in a previous fabrik.

 

[joshblevins]

Ok I'm taking as stab at and am sure I have totally messed it up but this is what I have done.

Edited bootstrap template and renamed to bootstrap_signature

File default.php

<head>
<!--[if lt IE 9]><script src="flashcanvas.js"></script><![endif]-->
<script src="jquery.min.js"></script>
<script src="jquery.signaturepad.min.js"></script>
<script src="json2.min.js"></script>
<link rel="stylesheet" href="jquery.signaturepad.css">
</head>
<?php
$form = $this->form;
$model = $this->getModel();
$groupTmpl = $model->editable ? 'group' : 'group_details';
$active = ($form->error != '') ? '' : ' fabrikHide';
 
if ($this->params->get('show_page_heading', 1)) : ?>
    <div class="componentheading<?php echo $this->params->get('pageclass_sfx')?>">
        <?php echo $this->escape($this->params->get('page_heading')); ?>
    </div>
<?php
endif;
 
if ($this->params->get('show-title', 1)) :?>
<div class="page-header">
    <h1><?php echo $form->label;?></h1>
</div>
<?php
endif;
 
echo $form->intro;
 
if ($model->editable) :
echo '<form action="' . $form->action . '" class="' . $form->class . '" method="post" name="' . $form->name . '" id="' . $form->formid
                . '" enctype="' . $model->getFormEncType() . '">';
else:
    echo '<div class="fabrikForm fabrikDetails" id="' . $form->formid . '">';
endif;
echo $this->plugintop;
?>
 
<div class="fabrikMainError alert alert-error fabrikError<?php echo $active?>">
    <button class="close" data-dismiss="alert">?</button>
    <?php echo $form->error?>
</div>
 
<?php
echo $this->loadTemplate('buttons');
echo $this->loadTemplate('relateddata');
foreach ($this->groups as $group) :
    $this->group = $group;
    ?>
 
        <<?php echo $form->fieldsetTag ?> class="fabrikGroup row-fluid" id="group<?php echo $group->id;?>" style="<?php echo $group->css;?>">
 
        <?php if (trim($group->title) !== '') :
        ?>
 
            <<?php echo $form->legendTag ?> class="legend">
                <span><?php echo $group->title;?></span>
            </<?php echo $form->legendTag ?>>
 
        <?php endif;
 
        if ($group->intro !== '') : ?>
            <div class="groupintro"><?php echo $group->intro ?></div>
        <?php
        endif;
 
        // Load the group template - this can be :
        //  * default_group.php - standard group non-repeating rendered as an unordered list
        //  * default_repeatgroup.php - repeat group rendered as an unordered list
        //  * default_repeatgroup.table.php - repeat group rendered in a table.
 
        $this->elements = $group->elements;
        echo $this->loadTemplate($group->tmpl);
 
        ?>
    </<?php echo $form->fieldsetTag ?>>
<?php
endforeach;
if ($model->editable) :
    echo $this->hiddenFields;
endif;
 
echo $this->pluginbottom;
echo $this->loadTemplate('signature');
echo $this->loadTemplate('actions');
echo $form->endTag;
echo $form->outro;
echo $this->pluginend;
echo FabrikHelperHTML::keepalive();

Created a new file named default_signature.php

<?php
$form = $this->form;
 
?>
 
<div class =signature>
 
</div>

Now my understanding is I need to add a hidden field in which the data will be stored to.

Plus ad a js load event to the element with this

window.addEvent('fabrik.loaded', function () {
  [SIZE=14px][FONT=monospace][COLOR=#000000]$([/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=blue]'#yourSigDiv'[/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=#000000]).signature([/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=blue]'draw'[/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=#000000], $([/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=blue]'#yourtable___hidden_sig'[/COLOR][/FONT][/SIZE][SIZE=14px][FONT=monospace][COLOR=#000000]).val());[/COLOR][/FONT][/SIZE]
[SIZE=14px][FONT=monospace][COLOR=#000000]});[code][/COLOR][/FONT][/SIZE]
 
[SIZE=14px][FONT=monospace][COLOR=#000000]Once you get all that working ... then we can think about how to do it in a popup.[/COLOR][/FONT][/SIZE]
 
[SIZE=14px][FONT=monospace][COLOR=#000000] -- hugh[/COLOR][/FONT][/SIZE]
[SIZE=14px][FONT=monospace][COLOR=#000000][/COLOR][/FONT][/SIZE]
 
[SIZE=14px][FONT=monospace][COLOR=#000000][/COLOR][/FONT][/SIZE]

Now I am a little confused as to where this script below is to go...

window.addEvent('fabrik.loaded', function() {
jQuery('#yourSigDiv').signature('draw', jQuery('#yourtable___hidden_sig').val());
});

 

[joshblevins]

An after thought....... Would it be easier to create a form plugin to complete this task or continue the way we are heading..... FYI I have yet to really understand the plugins

 

[rob]

would make most sense to do it as an element plugin I think. There's a somewhat old video on the site going through how i made the slider element which might be of use to you

 

[joshblevins]

I will take a stab at it..... but last time I tried the vids I was having trouble with them loading

 

[joshblevins]

I am still unable to access the moo tools plugin demo..... It tries to load but never does.

 

[cheesegrits]

Yes, you can add JS to a form, by creating a ./component/com_fabrik/js/form_X.js (where X is your numeric form ID), but as you need to customize a template to put in the div to use for the signature, I figured it'd be just as easy to toss the JS in the template. Up to you.

This is about as far as I can go on Standard support. I can't debug your code just looking at it in isolation. If you want assistance getting it going, it'd have to be "hands on", with an hourly rate.

-- hugh