2009-12-27 18 views
16

Estoy desarrollando un sitio con pinax. En una de mis plantillas, intento abrir un cuadro de diálogo simple de jquery. Sin embargo, sigo obteniendo el error de javascript "Dialog not a function". Estoy usando jquery 1.2.6 y jquery-ui 1.6. Mi javascript y HTML son los siguientes:JQuery UI cuadro de diálogo - * No es una función * error

<html> 
<head> 
<link type="text/css" href="/site_media/smoothness/ui.all.css" rel="stylesheet" /> 
<script src="/site_media/jquery.js" type="text/javascript"></script> 
<script src="/site_media/ui/ui.core.js" type="text/javascript"></script> 
<script src="/site_media/ui/ui.draggable.js" type="text/javascript"></script> 
<script src="/site_media/ui/ui.resizeable.js" type="text/javascript"></script> 
<script src="/site_media/ui/ui.dialog.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
        $('#dialogbox').dialog(); 
      }); 
</script> 
</head> 
<body> 
    <div id="dialogbox" title="dialog title"> 
    <p>Test dialog</p> 
    </div> 
</body> 
</html> 

¿Puede alguien explicar por qué ocurre esto?

+1

El código de diálogo de la interfaz de usuario de jQuery no se inicializa correctamente por algún motivo. Intente crear un solo archivo jquery UI js adecuado en lugar de hacer referencia a ellos uno por uno, ya que podría resolver su problema. Así es como se supone que debes usarlo de todos modos. Eche un vistazo a http://jqueryui.com/download –

+0

He intentado ese enfoque también pero me da el mismo error. – kartikq

+0

¿Estás seguro de que los archivos javascript que estás incluyendo son las versiones de lanzamiento oficiales de los archivos y no se han personalizado (inadvertidamente rompiendo algo)? –

Respuesta

36

Intenté duplicar el error tanto al usar las versiones públicas de Google como al descargar la versión heredada (1.6) del sitio jQuery UI e incluir manualmente los archivos. Ninguno provocó un problema (http://jsbin.com/uloqi para verlo funcionar).

lo tanto, eso significa uno de los siguientes podría resolver su problema:

  1. uso de una herramienta como Firebug para Firefox para verificar cada archivo JS está siendo incluido.
  2. Asegúrese de que no haya otros JS en la página que puedan causar un error.
  3. Verifique que tiene las versiones correctas de los archivos descargados.

No sé qué más decirle, ya que el código que pegó, cuando se combina con los archivos correctos, funciona a la perfección.

+9

Doug, tenía otro archivo JS incluido en mi página que estaba causando esto. Necesito tomar más cafeína. – kartikq

+6

+1 2.nd punto me ayudó. 2X jquery libs agregadas al mismo documento. – karlisup

+1

Asegúrese de no haber personalizado su compilación de jQuery UI para no incluir el componente de diálogo. – Twilite

4

Tuve exactamente el mismo problema que el descrito anteriormente (el cuadro de mensaje solo se abre una vez). El problema que tuve fue que el html en el messagebox también carga jquery. Como no lo necesitaba, podría eliminarlo sin problemas. De lo contrario, es posible que tenga que precisar el problema un poco más.

2

Bajo ciertas circunstancias, puede recibir este error si se cargan varias versiones de JQuery y diferentes al mismo tiempo.

En mi caso tengo una página ASP que usaba un maestro. Mi maestro fue incluido jQuery 1.4.2.min Mi página aspx Incluí jQuery 1.7.2.min

Cuando las funciones de JQuery fueron llamados desde un control, se puso la confusión sobre qué jQuery para usar lo que a pesar de que la escritura podía declara que JQuery fue cargado (podría mostrar la versión de JQuery), no pudo encontrar ninguna función de JQuery.

Cuando eliminé mi inclusión local de JQuery 1.7.2.min fuera de mi archivo aspx, y actualicé mi materia de 1.4.2.min a 1.7.2.min, el problema desapareció.

2

La respuesta de Doug Neiner fue de gran ayuda. Mi caso era un poco más complicado, pero todavía trata de un mismo punto:

abrí un cuadro de diálogo de la página A, que carga la página B como esto:

$('#MyDiv').dialog({ 
    autoOpen: false 
}) 
$("#MyDiv").load("PageB.aspx", function() { 
    $("#MyDiv").dialog("open"); 
}); 

El problema es que tanto Página A y B tenían incluido jQuery. Tenga en cuenta: si está cargando otra página en un diálogo, no es necesario que incluya los mismos js.

0

Como ya se explicó, es probable que anule las bibliotecas existentes.

Una forma de resolverlo es asegurarse de que se carguen los archivos correctos.

Otra forma es insertar un iframe entre el diálogo y el contenido en el cuadro de diálogo. Los marcos flotantes son tratados por el navegador como una página separada con sus propios scripts. Por lo tanto, los scripts del contenido "encima del" iframe estarán separados de los scripts del diálogo "debajo" del iframe.

0

acabo de este problema también y la única solución que funciona para mí era salvar la referencia de diálogo como:

var confirmDialog = $("#dialog-confirm").dialog({ 
    autoOpen: false 
}); 
$("#test").click(function() { 
    confirmDialog.dialog('open'); 
}); 

De lo contrario, todo lo que he fallado intentado con la esperanza

.dialog() is not a function error
esta ayuda.

+0

guardarlo como referencia no funcionó para mí :( – Anupam

0

Tuve el mismo problema. El mío se infligió a mí mismo desde una actualización de jQuery UI de 1.11.4 a 1.12.1. Instalé la actualización usando NuGet y NuGet eliminó la antigua referencia 1.11.4 de mi proyecto, pero nunca agregué la nueva referencia del proyecto.

Al ejecutar localmente la aplicación funcionó muy bien, pero al implementarla, el nuevo archivo 1.12.1 nunca lo hizo con la publicación. Espero que esto ayude a alguien más.

Cuestiones relacionadas