I'm trying to use jSignature in my website, but it keeps showing me this error:
Uncaught TypeError: $(...).jSignature is not a function
My code is:
<div id="signature"></div>
$("#signature").jSignature();
I have Jquery 1.11.1:
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
The Jquery is called before the JS of the function.
I have also tried to call Jquery Mobile, calls like $('#signature').jSignature({'UndoButton':false,color:"#000000",lineWidth:5});, etc but it never works.
Can anyone help ?
Well, i fixed the problem.
The problem was: I had the Jquery 1.12.4 in my plugins file. It would work normal in any page, but with the jSignature it made the JS throw an error.
I removed the Jquery from the Plugins ( but keeped the CDN one ) and now it works fine.
I already found many questions about this but never an answer.
Hope this helps anyone out there.
Many Thanks
i use jQuery 3.4, had the same issue. Im not quite sure where the problem came from but it was the phantom.
First i added all recommended libs to my project and accessed the element as used to:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
...
$(`#id`).jSignature();
I received the same jSignature is not a function
Afterwards i assumed the problem might be in jQuery version compatability, so added few lines:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
var jq_1_12 = $.noConflict(true)
</script>
...
jq_1_12(`#id`).jSignature();
it was keeping throw the same error jSignature is not a function.
Finally
I removed the last changes and jquery 1.12 import. The problem solved it-self, have no idea what have happened. But the plugin works now without any explicable reason
Related
I'm working on something in Ruby (2.7.3) on Rails (6.1.3).
I got a task to setup jQuery Datatable. No problem there:
<script>
$(document).ready( function () {
$('#stakingTable').DataTable();
} );
</script>
I have my jQuery imports at the top of the html.erb file as such:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
In this path, app/javascript/packs/application.js, I have the following imports:
import Rails from "#rails/ujs"
import Turbolinks from "turbolinks"
Rails.start()
Turbolinks.start()
Now, when given this task to implement DataTable, I noticed that I need to refresh my page, once, before it loads the DataTable. I checked my console, before reload, and got the following error:
Uncaught ReferenceError: $ is not defined
at <anonymous>:3:1
at o.assignNewBody (turbolinks.js:604:1)
at o.replaceBody (turbolinks.js:542:1)
at turbolinks.js:535:1
at o.e.renderView (turbolinks.js:495:1)
at o.render (turbolinks.js:533:1)
at Function.e.render (turbolinks.js:493:1)
at t.renderSnapshot (turbolinks.js:690:1)
at t.render (turbolinks.js:686:1)
at r.render (turbolinks.js:940:1)
The answer my mentor gave me had something to do with Turbolinks, and how it loads the page too fast for the jQuery to be applied. So I had a look around and saw that this seemed to be a common solution:
<script>
$(document).on(;'turbolinks:load' function () {
$('#stakingTable').DataTable();
} );
</script>
However, this does nothing for me. Still the same error in the console, as mentioned above. I've looked at some of the Turbolinks documentation here: https://github.com/turbolinks/turbolinks, and I have tried playing around with different turbolinks:before-cache and other features, and yet, nothing works.
Is there something I am missing? If anyone could help, I would be very thankful.
I am learning jQuery and trying to work my way around a scroll effect. Anyway, I am trying to make this code work but having trouble in doing so. It breaks when It runs the animate function:
I would really appreciate your help on this one. Thank you.
Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement. (script.js:58)
at HTMLDocument.dispatch (jquery-3.1.1.slim.min.js:3)
at HTMLDocument.q.handle (jquery-3.1.1.slim.min.js:3)
// Select anchor tags to click on
$(document).on("click", "a", function(event) {
console.log("item clicked");
// Clear out the default action
event.preventDefault();
console.log("working until now");
// Animate to selected selected target
$("html,body").animate({
scroll: $($(this).attr('href')).offset().top
}, 900);
console.log("no errors for now");
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="javascript/script.js">
</script>
It's because of the jQuery version you use. https://code.jquery.com/jquery-3.1.1.slim.min.js
slim version of jQuery does not contain all the original jQuery functions.
You should use a full version. You can download it from here.
It will help to better understand if you read this article from
here where at some point in it you will find this statement and I quote:
Slim build
Finally, we’ve added something new to this release. Sometimes you
don’t need ajax, or you prefer to use one of the many standalone
libraries that focus on ajax requests. And often it is simpler to use
a combination of CSS and class manipulation for all your web
animations. Along with the regular version of jQuery that includes the
ajax and effects modules, we’re releasing a “slim” version that
excludes these modules. All in all, it excludes ajax, effects, and
currently deprecated code.
slim version will not support some methods hence include this CDN
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
in your project
and then run your code it will work.
It work for me ---->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Example:
<html>
<title>.....</title>
<body>
<!-------------------- scripts --------------------------------->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!- use this->
<script src="js/navbar-fixed.js"></script>
</body>
</html>
I'm trying to get a functional lightbox to work on my page using code from 'bootply.com/' but it does't seem to work. It works as a link, but not as a lightbox. I get an error relating to the Javascript which states '$ is not defined', but I can't seem to locate the issue. I'm simply replicating the code, so not sure what I'm missing!
<script type="text/JavaScript">
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
http://www.bootply.com/71401
Any help is appreciated.
you have to include jQuery.
if you have jQuery lib then
<script src="jquery-1.11.2.min.js"></script>
or
use jQuery CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
You are missing the jQuery library..
Include this in the top of your HTML before you attempt to use the $
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Alternatively you can download the jQuery library and reference it yourself.
This should resolve the issue.
I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:
Uncaught TypeError: Object [object Object] has no method 'tokenInput'
Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
And showing that tokeninput has loaded:
Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:
<script src="http://code.jquery.com/jquery.js"></script>
It seems having multiple versions of jQuery loaded is not a good thing to do.
I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.
Then try this
<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();
j(document).ready(function () {
j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/
I'm using the jQuery UI Layout plugin and I keep getting this error in Firebug: $('body').layout is not a function. I also get the same error in IE8 and below.
Obviously, it's being caused by the line where I initiate the layout UI in my scripts file:
$('body').layout({ *options here* });
Is there a way to prevent this error from showing? I'm pretty sure I need the BODY selector for this particular plugin to run.
** SOLUTION **
As the helpful answers say below, I had this line: $('body').layout({ *options here* }); BEFORE I included my jQuery and jQuery UI Layout Plugin files. Once I put the body.layout after those two inclusions, the error went away.
You seem to either
1) have not included the plugin properly (script tag missing/typo in the url, included it before loading jquery itself, whatever else could go wrong)
or
2) calling $("body").layout too early - wrap it with $(document).ready(function() { });
it should be
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.layout.js"></script>
...
<script type="text/javascript">
$(document).ready(function() {
$("body").layout() // will work now
});
</script>
Make sure you're including the lines:
<SCRIPT type="text/javascript" src="/path/to/jquery-latest.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/path/to/jquery.layout-latest.js"></SCRIPT>
Prior to the code you placed in your question. Otherwise, layout will have been undefined before use.