Errore Drupal.behaviors
Buongiorno a tutti,
sto facendo un mio modulo custom in drupal 8 e sto cercando di aggiungere un calendario su drupal in un campo di testo.
Ho visto questa guida a proposito
https://drupal.stackexchange.com/questions/262123/add-datepicker-to-view...
Ed inoltre mi sono documentato leggendo pure la guida sui Drupal.behaviors dal seguente link
https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview
Il modulo viene caricato dato che mi esegue il codice javascript che ho scritto però non mi esegue la parte di Drupal.behaviors.
Questo è la dichiarazione delle mia libreria:
date-picker:
js:
js/site-datepicker.js : {}
dependencies:
- core/jquery
- core/drupal
- core/jquery.once
- core/jquery.ui.datepicker
stilericerca:
css:
layout:
css/stile.css : {}
E questo è il contenuto del file javascript:
var contatore=0;
function provaclick(){
if(contatore==0){
document.getElementById("edit-datamodifica").style.display="inline";
document.getElementById("edit-ordinamento").style.display="inline";
document.getElementById("edit-frequenza").style.display="inline";
contatore=1;
}
else if(contatore==1){
document.getElementById("edit-datamodifica").style.display="none";
document.getElementById("edit-ordinamento").style.display="none";
document.getElementById("edit-frequenza").style.display="none";
contatore=0;
}
alert("sto qua 0");
Drupal.behaviors.exampleBehavior = {
attach: function(context, settings) {
alert("sto qua 1");
},
detach: function(context, settings, trigger) {
$('.example', context).removeOnce('example-behavior').each(function() {
// Undo stuff.
});
}
};
return false;
}
Perchè non mi esegue il codice in Drupal.behaviors ?? non ci entra proprio...
Risposte
Quoto una parte della guida
Quoto una parte della guida che dici di aver seguito:
il contenuto del file js non sembra seguire queste linee guida. Prova:
(function ($, Drupal) {
Drupal.behaviors.exampleBehavior = {
attach: function (context, settings) {
alert('ok');
}
};
})(jQuery, Drupal);
Provato ma lo stesso che non
Provato ma lo stesso che non mi entra nella funzione attach, le dipendenze le ho scritte correttamente ???
date-picker:
js:
js/site-datepicker.js : {}
dependencies:
- core/jquery
- core/drupal
- core/jquery.once
- core/jquery.ui.datepicker
Quello che non è il codice del comportamento di Drupal.behaviors per il resto fa tutto la libreria js....
Per l'esempio che ti ho fatto
Per l'esempio che ti ho fatto basterebbe core/jquery. Per quello della guida le dipendenze sono:
- core/jquery
- core/jquery.once
perchè utilizza la funzione once() e quindi deve includere la relativa libreria.
Per quello di:
https://drupal.stackexchange.com/questions/262123/add-datepicker-to-view...
- core/jquery
- core/jquery.ui.datepicker
perchè utilizza la funzione datepicker().
Le dipendenze servono solo se le usi all'interno del tuo behavior. Nel tuo (una volta corretto) fai uso solo della funzione removeOnce() che è in jquery.once. Quindi dovrebbero bastare:
- core/jquery
- core/jquery.once
Provato con queste dipendenze
Provato con queste dipendenze per quanto riguarda il datepicker
date-picker:
js:
js/site-datepicker.js : {}
dependencies:
- core/jquery
- core/jquery.ui.datepicker
e questo il codice del behaviors
(function ($, Drupal) {
Drupal.behaviors.exampleBehavior = {
attach: function (context, settings) {
alert('ok');
}
};
})(jQuery, Drupal);
come mi hai detto di provare, ma nulla non ne vuole proprio sapere.......
Se l'alert non viene eseguito
Se l'alert non viene eseguito al caricamento della pagina (e in realtà più volte per ogni context) dove richiami la libreria, il problema è probabilmente dato proprio dalla modalità di inclusione.
Alert deve essere eseguito
Alert deve essere eseguito quando faccio click su un pulsante, il quale mi fa comparire dei campi nascosti, questa è la funzione per intera dell'onclick
function provaclick(){
if(contatore==0){
document.getElementById("edit-datamodifica").style.display="inline";
document.getElementById("edit-ordinamento").style.display="inline";
document.getElementById("edit-frequenza").style.display="inline";
contatore=1;
}
else if(contatore==1){
document.getElementById("edit-datamodifica").style.display="none";
document.getElementById("edit-ordinamento").style.display="none";
document.getElementById("edit-frequenza").style.display="none";
contatore=0;
}
alert("sto qua 0");
(function ($, Drupal) {
Drupal.behaviors.exampleBehavior = {
attach: function (context, settings) {
alert('ok');
}
};
})(jQuery, Drupal);
alert("sto qua 3");
alert("2");
alert("3");
alert("4");
return false;
}
mmmmmmmmmmmmm ho fatto la
mmmmmmmmmmmmm ho fatto la prova tolto dalla funzione il Drupal.behaviors e messo al di fuori è andato funzionato.... perchè??? però mi esegue sempre alert...
I behavior non si possono
I behavior non si possono usare così, è per questo che non funziona nulla.
Ti faccio un esempio.
Poni che:
1. hai un elemento nel tuo html con id "cliccami"
2. vuoi aprire un alert cliccando questo elemento
3. vuoi usare i behaviors
il tuo file js dovrebbe contenere (solamente) queste righe
(function ($, Drupal) {
Drupal.behaviors.exampleBehavior = {
attach: function (context, settings) {
$('#cliccami', context).once().each(function(){
$(this).on('click', function(){
alert('cliccato!');
});
});
}
};
})(jQuery, Drupal);
ovviamente per usare once() devi aggiungere la dipendenza core/jquery.once
mmmmmmmmmm quindi se sto
mmmmmmmmmm quindi se sto capendo bene il drupal.behaviors deve essere all'interno del file e non in nessuna funzione, ed il calendario inizializzato in un file a parte ??? cosi sarebbe corretto ??
Ora mettendo il behaviors al
Ora mettendo il behaviors al di fuori della funzione l'attach va... però ancora che non mi vede il calendario.... questo è il mio codice del file js
var contatore=0;
function provaclick(){
if(contatore==0){
document.getElementById("edit-datamodifica").style.display="inline";
document.getElementById("edit-ordinamento").style.display="inline";
document.getElementById("edit-frequenza").style.display="inline";
contatore=1;
}
else if(contatore==1){
document.getElementById("edit-datamodifica").style.display="none";
document.getElementById("edit-ordinamento").style.display="none";
document.getElementById("edit-frequenza").style.display="none";
contatore=0;
}
alert("sto qua 0");
alert("sto qua 3");
alert("2");
alert("3");
alert("4");
return false;
}
console.log("sto qua 1");
//$("#edit-datamodifica").datepicker();
Drupal.behaviors.customDatepicker = {
attach: function (context, settings) {
alert("sto qua 1");
$(function () {
alert("sto qua 2");
$("#edit-datamodifica").datepicker({
dateFormat: "yy-dd-mm",
altField: "input[data-drupal-selector=edit-datamodifica]",
altFormat: "yy-mm-dd"
});
});
}
};
console.log("sto qua 2");
console.log("sto qua 3");
document.getElementById("edit-datamodifica").style.display="none";
document.getElementById("edit-ordinamento").style.display="none";
document.getElementById("edit-frequenza").style.display="none";
console.log("sto qua 4");
Anche mettendolo in un file
Anche mettendolo in un file singolo il Drupal.behaviors non mi crea il calendario, va la funzione attach ma il calendario no.... ora la situazione è questa:
Contenuto del file ricercadataset.libraries.yml
date-picker:
js:
js/site-datepicker.js : {}
js/calendario.js : {}
dependencies:
- core/jquery
- core/jquery.ui.datepicker
stilericerca:
css:
layout:
css/stile.css : {}
Contenuto file datepicker.js:
var contatore=0;
function provaclick(){
if(contatore==0){
document.getElementById("edit-datamodifica").style.display="inline";
document.getElementById("edit-ordinamento").style.display="inline";
document.getElementById("edit-frequenza").style.display="inline";
contatore=1;
}
else if(contatore==1){
document.getElementById("edit-datamodifica").style.display="none";
document.getElementById("edit-ordinamento").style.display="none";
document.getElementById("edit-frequenza").style.display="none";
contatore=0;
}
return false;
}
console.log("sto qua 1");
console.log("sto qua 2");
console.log("sto qua 3");
//document.getElementById("edit-datamodifica").style.display="none";
//document.getElementById("edit-ordinamento").style.display="none";
//document.getElementById("edit-frequenza").style.display="none";
console.log("sto qua 4");
Contenuto file calendario.js:
Drupal.behaviors.customDatepicker = {
attach: function (context, settings) {
alert("sto qua 1");
jQuery(function () {
alert("sto qua 2");
jQuery("#edit-datamodifica").datepicker({
dateFormat: "yy-dd-mm",
altField: "input[data-drupal-selector=edit-datamodifica]",
altFormat: "yy-mm-dd"
});
});
}
};
adesso non entra in jQuery(function).... dove sto sbagliando ??
prova (function ($, Drupal)
prova
(function ($, Drupal) {
Drupal.behaviors.customDatepicker = {
attach: function (context, settings) {
$("#edit-datamodifica", context).datepicker({
dateFormat: "yy-dd-mm",
altField: "input[data-drupal-selector=edit-datamodifica]",
altFormat: "yy-mm-dd"
});
}
};
})(jQuery, Drupal);
provato cosi ma non ne vuole
provato cosi ma non ne vuole sapere uffaaaa....
(function ($, Drupal) {
Drupal.behaviors.customDatepicker = {
attach: function (context, settings) {
alert("ok");
$("#edit-datamodifica", context).datepicker({
dateFormat: "yy-dd-mm",
altField: "input[data-drupal-selector=edit-datamodifica]",
altFormat: "yy-mm-dd"
});
}
};
})(jQuery, Drupal);
non riesco proprio a capire il perchè
Adesso sta facendo qualcosa,
Adesso sta facendo qualcosa, ma nella console del browser ho i seguenti messaggi
Uncaught TypeError: Cannot read property 'top' of undefined
at o.show (bootstrap-italia.js:14528)
at HTMLAnchorElement.<anonymous> (bootstrap-italia.js:14528)
at HTMLAnchorElement.dispatch (jquery.min.js?v=3.2.1:3)
at HTMLAnchorElement.q.handle (jquery.min.js?v=3.2.1:3)
o.show @ bootstrap-italia.js:14528
(anonymous) @ bootstrap-italia.js:14528
dispatch @ jquery.min.js?v=3.2.1:3
q.handle @ jquery.min.js?v=3.2.1:3
non ho capito bene cosa devo fare...
Commentando queste righe di
Commentando queste righe di codice non ho l'errore di prima...
/*$("#edit-datamodifica").datepicker({
dateFormat: "yy-dd-mm",
altField: "input[data-drupal-selector=edit-datamodifica]",
altFormat: "yy-mm-dd"
});
*/
errore di libreria ?
Mi arrendo sulla tua
Mi arrendo sulla tua installazione :) .. l'ho anche provato in locale e il codice funziona senza problemi.
In bocca al lupo!
Ehm lo so, pure io provata in
Ehm lo so, pure io provata in locale su un'altra installazione di drupal versione 8.8.5 e mi funziona sempre problemi.... ma la devo far funzionare sul progetto che mi hanno dato sempre drupal 8 ma come theme bootstrap bario può c'entrare qualcosa ?
Leggevo questo
Leggevo questo link
https://www.drupal8.support/en/modules/date-popup
devo provare a vedere se è installato il modulo per html 5 ?
Una domanda per vedere se ci
Una domanda per vedere se ci sta già qualche libreria presente nel tema che usa il calendario e cose simili come devo cercare ?