web-dev-qa-db-fra.com

L'objet ne prend pas en charge la propriété ou la méthode 'dialogue'

En référence à AjaxControlToolkit , j'ai créé une boîte de dialogue d'interface utilisateur à partir de MVC.

Layout.cshtml

 <head>
   <meta charset="utf-8" />
   <title>@ViewBag.Title - My ASP.NET MVC Application</title>
   <link href="../../Content/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
   <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
   <script src="../../Scripts/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
   <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/modernizr")
</head>

Index.cshtml

<h2>jQuery UI Hello World</h2>          
<button id="show-dialog">Click to see jQuery UI in Action</button>            
<div id="dialog" title="jQuery UI in ASP.NET MVC" >  
  <p>You now have the power of ASP.NET, the simplicity of client-side scripting with jQuery, and the looks of jQuery UI. Congrats, web slinger!</p>  
</div>  

<script language="javascript" type="text/javascript">
  $(function () {
    $('#dialog').dialog({
      autoOpen: false,
      width: 600,
      buttons: {
        "Ok": function () { $(this).dialog("close"); },
        "Cancel": function () { $(this).dialog("close"); }
      }
    });
    $("#show-dialog").button().click(function () {
        $('#dialog').dialog('open');
        return false;
    });
  });  
</script>

J'ai vérifié à la fois IE et Firefox. Firefox jette 

Le typeerror $ (...). Dialog n'est pas une fonction

IE jette

L'objet ne prend pas en charge la propriété ou la méthode 'dialogue'

Aucune suggestion?

jqueryasp.net-mvc-3
8
kk1076

3 choses me viennent à l’esprit qui mériteraient d’être vérifiées:

  1. Ne jamais coder en dur des URL dans une application ASP.NET MVC. Utilisez toujours des aides (ou des ensembles recommandés):

    <head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/Content/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet"  type="text/css" />
    <script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
    <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/modernizr")
</head>

  2. Assurez-vous qu'à la fin de votre _Layout.cshtml vous n'avez pas d'appel @Scripts.Render("~/bundles/jquery") car cela inclurait jQuery deux fois.

  3. Si à la fin de votre _Layout.cshtml vous avez une section dédiée aux scripts personnalisés comme @RenderSection("scripts", required: false), assurez-vous que vous avez placé votre script personnalisé dans cette section (notez que, puisque cette RenderSection se trouve à la fin du DOM, vous n'avez pas besoin de en enveloppant votre script dans un événement document.ready car, au moment de son exécution, le DOM sera déjà chargé):

    <h2>jQuery UI Hello World</h2>          
<button id="show-dialog">Click to see jQuery UI in Action</button>            
<div id="dialog" title="jQuery UI in ASP.NET MVC" >  
   <p>You now have the power of ASP.NET, the simplicity of client-side scripting with jQuery, and the looks of jQuery UI. Congrats, web slinger!</p>  
</div>    

@section scripts {
    <script type="text/javascript">
        $('#dialog').dialog({
            autoOpen: false,
            width: 600,
            buttons: {
                "Ok": function () { $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            }
        });
        $("#show-dialog").button().click(function () {
            $('#dialog').dialog('open');
            return false;
        });
    });  
    </script>
}
14
Darin Dimitrov

Dans mon cas, cette erreur était due au fait que j'avais oublié d'ajouter la référence du fichier jquery-ui:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
9
live-love

Cela se produit généralement lorsque vous oubliez d’ajouter jquery-ui.js. L'ordre d'inclusion de jquery-ui-{version}.js est également important!

Vous devez inclure jquery-{version}.js puis jquery-ui-{version}.js. Ensuite, juste avant la balise </body>, incluez votre fichier javascript personnalisé.

Cela résoudra l'erreur d'exécution Javascript: [ L'objet ne prend pas en charge la propriété ou la méthode 'dialog' ], [ '$' n'est pas défini ]

3
DevelopZen

Votre code me semble correct. Vous pouvez vérifier que votre interface utilisateur personnalisée jQuery contient une fonctionnalité de dialogue (ou essayer de télécharger une interface utilisateur complète de jQuery à des fins de test) et vérifier que l'URI du script JS est correct.

1
blint

Incluez ces trois lignes de code:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
0
Willow