Pourquoi ce code ne fonctionne pas ??

The-Devil
CakePHP

Bonjour, suite à mon précédent sujet concernant l'envoi d'une variable à un modal bootstrap, j'ai trouvé un code faisant EXACTEMENT ce que je recherchais. Sauf que ce code ne fonctionne pas lorsque je le test en local.
Voici le lien fiddle du code: Texte du lien
Pour tester ce code j'ai placer un lien

<?php echo $this->Html->script('test');?>

pointant sur le fichier ('js/test.js') dans "webroot". Le fichier test.js contien le code js du fiddle. Et j'ai tester le tout sur une vue bidon..
Les boutons s'affichent, mais lorsque je clique, rien ne s'affiche dans le input..? :(
Please help, ce problème me désespère !!

Merci d'avance

13 réponses

Maenhyr
Réponse acceptée

Voici le code testé, j'y ai mis les dernières versions de jQuery et Bootstrap.
Tout fonctionne de mon côté.

http://jsfiddle.net/Au9tc/4/

Maenhyr
Réponse acceptée

Essaye d'optimiser ton chargement de script :

Bootstrap propose une version minifiée de ses plugins JS, tu devrais l'utiliser. De même pour le CSS si tu ne le modifies pas. Cela permettra un chargement de page plus rapide.

De plus essaye d'uniformiser au maximum ton développement, CakePHP propose des balises de script, le mieux est de les utiliser.

<?php echo $this->Html->script('jquery'); ?>
    <?php echo $this->Html->script('less'); ?>
    <?php echo $this->Html->script('bootstrap-transition'); ?>
    <?php echo $this->Html->script('bootstrap-modal'); ?>
    <?php echo $this->Html->script('bootstrap-dropdown'); ?>
    <?php echo $this->Html->script('bootstrap-scrollspy'); ?>
    <?php echo $this->Html->script('bootstrap-tab'); ?>
    <?php echo $this->Html->script('bootstrap-tooltip'); ?>
    <?php echo $this->Html->script('bootstrap-popover'); ?>
    <?php echo $this->Html->script('bootstrap-button'); ?>
    <?php echo $this->Html->script('bootstrap-collapse'); ?>
    <?php echo $this->Html->script('bootstrap-carousel'); ?>
    <?php echo $this->Html->script('bootstrap-transition'); ?>
    <?php echo $this->Html->script('bootstrap-typeahead'); ?>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <?php echo $this->Html->script('zoombox'); ?>
     <script type="text/javascript">
        jQuery(function($){
            $('a.zoombox').zoombox();
        });
        </script>

devient 

<?php echo $this->Html->script(array(
    'jquery-1.9.1.min',
    'bootstrap-2.3.1.min',
    'zoombox'
)); ?>
<?php echo $this->fetch('script'); ?> // permet de charger des scripts appelés dans une vue précise
<?php echo $this->Html->scriptStart(); ?>
    jQuery(function($){
        $('a.zoombox').zoombox();
    });
<?php echo $this->Html->scriptEnd(); ?>

Ensuite dans ta vue, il faudra veiller à utiliser l'option inline => false dans ton tag script.

Exemple : 

<?php echo $this->Html->scriptStart(array('inline'=>false)); ?> // ici le code va se charger au niveau du <?php echo $this->fetch('script'); ?> du layout
jQuery(function($){
    $(document).on("click", ".open-AddBookDialog", function () {
        var myBookId =$(this).attr('data-id');
        console.log(myBookId);
        $(".modal-body #bookId").val(myBookId);
        $('#addBookDialog').modal('show');
    });
});
<?php echo $this->Html->scriptEnd(); ?>

Tu éviteras ainsi le problème d'ordre de chargement des scripts JS.

Maenhyr

Salut,
Essaye en remplaçant ça :

var myBookId = $(this).data('id');

par 

var myBookId = $(this).attr('data-id');
The-Devil
Auteur

Salut,

@prbaron: ça ne marche pas.. La version du bootstrap utilisé dans fiddle est bootstrap2.0.2 la mienne est la plus récente (2.3.1) Ce qui explique peut-être pourquoi ça ne fonctionne pas ... -.-'
Y'a t-il un autre moyen que le code du fiddle pour envoyer des données dans un champs input du modal. Car dans mon projet, le but est que l'argument passé en paramètre au bouton s'affiche dans un champs form du popup modal de bootstrap.

Cordialement,

The-Devil

Maenhyr

Etrange, je viens de faire le test avec la v2.3.1 et tout fonctionne chez moi.
Tu peux initialiser une variable JS avec du PHP :

<script type="text/javascrpt">
    var maVariable = <?php echo $getVariable; ?>
<script>

Du coup, si on reprend le code Fiddle, cela donnerait ceci: 

$(document).on("click", ".open-AddBookDialog", function () {
     $(".modal-body #bookId").val("<?php echo $getVariable; ?>");
    $('#addBookDialog').modal('show');
});
The-Devil
Auteur

@prbaron: Je suis prêt à mettre ma main au feu que l'erreur est un petit truc à la c** caché quelque part... mais quoi ??
Tu as bien éssayer le code du fiddle, sans modification ? et il fonctionnait ?

J'ai analysé sous la console de chrome mon site et j'ai une erreur js: Uncaught TypeError: Object [object Object] has no method 'on' line: 1
J'ai corrigé l'erreur en enlevant tous les appels js de mon layout et en mettant

<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('bootstrap-modal'); ?>
<script>
   $(document).bind("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val(myBookId);
    $('#addBookDialog').modal('show');
});
</script></body>

