web-dev-qa-db-fra.com

"TypeError: 'undefined' n'est pas une fonction" lors de la tentative d'utilisation de l'interface utilisateur jQuery

J'essaie d'utiliser la fonction slider() de l'interface utilisateur jQuery et je reçois toujours l'erreur suivante dans la console:

TypeError: undefined n'est pas une fonction (évaluation jQuery('#slider').slider())

J'ai définitivement lié les fichiers javascript et CSS de jQuery UI - lorsque je visualise le code source de la page, ils sont tous là. Pourquoi ai-je toujours cette erreur?

Si cela peut vous être utile, j'utilise Rails ainsi que des outils Bootstrap. Voici le code javascript:

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

Merci

Voici le <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>
javascriptjquerycssruby-on-railstwitter-bootstrap
6
Taimur

Je suppose que l'erreur serait provoquée par le chargement de cette fonction avant le chargement de JQuery (d'où la raison pour laquelle vous voyez l'erreur undefined - JQuery n'est pas définie)

Pouvez-vous détailler la façon dont vous chargez le code? Pouvez-vous poster votre tag <head>? 

Les causes possibles pourraient être:

  • JQuery n'est pas chargé
  • JQueryUI n'est pas chargé
  • $("#slider") n'est pas un élément valide
7
Richard Peck

L'erreur est liée à une ligne manquante dans votre fichier application.js.coffee . Comme mentionné ici: https://github.com/joliss/jquery-ui-Rails vous pouvez demander des modules spéciaux ici.

Il suffit donc d’ajouter la ligne suivante à votre fichier application.js.coffee et cela devrait fonctionner:

#= require jquery.ui.slider
0
ブリックス フェリックス

Je sais que cela ne répondra pas à cette question précise mais cela peut aider les autres à obtenir le même message d'erreur pour la fonction slider ().

Si vous avez prédéfini la valeur dans le curseur lors de son initialisation, vous pouvez obtenir les éléments suivants:

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

si vous supprimez la valeur (5), vous obtenez également le message “TypeError: 'undefined' n'est pas une fonction”

c'est à dire. 

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

à la place, vous devrez insérer la valeur de départ dans la balise d’entrée.

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

Vous pouvez avoir ce type de configuration si le curseur est utilisé à de nombreux endroits de votre site et que vous souhaitez que votre fichier js contienne la valeur par défaut plutôt que que chaque curseur contienne les mêmes informations. Dans mon cas, j'ai eu besoin de décentraliser la valeur et cela a causé l'erreur vue ici.

0
Brad Baskin

Une autre cause possible, que je viens de découvrir, est lorsque vous avez deux versions différentes de jquery liées. 

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

... (quelques autres paquets), et ensuite:

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

Par exemple. dans mon bundle jqueryui, j'avais jquery-1.10.4.min.js (ou plutôt, la dernière version), mais dans mon bundle ajax j'avais jquery-1.10.2.min.js. En double-cliquant sur l'erreur dans l'inspecteur d'éléments Chrome, a révélé des liens vers le code dans 1.10.2. Quand j'ai changé cela en 1.10.4 dans le paquet ajax, l'élément jqueryui a soudainement fonctionné (dans mon cas, c'était Tabs). 

Ce que j’aurais dû faire, bien sûr, c’est tout laisser à jquery- {version} .js. 

Donc, en résumé, un conflit de version (n négligé) est une autre cause possible de cette erreur.

0
Arwin

essayez ceci si vous faites face à "une erreur de type non interceptée n'est pas une fonction javascript" 

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

Au cas où quelqu'un d'autre se heurterait à cela, j'aurais de la difficulté à pouvoir travailler avec asp.net.

Il s'avère que je n'avais pas tout inclus correctement, mais ce monsieur a fait une preuve factice: http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc -5/

0
Steve