it-roy-ru.com

«TypeError:« undefined »не является функцией» при попытке использовать jQuery UI

Я пытаюсь использовать функцию slider() пользовательского интерфейса jQuery и получаю в консоли следующую ошибку:

TypeError:undefined не является функцией (оценивает jQuery('#slider').slider())

Я определенно связался с jQuery UI javascript и CSS-файлами правильно - когда я просматриваю исходный код страницы, они все там. Почему я все еще получаю эту ошибку?

Если это пригодится, я использую Rails, а также некоторые Bootstrap вещи. Вот код JavaScript:

<script type="text/javascript">
    $(document).ready(function(){
        $('#slider').slider();     
    });
</script>

Спасибо

Вот <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>
6
Taimur

Я бы предположил, что ошибка будет вызвана загрузкой этой функции еще до загрузки JQuery (следовательно, почему вы видите ошибку undefined - JQuery не определен)

Можете ли вы подробно описать способ загрузки кода? Можете ли вы опубликовать свой тег <head>

Возможные причины могут быть:

  • JQuery не загружен
  • JQueryUI не загружен
  • $("#slider") не является допустимым элементом
7
Richard Peck

Ошибка связана с отсутствующей строкой в ​​вашем файле application.js.coffee. Как упомянуто здесь: https://github.com/joliss/jquery-ui-Rails здесь вам могут потребоваться специальные модули.

Так что просто добавьте следующую строку в ваш файл application.js.coffee, и она должна работать:

#= require jquery.ui.slider

Я знаю, что это не ответит на этот точный вопрос, но может помочь другим получить то же сообщение об ошибке для функции slider ().

Если вы предварительно задали значение в ползунке при его инициализации, вы можете получить что-то вроде следующего:

$('#slider').val(5).slider();  

если вы удалите значение (5), вы также получите «TypeError:« undefined »не является функцией»

то есть. 

$('#slider').val().slider();  

вместо этого вам нужно будет вставить начальное значение во входной тег.

<input type="text" id="slider" value="5">

У вас может быть такая настройка, если слайдер используется во многих местах на вашем сайте, и вы хотите, чтобы ваш js-файл содержал по умолчанию, а не каждый слайдер содержал одну и ту же информацию. В моем случае мне нужно было децентрализовать значение, и это привело к появившейся здесь ошибке.

0
Brad Baskin

Я только что обнаружил еще одну возможную причину, когда у вас связаны две разные версии jquery. 

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
      "~/Scripts/jquery-{version}.js"));

... (некоторые другие связки), а затем:

bundles.Add(new ScriptBundle("~/bundles/ajax").Include(
      "~/Scripts/jquery-1.10.2.min.js",
      "~/Scripts/jquery.unobtrusive-ajax.min.js"));

Например. в моем комплекте jqueryui у меня был jquery-1.10.4.min.js (точнее, последняя версия), но в моем комплекте ajax у меня был jquery-1.10.2.min.js. Двойной щелчок по ошибке в инспекторе элементов Chrome выявил ссылки на код в 1.10.2. Когда я изменил это на 1.10.4 в комплекте ajax, элемент jqueryui неожиданно заработал (в моем случае это были Tabs). 

Конечно, я должен был оставить все на jquery- {version} .js. 

Таким образом, в итоге, (n упущено) конфликт версий является еще одной возможной причиной этой ошибки.

0
Arwin

попробуйте это, если вы сталкиваетесь с "uncaught typeerror не является функцией javascript" Это работает

jQuery(function($) {
  // your code here
});
0
shalini singh

В случае, если кто-то еще сталкивается с этим, у меня были проблемы с выбором для работы с asp.net

Оказывается, я не правильно все включил, но этот джентльмен сделал это фиктивным доказательством: http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/

0
Steve