javascript - modal - jquery dialog form

Error: TypeError: $(…).dialog no es una función

Question

Tengo un problema para que un cuadro de diálogo funcione como una funcionalidad básica. Aquí está mi fuente de importación jQuery:

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>

Html:

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I''m a dialog</div>

<script type="text/javascript">
    $("#opener").click(function() {
            $("#dialog1").dialog(''open'');
    });
</script>

Desde las publicaciones alrededor parece como un problema de importación de la biblioteca. Descargué las dependencias de JQuery UI Core, Widget, Mouse y Position.

¿Algunas ideas?

Answer 1

Acabo de experimentar esto con la línea:

$(''<div id="editor" />'').dialogelfinder({

Recibí el error "dialogelfinder no es una función" porque otro componente estaba insertando una llamada para cargar una versión anterior de JQuery (1.7.2) después de que se cargó la versión más nueva.

Tan pronto como comenté la segunda carga, el error desapareció.

Answer 2

Aquí está la lista completa de los scripts necesarios para deshacerse de este problema. (Asegúrate de que el archivo exista en la ruta del archivo dado)

   <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
    </script>

y también incluye el enlace css a continuación en _Layout.cshtml para una ventana emergente con estilo.

<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />

Answer 3

Asegúrese de insertar la versión completa de jQuery UI. También debes iniciar el diálogo primero:

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });
  
  $("#opener").click(function() {
    $("#dialog1").dialog(''open'');
  });
});

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I''m a dialog</div>

Answer 4

Cambie jQueryUI a la versión 1.11.4 y asegúrese de que jQuery no se agregue dos veces.

Answer 5

Si comenta el siguiente código de la página _Layout.cshtml , la ventana emergente modal comenzará a funcionar:

    </footer>

    @*@Scripts.Render("~/bundles/jquery")*@
    @RenderSection("scripts", required: false)
    </body>
</html>

Answer 6

Si por alguna razón se cargan dos versiones de jQuery (lo cual no se recomienda), llamar a $ .noConflict (verdadero) desde la segunda versión devolverá las variables jQuery de ámbito global a las de la primera versión.

Algunas veces puede ser un problema con una versión anterior (o una versión no estable) de archivos JQuery

Solución use $ .noConflict ();

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
   $("#opener").click(function() {
            $("#dialog1").dialog(''open'');
    });
});
// Code that uses other library''s $ can follow here.
</script>

Answer 7

Tuve un problema similar y en mi caso, el problema fue diferente (estoy usando plantillas de Django).

El orden de JS era incorrecto (sé que eso fue lo primero que verificó, pero estaba casi seguro de que ese no era el caso, pero sí lo fue). Se llamó a js llamando al diálogo antes de llamar a jqueryUI library.

Estoy usando Django, así que estaba heredando una plantilla y usando {{super.block}} para heredar el código del bloque también a la plantilla. Tuve que mover {{super.block}} al final del bloque que resolvió el problema. El js que llama al diálogo se declaró en la clase de medios en admin.py de Django. Pasé más de una hora para averiguarlo. Espero que esto ayude a alguien.