Search code examples
javascriptjqueryhtmljquery-uijquery-ui-touch-punch

Why is the Touch-Punch plugin not functioning in my website?


I have implemented the touch-punch plugin to my site and I am still unable to utilize the touch feature for my signature feature. When I use it on Edge, the touch feature works for maybe a second before stopping. Also, for regular internet explorer it works great, but Chrome and Firefox are not functioning with the touch-punch at all.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/south-street/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<link href="<?php echo plugins_url(); ?>/booking/css/jquery.signature.css" rel="stylesheet">
<script src="<?php echo plugins_url(); ?>/booking/js/jquery.signature.js"></script>
<script src='https://javascriptbase64.googlecode.com/files/base64.js' type='text/javascript'></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Signature Code:

 <script>
   $(function() {
        $('#sig'+"<?php echo $row->bookingid; ?>").signature({
            guideline: true, 
            guidelineOffset: 25, 
            guidelineIndent: 20, 
            guidelineColor: '#ff0000',
                change: function(event, ui) { 
                    var jsonval = $(this).signature('toJSON');
                    $("#signcanvas"+"<?php echo $row->bookingid; ?>").val(jsonval);
    }
            });  
   });
  </script>

Solution

  • So my path to the touch-punch plugin, was incorrect. After finding the correct path to the jquery.ui.touch-punch.min.js file in my CPanel, I changed the path in my code and was able to utilize the touch feature. Also make sure that the type of script is defined.

    For example: adding the type=text/javascript, was also necessary for the plugin to function.