Datepicker jquery - Githubissues

bellisa03 commented 7 years ago

Hello Michael,

Donc dans mon dernier commit: https://github.com/bellisa03/tophit/commit/f4991d2902bf724f07f9ab93b7358791e19cf9dd

Tentatives infructueuses de faire fonctionner un jquery. Est-ce qu'il me manque la référence d'un script? Est-ce que je dois utiliser composer?

Je l'ai testé dans la vue suivante: src/Template/Polls/edit.ctp (J'ai essayé plusieurs fonctions différentes, plusieurs glyphicons...)

Il y a aussi des références de scripts dans le default bien sûr: https://github.com/bellisa03/tophit/blob/master/src/Template/Layout/default.ctp

Voilà, ce serait cool si tu sais y jeter un oeil ;-)

:-*

michael-lurquin commented 7 years ago

Premier problème que je vois, c'est la classe utilisé pour le glyphicon, tu as mis :

<span class="fa-calendar-o:before"></span>

Alors que cela devrait être :

<span class="fa fa-calendar-o"></span>

Mais je pense qu'il te manque quelques fichiers pour afficher les glyphicons de Font-Awesome, moi j'en ai 6 alors que tu n'en as que 3, il y a déjà un problème. Sinon, ce que tu peux faire c'est inclure la CSS Font-Awesome directement depuis leurs serveurs (sans la télécharger et à mettre dans ton Template/Layout/default.ctp), comme ceci :

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>

Ensuite, tu as besoin de télécharger les librairies de DatimePicker, donc tu as besoin de rajouter ceci dans ton Template/Layout/default.ctp :

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

Si tu ne le fais pas, tu peux afficher les erreurs de Javascript dans la console, c-à-d sur Chrome (que je pense que tu as, sinon sur Firefox s'est pareil "Outils de développeurs" et puis tu as un onglet "Console" et c'est là qu'apparaîtrons toutes les erreurs JS) :

Normalement pour le moment tu devrais avoir une erreur du style datetimepicker() function undefined, si tu inclus les librairies que je t'ai indiqué l'erreur disparaîtra.

michael-lurquin commented 7 years ago

Si tu as encore des problèmes, alors il me faudra un dump de ta base de données, car je ne sais pas accéder à la page dite sans identifiants et sans DB !

bellisa03 commented 7 years ago

Cool! Merci, je vais déjà regarder à tout ça. Pour le glyphicon, j'ai essayé plusieurs trucs qui n'ont pas fonctionnés... Mais bon, si il me manque déjà la bonne librairie à la base, ça risquait de toute façon pas de marcher ;-)

En tout cas, un tout grand merci pour ton aide, tu m'apprends déjà pas mal de trucs! Je te tiens au courant, et je t'envoie un dump si jamais ! :-*

bellisa03 commented 7 years ago

@michael-lurquin Alors...

J'ai dû mettre les scripts date picker et autres jquery au début de ma vue "default", parce que sinon il n'avait pas accès à l'info au moment voulu (pourtant, ils mettent exprès les scripts js en fin de template pour ne pas ralentir le chargement de la page... bref ;-) )...

J'arrive maintenant à avoir un datepicker... qui fonctionne pas super (il faudra que je regarde à la configuration des min et max date, et à faire fonctionner la sauvegarde en DB). Mais bon, c'est déjà ça ;-)

J'ai malgré tout un problème avec le font-awesome. J'ai le message suivant sur la console:

J'ai essayé ton lien... ça n'a pas fonctionné. J'ai peut-être loupé un truc quelque part? Pour les fichiers manquants, il y en a qui ne passe pas dans le github, je ne sais pas pourquoi... Voici un printscreen de mon arborescence avec les fichiers présents:

Je me demande si le souci n'est pas une question de version du fontawesome. Quand tu télécharges le template sur gettemplate.com, tu as dans le fichier font-awesome.min.css plusieurs références du genre (j'ai aussi testé en changeant le chemin en chemin absolu pour être sûre)

Alors que dans le fichier fontawesome-webfont.eot, la référence est la suivante: Donc, est-ce qu'il n'y a pas un souci avec d'un côté 4.0.2 d'un côté et du 4.0.3 de l'autre?

Bref, si tu as envie de tester avec la BD, voici un dump comme promis:

tophit.zip

Bizzzz et mille mercis d'avance :-)

bellisa03 commented 7 years ago

voilà, je t'ai envoyé un dump. Si tu as l'occasion c'est cool... Mais si jamais pas de souci, j'embêterai les profs jeudi ;-)

Merci merci! Bizzzz et bonne fin de week-end.

Ps: mot de passe de tous les users de la BD, je me suis pas cassé la tête : test

