IM using the following code and I got error is the console
undifinnd is not a function,what am I doing wrong here ?
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetime').datepicker();
});
</script>
I've also try with and I got the same error...
$('#datetime')..datetimepicker();
It looks like from the code you are only inlcuding the main jQuery library and not including the jQueryUI library for which that method is part of (http://jqueryui.com/datepicker/). If you include the jqueryUI library after your jQuery script call you should stop getting errors.
Datepicker is in JQuery UI. You must include that library as well.
Related
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 tried using jQuery_1_9_1 and jQuery_1_4_2 in the same page
But when trying to open popups in my page I am getting
Undefined type Err 'Undefined is not a function' at this point
jQuery_1_9_1.fn.track=function(){
jQuery_1_9_1(this).each(function(){
return new Track(jQuery_1_9_1(this));
Also I am using Mootools in my page .
Could anyone pls help why I am getting this error.
Edit
<script type='text/javascript' src='../assets/js/jquery-1.4.2.min.js'></script>
<script type='text/javascript'> var jq = jQuery.noConflict(); </script>
I have given 1.4.2 in my template file and
<script type='text/javascript' src='../assets/js/jquery-1.9.1.min.js'>
<script type="text/javascript"> var jQuery_1_9_1 = jQuery.noConflict(true); </script>
in one of the commonly used JSP
First of all, you DO NOT NEED multiple versions of JQuery on a single page to achieve the desired functionality.
Secondly, since you are using Mootools and JQuery, best would be to use the following alternatives instead of the default $ in JQuery:
Using the jQuery instance directly
Using var jQ = jQuery.noConflict();
Also, it would be best for applications like this to use Asynchronous Module Definition - something like RequireJS to ensure you load only the JS files which are required for specific functionality.
I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.
use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})
For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.
Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>
You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.
The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.
And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.
I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").
I'm trying the simplest example of getting datepicker to work, and I just can't seem to get it. There is almost nothing in my fiddle.
The top of my web page has this:
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript" />
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
Note: I tried putting the first two script lines in _Layout.cshtml, but I got an error (don't recall the error at the moment). That's why I just put it all on the one page.
And down a bit, in that same page, is this:
<td><input type="text" id="datepicker"></td>
When I click on the input control, nothings happens. However, when I click on the control in the fiddle, it works. What am I missing?
Also, you'll notice I'm using jquery 1.6.2 and jquery-ui 1.8.11. That's different than the fiddle example because fiddle didn't provide those versions as options. I'd be surprised if the version was the difference.
Script tag must have both opening and closing items. You cannot shorthand close them.
Instead of this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
do this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript"></script>
I'm hoping this won't be the final answer, but I finally got the datepicker to display. After much trial and error, and research, I seem to have a jquery conflict, but I don't know why. Someone suggested something called non-conflict mode. So I changed my datepicker code to this:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$("#endTime").datepicker();
});
})(jQuery);
</script>
And it worked. I'm not sure why, but it's finally at least working. If anyone can provide more insight, or a better answer, I'd gladly pick it.
The above example is explained in this answer: Basically, what I did was define a function that takes a parameter (the $) and then execute that function with jQuery as the parameter.
What I still don't understand though, is why this code won't work:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#endTime").datepicker();
});
</script>
If there was a conflict because of the $, and I replaced $ with jQuery, shouldn't it work?
The datepicker is pretty much straight forward why dont you use something like firebug in mozilla to see if it is throwing some error also date picker internally uses the Jquery theme roller so please download and add the jquery "css/custom-Theme/jquery-custom.css" css.
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.