"TypeError: 'undefined' is not a function" when trying to use jQuery UI
css, javascript, jquery, ruby-on-rails, twitter-bootstrap
Solution
I would surmise the error would be caused by loading this function before JQuery is loaded yet (hence why you're seeing the `undefined` error -- JQuery is undefined)
Can you detail the way you're loading the code? Can you post your `<head>` tag?
The possible causes could be:
- JQuery is not loaded
- JQueryUI is not loaded
- `$("#slider")` is not a valid element
Problem
I'm trying to use the `slider()` function of jQuery UI, and keep getting the following error in the console: TypeError: `undefined` is not a function (evaluating `jQuery('#slider').slider()`) I've definitely linked to the jQuery UI javascript and CSS files correctly - when I view the page source, they're all there. Why am I still getting this error? If it's of any use, I'm using Rails and also some Bootstrap stuff. Here's the javascript code: ``` <script type="text/javascript"> $(document).ready(function(){ $('#slider').slider(); }); </script> ``` Thanks Here's the `<head>`: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"> <link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/bootstrap-theme.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/bootstrap-theme.min.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/bootstrap.min.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/companies.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/jquery-ui.min.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/scaffolds.css?body=1" media="screen" rel="stylesheet" /> <link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" /> <script src="/assets/jquery.js?body=1"></script> <script src="/assets/jquery_ujs.js?body=1"></script> <script src="/assets/bootstrap.js?body=1"></script> <script src="/assets/bootstrap.min.js?body=1"></script> <script src="/assets/companies.js?body=1"></script> <script src="/assets/jquery-1.11.0.min.js?body=1"></script> <script src="/assets/jquery-ui.min.js?body=1"></script> <script src="/assets/application.js?body=1"></script> <title>New Company - OE Fort by Oxford Entrepreneurs</title> <meta content="authenticity_token" name="csrf-param" /> <meta content="FcOEJfo8vcCzR+Dq+5zOVSvm7Npfo+R+FoXrEPpV3js=" name="csrf-token" /> <!-- Bootstrap core CSS --> <link href="../../../app/assets/stylesheets/bootstrap.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script> <link href="../../../app/assets/stylesheets/jquery-ui.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="../../jumbotron.css" rel="stylesheet"> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <!-- Just for debugging purposes. Don't actually copy this line! --> <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300' rel='stylesheet' type='text/css'> <script type="text/javascript"> jQuery(document).ready(function(){ $('#slider').slider(); }); </script> </head> ```