How can I use Smooth Signature when there is no internet connection?

  • MasterCreationz
    Asked on April 12, 2018 at 8:24 AM

    I am using Smooth signature in my jot form.Smooth Signature working properly if there is internet connection but I am saving my form ofline on android then I am getting error "data-widgets.jotform.io’s server IP address could not be found."..

     

     

    I copy form code to localhost and run ofline.all the form working properly but if no internet then only signature not working.Online link is :- https://form.jotformeu.com/80563326291355

    Please Help !! How I can resolve this issue? I want that my signature also work if there is no internet connection.

    Jotform Thread 1442435 Screenshot
  • tina JotForm Developer
    Replied on April 12, 2018 at 10:05 AM

    Unfortunately, internet connection is required for the widgets since they are added to form as iFrame and that means they are loaded from external resources. 

    If you need to use the form offline you can create PDF forms in order to achieve this. Please note that the widget cannot be added to PDF forms because of the same reason that I have explained above:

    JotForm Fillable PDF Creator with All Points


  • MasterCreationz
    Replied on April 13, 2018 at 12:47 AM

    Actually I am working with jot forms having signatures of persions for android.

                My client want that if users are offline then they "SAVE AND EXIT" their form.And saving ofline form data to xml file for android phones.

    All the form working fine but signature canvas not loading ofline so that user unable to save the signature.As you explianed above signature coming from external resources.Ok, I got your point.

           As jot form smooth signature widget provide us all script and id of fields so that we just need to add some PHP code to send signature to android phone by using their id and name fiels.  

    For example: signature code provided by jotform that I am using is: -


     <li class="form-line always-hidden jf-required form-field-hidden" style="display:none;" data-type="control_widget" id="id_61">

            <label class="form-label form-label-left form-label-auto" id="label_61" for="input_61">

              Your Signature

              <span class="form-required">

                *

              </span>

            </label>

            <div id="cid_61" class="form-input always-hidden jf-required">

              <div style="width:100%;text-align:Left;" data-component="widget-field">

                <iframe frameborder="0" scrolling="no" allowtransparency="true" data-type="iframe" class="custom-field-frame" id="customFieldFrame_61" src="" style="border:none;width:300px;height:100px;" data-width="300" data-height="100">

                </iframe>

                <div class="widget-inputs-wrapper">

                  <input id="input_61" class="form-hidden form-widget widget-required " type="hidden" name="q61_yourSignature61" value="" />

                  <input id="widget_settings_61" class="form-hidden form-widget-settings" type="hidden" value="%5B%7B%22name%22%3A%22padWidth%22%2C%22value%22%3A%22400%22%7D%2C%7B%22name%22%3A%22padHeight%22%2C%22value%22%3A%22200%22%7D%5D" data-version="2" />

                </div>

                <script type="text/javascript">

                setTimeout(function()

    {

      var _cFieldFrame = document.getElementById("customFieldFrame_61");

      _cFieldFrame.onload = function()

      {

        widgetFrameLoaded(61, {

          "formID": 80563326291355

        })

      };

      _cFieldFrame.src = "//data-widgets.jotform.io/signature-pad/?qid=61&ref=" + encodeURIComponent(window.location.protocol + "//" + window.location.host);

      _cFieldFrame.addClassName("custom-field-frame-rendered");

    }, 0);

                </script>

              </div>

            </div>

            <script src="js/jquery.signaturepad.js"></script>

            <script>

              var $j = jQuery.noConflict();

              (function (window) {

                  var singnature = '<?php $YourSignature = $xml->FieldID61;

                                         if(isset($YourSignature)){

                                             $FullSignaturePath = $_SERVER["DOCUMENT_ROOT"] .'/ActiveJobData/'. $_GET["jn"] .'/HSRiskAssmentDrainage/images/'. $_GET["jn"] .'_signature.png';

                                            echo (isset($FullSignaturePath) ? $FullSignaturePath : '');

                                         }

                                  ?>//';

                 

                  var $canvas,

                      onResize = function (event) {

                          $canvas.attr({

                              height: 200,

                              width: 350

                          });

                      };

                  $j(document).ready(function () {

                      $canvas = $j('canvas');

                      onResize();

                      $j('#linear').signaturePad({drawOnly: true, lineTop: 200});

                      $j('#smoothed').signaturePad({drawOnly: true, lineTop: 200});

                      $j('#smoothed-variableStrokeWidth').signaturePad({

                          drawOnly: true,

                          variableStrokeWidth: true,

                          lineTop: 200

                      });

                      var canvas = document.getElementById("pad");

                      var dataURL = "";

                      $j("#signature").val("");

                      canvas.addEventListener('touchend', function () {

                          dataURL = canvas.toDataURL("image/png");

                          $j("#signature").val(dataURL);

                      }, false);

                      $j(".pad").mouseup(function () {

                          dataURL = canvas.toDataURL("image/png");

                          $j("#signature").val(dataURL);

                      });

                  });

              

              }(this));

            </script>

           <script src="js/json2.min.js"></script>

          </li>



    As this code using predefined Id,s => id_61 ,name =>q61_yourSignature61


    Now I want to know can I add my own jquery widget signature to jotform and perform save functionality as previously signature doing.

        


        You can check functionality in this form after filling 

    https://form.jotformeu.com/80563326291355 










  • MasterCreationz
    Replied on April 13, 2018 at 12:48 AM

    Please give me suggestion as soon as posible....I am waiting so that I find other elterante for ofline