Estoy construyendo un módulo para Prestashop que tiene un controlador de Front Office. Quiero usar jQueryUI.

En mi archivo php principal para el módulo (extendiendo la clase Module) en JQueryUI incluido como este:

    public function hookHeader()
{
    $this->context->controller->addJqueryUI('ui.core');
    $this->context->controller->addJqueryUI('ui.widget');
    $this->context->controller->addJqueryUI('ui.mouse');
    $this->context->controller->addJqueryUI('ui.slider');
}

Estoy revisando mi encabezado y veo que todos los scripts se incluyen en el orden correcto. (Ver imagen) jQuery por sí solo funciona bien. Pero tan pronto como llamo a un método jQueryUI, dice que el método no está definido.

Solo intento que funcione el ejemplo básico, dos formas, ambas no funcionan.

$(document).ready(function(){
    $( "#date" ).datepicker();
});

Y esto tampoco funciona:

$( function() {
    $( "#date" ).datepicker();
} );

Sigue diciendo $(...).datepicker is not a function.

No parece que jQuery esté incluido dos veces, ya que funciona bien cuando no llamo a ninguno de los métodos de la interfaz de usuario. Solo existe esta cosa de "migración", pero si cambio el nombre del archivo para que no se pueda incluir, arroja una gran cantidad de errores diferentes (otras funciones que de repente encuentra indefinidas).

Además, ya he desactivado todos los módulos menos el mío. El mismo problema.

Suficientemente interesante

window.onload = function() {
   if (typeof jQuery.ui !== 'undefined') {  
        alert("jquery ui is loaded!");
    } else {
        alert("not working");
    }
}

¡esto dice que está cargado!

¿Qué podría estar mal?

¿Cómo soluciono esto?

enter image description here

1
olli 15 dic. 2016 a las 08:33

2 respuestas

La mejor respuesta

Lo que debe hacer es especificar para cargar el selector de fechas.

$this->context->controller->addJqueryUI('ui.datepicker');

JQuery UI en Prestashop viene con archivos separados para cada componente de UI. Por lo que debe especificar qué componente cargar.

Eche un vistazo a la carpeta / js / jquery / ui < / a> y verá qué componentes están disponibles.

No es necesario especificar ui.core, ui.mouse, etc. (a menos que solo los necesite específicamente) porque son dependencias de componentes, por lo que se cargan automáticamente a menos que agregue un tercer parámetro en el método addJqueryUI a false .

Las dependencias de cada componente se definen en Media clase.

Ejemplo de las dependencias del componente dialog que se cargan automáticamente:

'ui.dialog' => array('fileName' => 'jquery.ui.dialog.min.js', 'dependencies' => array('ui.core', 'ui.widget', 'ui.position','ui.button'), 'theme' => true),
3
TheDrot 16 dic. 2016 a las 09:05

Por ahora, se corrige utilizando las bibliotecas alojadas de Google:

$this->context->controller->addCSS('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css');
$this->context->controller->addJS('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');

Tengo la sensación de que se romperá una vez que vuelva a incluir los otros módulos.

1
Billal Begueradj 21 jul. 2017 a las 16:38