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

Je veux vraiment faire de la simple boîte de dialogue modale en cours d'exécution. Ainsi, en suivant 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"));

_Layout:

<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 quand je le lance, je me retrouve avec 0x800a1391 - runtime JavaScript erreur: "jQuery" n'est pas défini, à l'intérieur de l'jquery-ui bibliothèque. Si j'ai simplement mis le code dans une page html qu'il fonctionne comme prévu. Donc le problème vient de la MVC du projet. Je suis à l'aide de visual studio 2012 sur Windows 8. Toutes les pensées?

source d'informationauteur Wosh

9

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

Utiliser l'onu-version minifiée de jQuery pour résoudre le problème (ou il suffit de renommer le fichier) - lorsqu'il est déployé, le bundler va rapetisser le fichier jQuery de toute façon.

Mise à jour

Vous pouvez modifier ce comportement par compensation la IgnoreList dans le RegisterBundles méthode (mais je vous recommande de coller avec les paramètres par défaut et tout simplement de renommer 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);
```
En voir plus dans la Telerik docs.
10

Le problème que j'ai rencontré lors de l'obtention de cette erreur était due au fait que les énoncés suivants n'étaient pas dans le <head> du document, mais juste avant le </body> tag à la fin du document.
```
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
```
Une fois que j'ai déménagé à la <head> de mon .cshtml fichier, tout a bien fonctionné.

Suffit d'utiliser @section scripts autour de vos scripts comme

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



        });

    });

  </script>
}

J'ai eu du mal avec celui-ci pendant environ une heure, presque toutes les solutions de descendre à l'ordre et la méthode que vous appelez de vos scripts. J'ai trouvé le bundlers ont été à l'origine des problèmes (pour moi c'était de l'interface utilisateur bundler)

Ici est l'ordre qui a travaillé 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>

1

IE a une autre syntaxe de vérification en javascript, que Edge, Chrome et Firefox.
J'ai eu la même erreur dans mon code, lorsque le BundleOptimization a été allumé dans mon application MVC.
Je utiliser AngularJS comme cadre, et une ligne vissé vers le haut de l'ensemble, et fait un effet de cascade:
```
$http.post('/controller/action', { dto })
```
Enlever les accolades {} - résolu mon "manque d'JQuery-problème". Mais que j'ai d'abord trouvé par le débogage dans l'IE (en appuyant sur F8 en mode debug):
Le JQuery-message d'erreur est trompeur, mais la syntaxe-erreur fait référence à la ligne de droite, afin que je puisse corriger l'erreur.

Vous devez vous connecter pour publier un commentaire.