Uncaught TypeError undefined is not a function while using jQuery UI

Question

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    lt script type  text javascript  src    ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt   lt link rel  stylesheet  type  text css  href  file    jquery datetimepicker css    gt   lt script src  file    jquery datetimepicker js  gt  lt  script gt   lt script gt      jQuery   datetimepicker   datetimepicker     lt  script gt    lt div class  container  gt     lt div class  text-center  gt       lt div class  page-header  gt         lt h1 gt   conf  title     lt small gt   conf  description    lt  small gt  lt  h1 gt       lt  div gt     lt  div gt     lt div class  text  gt         lt input id  datetimepicker  type  text   gt                                                                                                                                                                                                                      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

User · Answer

use jQuery noConflict    var j   jQuery noConflict    j document  ready function        j   datetimepicker   datepicker

User · Answer

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

User · Answer

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

User · Answer

And if you have this problem in slider or slideshow you must use jquery easing 1 3    lt script src  http   gsgd co uk sandbox jquery easing jquery easing 1 3 js  gt  lt  script gt

User · Answer

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

User · Answer

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    lt html gt       lt head gt           lt  --  Style sheet references and CSS definitions -- gt       lt  head gt       lt body gt           lt  -- HTML markup and other page content -- gt            lt  -- JavaScript references  You could include jQuery here as well and do all your scripting here  -- gt       lt  body gt   lt  html gt

User · Answer

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    lt script src    ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt   lt link rel  stylesheet  href    ajax googleapis com ajax libs jqueryui 1 10 4 themes smoothness jquery-ui css    gt   lt script src    ajax googleapis com ajax libs jqueryui 1 10 4 jquery-ui min js  gt  lt  script gt    lt script type  text javascript  gt      jQuery document  ready function            jQuery   datetimepicker   datepicker            lt  script gt    lt input id  datetimepicker  type  text  gt

User · Answer

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 nbsp MVC nbsp 5

User · Answer

I don t think jQuery itself includes datetimepicker  You must use jQuery UI instead  src  jquery ui

User · Answer

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

[javascript] Uncaught TypeError: undefined is not a function while using jQuery UI

Examples related to javascript

Examples related to jquery