dans la vue "essai.ctp". Cette vue-la contient le code html du fiddle.
Et maintenant, en testant le tout, j'ai l'erreur suivant:
Uncaught TypeError: Object [object Object] has no method 'modal' essai:103
(anonymous function) essai:103
jQuery.event.dispatch jquery.js:3074
elemData.handle

??? Quelqu'un à une idée de ce que ça peut bien vouloir dire..?

Cordialement

Maenhyr

Peux tu nous montrer comment tu le charges dans ta page CakePHP ? As tu intégré ce code dans un ready() ?

Ta vue CakePHP devrait ressembler à ça :

<?php echo $this->Html->scriptStart(array('inline'=>false)); ?>
jQuery(function($){
    $(document).on("click", ".open-AddBookDialog", function () {
        $(".modal-body #bookId").val("<?php echo $getVariable; ?>");
        $('#addBookDialog').modal('show');
    });
});
<?php echo $this->Html->scriptEnd(); ?>

EDIT : Vu que tu as fais les modifs sur le post précédent, je peux te dire que ton code JS est chargé avant la librairie jQuery, d'où les erreurs. La méthode .ready() va te permettre de ne lancer ton code qu'APRES le chargement de jQuery et donc plus d'erreurs.

The-Devil
Auteur

Voici le code de ma vue "essai.ctp":

<body>
    <p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" data-toggle="modal" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<p> </p>

<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" data-toggle="modal" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>
<?php echo $this->Html->scriptStart(array('inline'=>false)); ?>
jQuery(function($){
    $(document).on("click", ".open-AddBookDialog", function () {
        var myBookId =$(this).attr('data-id');
        $(".modal-body #bookId").val(myBookId);
        $('#addBookDialog').modal('show');
    });
});
<?php echo $this->Html->scriptEnd(); ?>
</body>

Et ici le code de mon layout par défaut: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>en construction</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <link rel="stylesheet/less" href="<?php echo $this->Html->url('/css/responsive.less'); ?>">
    <link rel="stylesheet/less" href="<?php echo $this->Html->url('/css/bootstrap.less'); ?>">
    <?php echo $this->Html->css('zoombox');?>

    <style type="text/css">
      body {
       /* padding-top: 60px;
        padding-bottom: 40px;*/
      }
    </style>
    <!-- Obligé d'inclure ce fichier, autrement le deesign n'est pas responsive-->
    <link rel="stylesheet" href="<?php echo $this->Html->url('/css/bootstrap-responsive.css'); ?>">

  </head>
    <body><div class="container"><?php echo $this->Session->flash(); ?>
        <div class="header">
        <!-- Ici on appelle le menu qui est dans le dossier View/Elements/menu.ctp -->  
        <?php echo $this->element('menu'); ?>
        </div>

      <?php echo $content_for_layout; ?>

 <!--Ici on appel le footer-->
        <?php echo $this->element('footer'); ?> </div> <!-- /container -->
    <!-- Le javascript
    ================================================== -->
    <!-- On charge le javascript à la fin histoire que la page se charge plus vite -->

    <?php echo $this->Html->script('jquery'); ?>
    <?php echo $this->Html->script('less'); ?>
    <?php echo $this->Html->script('bootstrap-transition'); ?>
    <?php echo $this->Html->script('bootstrap-modal'); ?>
    <?php echo $this->Html->script('bootstrap-dropdown'); ?>
    <?php echo $this->Html->script('bootstrap-scrollspy'); ?>
    <?php echo $this->Html->script('bootstrap-tab'); ?>
    <?php echo $this->Html->script('bootstrap-tooltip'); ?>
    <?php echo $this->Html->script('bootstrap-popover'); ?>
    <?php echo $this->Html->script('bootstrap-button'); ?>
    <?php echo $this->Html->script('bootstrap-collapse'); ?>
    <?php echo $this->Html->script('bootstrap-carousel'); ?>
    <?php echo $this->Html->script('bootstrap-transition'); ?>
    <?php echo $this->Html->script('bootstrap-typeahead'); ?>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <?php echo $this->Html->script('zoombox'); ?>
     <script type="text/javascript">
        jQuery(function($){
            $('a.zoombox').zoombox();
        });
        </script> 

  </body>
</html>

