web-dev-qa-db-fra.com

0x800a1391 - Erreur d'exécution JavaScript: "jQuery" n'est pas défini - MVC 4

Je veux lancer un dialogue modal très simple. Donc, après un tutoriel, je me retrouve avec ce code:

BundleConfig:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.8.2.min.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-1.8.24.js"));

_Disposition:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")

</head>
<body>
   <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>


    @RenderSection("scripts", required: false)
</body>

et index:

@section featured {
<section class="featured">
    <div class="content-wrapper">
        <hgroup class="title">
            <h1>@ViewBag.Title.</h1>
            <h2>@ViewBag.Message</h2>
        </hgroup>
        <script type="text/javascript">
            $( "#dialog-form" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {

                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    allFields.val( "" ).removeClass( "ui-state-error" );
                }
            });

            $( "#create-user" )
              .button()
              .click(function() {
                  $( "#dialog-form" ).dialog( "open" );
              });

        </script>

        <div style="float: left; width: 250px;">
            <button id="create-user">Create new user</button>
        </div>

    </div>
</section>
}

Cependant, lorsque je l'exécute, je me retrouve avec 0x800a1391 - Erreur d'exécution JavaScript: "jQuery" n'est pas défini, dans la bibliothèque jquery-ui. Si je mets simplement le code dans une page html, cela fonctionne comme prévu. Le problème vient donc du projet MVC. J'utilise Visual Studio 2012 sur Windows 8. Avez-vous des idées?

jqueryjquery-uiasp.net-mvc-4
9
Wosh

Par défaut, le bundle MVC ignore les fichiers avec .min dans le nom du fichier. 

Utilisez la version non simplifiée de jQuery pour résoudre le problème (ou renommez simplement le fichier). Une fois déployé, le bundler réduira néanmoins le fichier jQuery. 

Mettre à jour

Vous pouvez modifier ce comportement en désactivant la variable IgnoreList dans la méthode RegisterBundles (mais je vous recommande de vous en tenir aux valeurs par défaut et de renommer simplement les fichiers):

// Clear all items from the ignore list to allow minified CSS and JavaScript 
// files in debug mode
bundles.IgnoreList.Clear();    

// Add back the default ignore list rules sans the ones which affect minified 
// files and debug mode
bundles.IgnoreList.Ignore("*.intellisense.js");
bundles.IgnoreList.Ignore("*-vsdoc.js");
bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);

Voir plus dans le docs Telerik .

9
Geoff Appleford

Le problème que j'ai rencontré en obtenant cette erreur était dû au fait que les instructions suivantes ne figuraient pas dans le <head> du document, mais juste avant la balise </body> à la fin du document.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")

Une fois que je les ai déplacés dans le <head> de mon fichier .cshtml, tout a bien fonctionné.

10
Robert Bernstein

Utilisez simplement les scripts @section autour de vos scripts

@section scripts
  {
   <script>
    $(function () {



        });

    });

  </script>
}
5
Richard Valdivieso

Je me suis débattu avec celui-ci pendant environ une heure, presque toutes les solutions reposent sur l'ordre et la méthode que vous appelez vos scripts. J'ai trouvé que les bundlers causaient des problèmes (pour moi c'était le bundler de l'interface utilisateur)

Voici l'ordre qui a fonctionné pour moi. 

    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/bundles/jquery-ui"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
2
kingPuppy

IE a une autre vérification de la syntaxe en javascript, que Edge, Chrome et Firefox . J'ai la même erreur dans mon code, lorsque BundleOptimization était activé dans mon application MVC . J'utilise AngularJS comme framework, et un line a bousillé tout le paquet et a créé un effet en cascade:

$http.post('/controller/action', { dto })

Supprimer les accolades {} - a résolu mon 'problème de JQuery manquant'. Mais ce que j’ai découvert en commençant par le débogage dans IE (en appuyant sur F8 en mode débogage):  enter image description here Le message d'erreur JQuery est trompeur, mais l'erreur de syntaxe fait référence à la ligne droite, ce qui permet de corriger l'erreur.

1
JorgenV