1

I have included jquery.1.9.1 in my Layout page .

I am using kendo with twitter bootstrap so I followed script reference order like below .

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

   <link href="~/Content/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/styles/kendo.commonbootstrap.min.css"rel="stylesheet"/>

@*<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />*@
<link href="~/assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<link href="~/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/assets/css/animate.min.css" rel="stylesheet" />
<link href="~/assets/css/style.min.css" rel="stylesheet" />
<link href="~/assets/css/style-responsive.min.css" rel="stylesheet" />
<link href="~/assets/css/theme/default.css" rel="stylesheet" id="theme" />

<link href="~/assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" />
<link href="~/assets/plugins/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
<link href="~/assets/plugins/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
<link href="~/assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet" />


<link href="~/assets/plugins/DataTables/css/data-table.css" rel="stylesheet" />
<script src="~/assets/plugins/pace/pace.min.js"></script>

and my body part in layout as below 

<body>
 @Scripts.Render("~/bundles/jquery")
@RenderBody()

@*@Scripts.Render("~/bundles/jquery")*@
@RenderSection("scripts", required: false)

<script src="~/assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="~/assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="~/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="~/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<script src="~/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="~/assets/plugins/jquery-cookie/jquery.cookie.js"></script>

<script src="~/assets/plugins/gritter/js/jquery.gritter.js"></script>
<script src="~/assets/plugins/flot/jquery.flot.min.js"></script>
<script src="~/assets/plugins/flot/jquery.flot.time.min.js"></script>
<script src="~/assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="~/assets/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="~/assets/plugins/sparkline/jquery.sparkline.js"></script>
<script src="~/assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="~/assets/plugins/jquery-jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="~/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="~/assets/js/dashboard.min.js"></script>
<script src="~/assets/js/apps.min.js"></script>

<script src="~/assets/plugins/DataTables/js/jquery.dataTables.js"></script>
<script src="~/assets/js/table-manage-default.demo.min.js"></script>

<link href="~/Content/styles/kendo.rtl.min.css" rel="stylesheet" />
<script src="~/Scripts/js/kendo.all.min.js"></script>
<script src="~/Scripts/js/kendo.web.min.js"></script>
<script src="~/Scripts/js/kendo.aspnetmvc.min.js"></script>
<script src="~/Scripts/js/kendo.timezones.min.js"></script>
<script src="~/Scripts/js/console.min.js"></script>
<script src="~/Scripts/js/prettify.min.js"></script>

The whole application is working fine .Now am trying to user Jquery Signature

 <script>
    $(document).ready(function () {
        $("#signature").jSignature();

    })
</script>

Here am getting Object doesn't support property or method 'jSignature'

If i keept below Jquery reference in head part Signature is working fine but in IE browser shows JavaScript runtime error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher when i click on continue signature is working fine but my application is not working .

 <script src="~/assets/plugins/jquery/jquery-1.9.1.min.js"></script>

Even I have included 

 <script src="~/JSignPlugins/jSignature.min.js"></script>
<script type="text/javascript" src="~/JSignPlugins/flashcanvas.js"></script>
Karthik Mushyam
  • 11
  • 3

2 Answers2

0

As taken from the jSignature website (http://willowsystems.github.io/jSignature/#/about/), you should have the following:

<!-- Ensure that the jQuery.js file is loaded BEFORE this -->
<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->
<script src="libs/jSignature.min.js"></script>
<div id="signature"></div>
<script>
    $(document).ready(function() {
        $("#signature").jSignature()
    })
</script>

The jSignature library consists of 3 files:

  • jSignature.min.js
  • flashcanvas.js
  • flashcanvas.swf

These files should be in the same folder in your project. You do not need to reference the .swf file as the flashcanvas.js will reference it for you.

Also, I suggest trying in Google Chrome using the Developer Inspect view (Right Click > Inspect) and check the console log for any errors.

Same with Internet Explorer.

I suggest editing your question to include which versions of browsers have you tried this with? I.e. Google Chrome, IE8,9,10,11?

Shaun Sharples
  • 196
  • 6
-1

Try to use "noconflict" JS file included with jSignature:

<script src="~/JSignPlugins/jSignature.min.noconflict.js"></script>

instead of 

<script src="~/JSignPlugins/jSignature.min.js"></script>
Olena Vikariy
  • 217
  • 1
  • 3
  • 9