Avec ces code là, je n'ai plus d'erreur(Merci prbaron :)) Mais ça marche toujours pas, le champs input reste vide :(

Cordialement,

Maenhyr

D'après la doc, ton lien remplit toutes les conditions pour lancer le modal sans JS. Du coup je me demande si ton code pourrait ne pas être appelé.
Essaye ceci :

<a data-id="ISBN564541" data-toggle="modal" title="Add this item" class="open-AddBookDialog btn btn-primary">test</a>

Et ceci 

<?php echo $this->Html->scriptStart(array('inline'=>false)); ?>
jQuery(function($){
    $(document).on("click", ".open-AddBookDialog", function () {
        var myBookId =$(this).attr('data-id');
        console.log(myBookId);
        $(".modal-body #bookId").val(myBookId);
        $('#addBookDialog').modal('show');
    });
});
<?php echo $this->Html->scriptEnd(); ?>

Ouvre une console web et dis nous ce qu'il affiche.

Pour ouvrir la console sur Google Chrome, tu fais un clic droit -> Inspecter l'élément et tu vas sur l'onglet Console.
Pour Firefox, tu fais Firefox -> Développement web -> Console web.

The-Devil
Auteur

@prbaron: Ton console.log n'affiche rien-->Donc myBookId ne possède pas de valeur ou est n'est pas interpréter..
Le modal donne toujours le même résultat-->rien..
Peut-être est-ce du à la dernière version de Jquery..?
Est-ce que cela fonctionnne de ton côté avec les dernières version de bootstrap - cakephp et jquery ??

The-Devil
Auteur

@prbaron: J'ai trouvé le problème -.-' c'était l'appel de jquery, j'en ai 2:
<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('less'); ?>
<?php echo $this->Html->script('bootstrap-transition'); ?>
<?php echo $this->Html->script('bootstrap-modal'); ?>
<?php echo $this->Html->script('bootstrap-dropdown'); ?>
<?php echo $this->Html->script('bootstrap-scrollspy'); ?>
<?php echo $this->Html->script('bootstrap-tab'); ?>
<?php echo $this->Html->script('bootstrap-tooltip'); ?>
<?php echo $this->Html->script('bootstrap-popover'); ?>
<?php echo $this->Html->script('bootstrap-button'); ?>
<?php echo $this->Html->script('bootstrap-collapse'); ?>
<?php echo $this->Html->script('bootstrap-carousel'); ?>
<?php echo $this->Html->script('bootstrap-transition'); ?>
<?php echo $this->Html->script('bootstrap-typeahead'); ?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
et mon script de fiddle venait juste en dessous de jquery/min/1.5.1
Ce qui fait qu'il ne fonctionnait pas. Mais bon maintenant j'ai un nouveau problème: ZoomBox ne fonctionne plus si je retire cette insertion:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Ah l'informatique :)
Enfin bon, merci infiniment pour ton aide prbaron

Cordialement,

The-Devil

The-Devil
Auteur

Thanks !!!!!!! :D
En ce qui concerne les js bootstrap, je les modifie, tout comme les "less" bootstrap..
Mais merci du conseil !!
Est-ce que tu connais un site sur lequel je puisse apprendre le js à part le sdz..?
Merci encore

Maenhyr

Il y a deux manières d'apprendre le JS, le premier c'est avec des tutos et le deuxième c'est en regardant le code d'autres développeurs. Le deuxième nécessite cependant des connaissances dans le langage avant.

Si tu veux apprendre le JS : http://www.codecademy.com/#!/exercises/0.
Si tu veux apprendre le jQuery : http://try.jquery.com/.

Si tu veux en apprendre plus sur le JS (les bonnes pratiques, les tests, ...) : http://net.tutsplus.com/.

Une fois que tu as plus de connaissances, n'hésite pas à fouiller différents sites, par exemple jQuery regorge de docs sur les standards jQuery, comment coder un plugin, ... .

Pour LESS, je ne suis pas fan du chargement du code avec le script, tu peux compiler tes fichiers LESS en local et ensuite proposer le CSS à l'utilisateur.

AVANTAGE :

  • L'utilisateur ne compilera pas le css à chaque changement de page donc gain en vitesse d'affichage et en compilation
  • Si tu as un soucis de code JS, les autres scripts peuvent ne plus se charger, du coup l'utilisateur peut ne plus avoir de CSS.
  • Tu travailles sur un fichier LESS et ton fichier CSS est toujours minifié, donc tu ne peux pas te tromper sur lors de l'édition du code CSS.
  • Tu peux n'uploader que le fichier CSS minifié et garder ton LESS en local, comme ça les utilisateurs ne pourront pas copier ton code CSS. (En réalité, c'est aussi faisable avec des fichiers css mais plus galère à automatiser).

INCONVENIENTS :

  • cela demande de versionner à la fois les fichiers LESS et les fichiers CSS (si tu utilises un SVN comme GIT ou Mercurial).

Tu as pas mal d'applis qui te permettent de compiler ton LESS en CSS à la volée, en voici un : http://crunchapp.net/.