2017-01-15 14:26 GMT+01:00 LURQUIN Michaël notifications@github.com:

Si tu as encore des problèmes, alors il me faudra un dump de ta base de données, car je ne sais pas accéder à la page dite sans identifiants et sans DB !

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/bellisa03/tophit/issues/1#issuecomment-272695109, or mute the thread https://github.com/notifications/unsubscribe-auth/ATLjw-3O_HcDieODwQjFTHqFlz6lD8hJks5rSh6igaJpZM4Lj4mf .

michael-lurquin commented 7 years ago

Je ne sais pas pourquoi tu n'arrives pas à mettre sur GIT les fichiers du dossier fonts !

Solution

Bref, le problème jQuery, c'est normal il faut que la librairie jQuery soit chargée avant tout appel jQuery et pour résoudre ton problème je te propose de faire une section scripts et styles, comme ceci :

Fichier edit.ctp :

<?= $this->start('styles') ?>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<?= $this->end() ?>

<?= $this->start('scripts') ?>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
          $('#datetimepicker2').datetimepicker({
              locale: 'fr'
          });
      });
    </script>
<?= $this->end() ?>

Dans le fichier default.ctp, en dessous de la ligne qui injecte la librairie Font-Awesome, mettre :

<?= $this->fetch('styles') ?>

Et tout à la fin de tes scripts mettre :

<?= $this->fetch('scripts') ?>

Ainsi on va créé une section scripts et styles dans le template général et injecter du contenu dans ces sections depuis la page edit.ctp. De cette façon on injecte du CSS et JS uniquement pour les pages spéciales et non partout (comme on pourrai le faire mais alors soucis de performances) !

Pour les erreurs que tu as dans la console, c'est normal car il te manque des fichiers de fonts pour les Glyphicons (attention tu en charges 2, celles de Bootstrap et de FontAwesome).

Pour Bootstrap, tu peux télécharger le bootstrap complet et récupérer le dossier fonts et y mettre les fichiers dans ton dossier fonts, à cette adresse : https://github.com/twbs/bootstrap/archive/v3.3.7.zip
Pour FontAwesome, même chose à cette adresse : http://fontawesome.io/assets/font-awesome-4.7.0.zip

Il vaut mieux toujours récupérer les fichiers sur leurs site originaux que sur gettemplate.com. Mais si tu ne souhaites pas t'embêter avec tout ça, tu peux simplement utiliser les fichiers CSS de bootstrap et fontawesome directement depuis leurs serveurs (et ne pas les télécharger et utiliser localement) :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7">
<link rel=stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">

Une fois que tu auras télécharger ces fichiers-là et après les avoir mis au bon endroit, tu pourras bien sûr supprimer la ligne :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Pour les erreurs de références

Ce sont les fonts qui se trouve dans le dossier fonts qui DOIT être juste à côté du dossier css sinon ça ne fonctionne pas et bien sûr il faut qu'il y ait toutes les fonts de FontAwesome, qui se trouve dans le lien que je t'ai donné. En gros tu dois avoir une arborescence plus ou moins comme celle-ci (arborescence d'un autre de mes projets et donc qui ne doit pas réellement refléter la même chose chez toi, mais c'est le minimum que tu dois avoir) :

Si ça ne vas pas, je peux faire les modifications et tu mettre à jour simplement ton repo de ton côté.

michael-lurquin commented 7 years ago

J'allais oublier, la ligne pour l'icône du calendrier doit-être :

<span class="fa fa-calendar-o"></span>

Sinon, ça ne fonctionne pas ! Maintenant à toi choisir l'icône qu'il te convient, perso j'aurai pris l'icône sans le -o, à toi de voir l'icône qui te convient depuis la liste officiel : http://fontawesome.io/icons/ (et tu tapes calendar dans la barre de recherche)

michael-lurquin commented 7 years ago

Et si tu souhaites avoir un input plus joli, comme ceci : Tu dois faire :

<div class="form-group">
    <?= $this->Form->label('begindate', 'Début')?>
    <div class='input-group date' id='datetimepicker2'>
        <?= $this->Form->input('begindate', ['type' => 'text', 'label' => false])?>
        <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
        </span>
    </div>
</div>

bellisa03 commented 7 years ago

@michael-lurquin Waouhh!!! Tu es ma lumière au bout du tunnel :-P ;-) Je vais regarder à tout ça!!

Encore un TOUT grand merci!! :-*

bellisa03 commented 7 years ago

@michael-lurquin CA FONCTIONNE!! :-P Merci! :-*

bellisa03 / tophit

Datepicker jquery #1

Solution

Pour les erreurs de références