Twitter Bootstrap Question posted in

Twitter bootstrap – Object doesn't support property or method 'jSignature

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 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?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search