ajax et cakephp, bootstrap

romses
CakePHP

salut,

je suis débutant en l'utilisation de cake, en effet j'ai un formulaire d'enregistrement d'un nouvel user ou il doit fournir son nom,prenom, pseudo password, mon soucis est que j'aimerai que lorsque l'utilisateur saisi le pseudo qu'une requete ajax soit envoyé directement au serveur pour vérifier si le pseudo qu'on vient d'entrée est déja utiliser par un autre user. depuis ma vew voici ce que je fait:

<div class="panel panel-primary">
<div class="panel-heading">
    <h3 class="panel-title">Informations personnelles</h3>
  </div>
 <div class="panel-body">
<?php

echo $this->Form->create('utilsateur', array('class'=>'form-inline','id'=>'nouvel_user','fieldset'=>array('legend'=>'Nouvel user')));?>
<div class="col-md-10 line-input"><?php 
echo $this->Form->input('nom_user', array('label'=>'Votre Nom &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','class'=>'form-control','placeholder'=>'Votre nom','required'=>true));?></div>
<div class="col-md-10 line-input"><?php
echo $this->Form->input('prenom_user', array('label'=>'Votre Prénom &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','class'=>'form-control','placeholder'=>'Votre prénom','required'=>true));
?></div>
<div class="col-md-10 line-input"><?php
echo $this->Form->input('pseudo_user', array('label'=>'Votre Pseudo &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','id'=>'id_pseudo','class'=>'form-control','placeholder'=>'Votre Pseudo','required'=>true,'type'=>'text','onChange'=>'
$.get(
        '. $this->Html->url(array('controller'=>'Inscriptions','action'=>'user_existajax'), true) .', 
        {
            id: $("#id_pseudo").val()
        },
        function(data)
        {
            var obj=jQuery.parseJSON(data);
        }
    );
return false;

    '));
?></div>
<div class="col-md-10 line-input"><?php
echo $this->Form->input('password_user', array('label'=>'Votre Password &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','class'=>'form-control','placeholder'=>'Votre mot de passe','required'=>true,'type'=>'password'));
?></div>
<div class="col-md-10 line-input"><?php
echo $this->Form->input('sexe_user', array('label'=>'Votre Sexe &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','class'=>'form-control','placeholder'=>'Votre sexe','required'=>true,'options'=>array('Masculin','Feminin'),'empty'=>'(Choississez)'));
?></div>
<div class="col-md-10 line-input"><?php
echo $this->Form->input('telephone_user' ,array('label'=>'Votre Numéro de téléphone &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','class'=>'form-control','placeholder'=>'Votre Numéro de téléphone','required'=>true,'type'=>'tel'));
?></div>
<div class="col-md-10 line-input"><?php
echo $this->Form->input('email_user', array('label'=>'Votre addresse email &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','class'=>'form-control','placeholder'=>'Votre addrsse email','required'=>true,'type'=>'email','error'=>array('attributes'=>array('class'=>'warning'))));
?></div>
<div class="col-md-10 line-input"><?php
echo $this->Form->input('datenaissance_user', array('label'=>'Votre Date de naissance &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','class'=>'form-control','type'=>'date','placeholder'=>'Votre Date de naissance','required'=>true,'dateFormat'=>'YMD','minYear'=>date('y')-1,'maxYear'=>date('y')-12));
?></div>
<div class="col-md-10 line-input"><?php
echo $this->Form->input('fonction_user', array('label'=>'Votre Fonction &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','class'=>'form-control','placeholder'=>'Votre Fonction','required'=>true,'type'=>'text'));
?></div>
<div class="col-md-10 line-input"><?php
echo $this->Form->input('addresse_user', array('label'=>'Votre Addresse &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;','class'=>'form-control','placeholder'=>'Votre Addresse','required'=>true,'type'=>'text'));
?></div>

<div class="col-md-10 line-input"><p ><?php
echo $this->Form->button('Suivant', array('type'=>'submit','class'=>'btn btn-primary '));
echo $this->Form->button('Annuler', array('type'=>'reset','class'=>'btn btn-default ')); 

echo $this->Form->end();

?></p>
</div>
</div>
</div>
<div class="clearfix"></div>

et dans mon firebug rien n'est affiché j'ai l'impression que les données n'ont jamais été transmit, je veus dire que la requête ajax ne passe pas

pardon quelqu'un à une idée?

5 réponses

romses
Auteur

dans longlet réseaux rien ne se passe pas de requête transmise . or dans ma vew j'ai bien chargé le jquery

<!DOCTYPE HTML>
<html lang="fr">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>
            <?php echo $title_for_layout; ?>
        </title>
        <?php
        echo $this->Html->css('bootstrap');
        echo $this->Html->css('stylesite');
        echo $this->Html->css('bootstrap-theme');
        echo $this->Html->script('jquery.js');
     echo $this->Html->script('script_js');

      echo $this->fetch('script');

        echo $this->Html->meta('icon');
        echo $this->fetch('meta');
        echo $this->fetch('css');

    ?>
    </head>
    <body>
  <div class="container-fluid">

    <?php
    echo $this->element("header_zone");

    ?>

          <div class="header-content ">
    <div class="container">
      <div class="row">
        <div class="col-md-12"> 

            <div class="bloc-header">
              <?php echo $this->Session->flash(); ?>

            </div>

        </div>

        </div>
      </div>
      </div>
      <div class="body-content">
      <div class="container">
      <section class="row">
        <article class="col-xs-12 col-md-9"> 

          <div class="content-article">
            <?php
           echo $this->element("content_article");
            echo $this->fetch("content");
          ?>

              </div>

        </article>
        <aside class="col-md-3">

        <div class="content-aside">
             <?php
        echo $this->element("content_aside_zone");

        ?>
            </div>

        </aside>

      </section>

    </div>

  <div class="container">
    <div class="row">
        <div class="col-md-12">
            <?php
          echo $this->element("content_bottom");
          ?>

        </div>
    </div>
  </div>
  </div>

  <div class="pied-page">
     <div class="container">
    <?php
    echo $this->element("content_footer");
    ?>
  </div>
  </div>
  <?php 
      //echo $this->Html->script('bootstrap.min.js');

      echo $this->fetch('script');

  ?>
    </body>

</html>
Ch0c4

Salut, Essaye à la place de "onChange" de mettre "onchange"

romses
Auteur

jusque la rien,
aussi lorsque j'insert un composant bootstrap pour utiliser javascript rien ne se passe 


                                  <button data-toggle="modal" data-backdrop="false" href="#infos" class="btn btn-primary noConflict">Informations</button>
Ch0c4

As-tu des erreur dans la console chrome ou firefox ?
As tu bien ajouté les liens de jquery et bootstrap ?

romses
Auteur

voici un exemple dans uneautre page

<!DOCTYPE HTML>
<html lang="fr">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>
            <?php echo $title_for_layout; ?>
        </title>
        <?php

   echo $this->element("style_membre");

    ?>
    </head>
    <body>
          <div class="page">

                <div class="container-fluid barre-header">

                      <div class="row">
                            <div class="col-lg-12 clo-xs-12 col-sm-12 col-md-12">

                                <div class="col-sm-3 col-xs-2 col-md-2 col-lg-2">

                      <?php echo $this->Html->image('logo_networksolution.png', array('alt'=>'Boileau')); ?>
                                </div>
                                 <div class="col-sm-3 col-xs-4 col-md-4 col-lg-4">dasboard</div>
                                  <div class="col-sm-3 col-xs-2 col-md-2 col-lg-2">

                                      <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

                                  </div>
                                   <div class="col-sm-3 col-xs-4 col-md-4 col-lg-4">

                                   <div class="row">

                                     <div class="col-md-2 col-lg-2">icone</div>
                                     <div class="col-md-4 col-lg-4 image-prophile">
                                     <?php echo $this->Html->image('bob-principal.gif', array('alt'=>'profile','class'=>'img-circle','width'=>50,'height'=>50)); ?>
                                     </div>
                                     <div class="col-md-2 col-lg-2 profil-config">profil</div>
                                     <div class="col-md-4 col-lg-4">icone</div>
                                   </div>

                                   </div>

                            </div>
                      </div>

                </div>
                 <div class="container-fluid barre-header-bottom">

                </div>
                <div class="container-fluid barre-header-title">

                </div>
                 <div class="container-fluid body-content">

                     <section class="row">
                       <aside class="col-lg-3 col-md-2 col-sm-2 col-xs-2">

                         <div class="col-lg-12">
                           <ul class="list-group">
                             <a href="#" class="list-group-item active">
                               <span class="glyphicon glyphicon-chevron-right pull-right "></span>
                               Premier menu

                             </a>
                             <a href="#" class="list-group-item ">
                               <span class="glyphicon glyphicon-chevron-right pull-right "></span>
                               Premier menu

                             </a>
                             <a href="#" class="list-group-item">
                               <span class="glyphicon glyphicon-chevron-right pull-right "></span>
                               Premier menu

                             </a>
                             <a href="#" class="list-group-item ">
                               <span class="glyphicon glyphicon-chevron-right pull-right "></span>
                               Premier menu

                             </a>
                             <a href="#" class="list-group-item ">
                               <span class="glyphicon glyphicon-chevron-right pull-right "></span>
                               Premier menu

                             </a>
                              <a href="#" class="list-group-item ">
                               <span class="glyphicon glyphicon-chevron-right pull-right "></span>
                               Premier menu

                             </a>
                              <a href="#" class="list-group-item ">
                               <span class="glyphicon glyphicon-chevron-right pull-right "></span>
                               Premier menu

                             </a>

                           </ul>

                         </div>

                       </aside>
                       <article class="col-lg-6 col-md-8 col-sm-8 col-xs-8">

                          <div class="header-content">

                          </div>
                          <div class="panel panel-primary">

                                  <div class="panel-heading">
                                       <h3 class="panel-title">
                                         Bienvenue dans votre tableau de bord

                                       </h3> 

                                </div>
                                <div class="panel-body">
                            <?php
                                         echo $this->fetch("content");
                                         ?>

                                  </div>

                          </div>

                       </article>
                       <aside class="col-lg-3 col-md-2 col-sm-2 col-xs-2">
                          <div class="col-md-12">
                            zone right

                          </div>

                       </aside>

                     </section>

                </div>
                <footer class="container-fluid pied-page">footer</footer>

          </div>  
          <?php echo $this->Html->script('jquery.min');
                echo $this->Html->script('bootstrap.min');

                echo $this->fetch('script');
           ?>
    </body>

</html>

et dans la vew je fait ceci
<?php
        echo $this->Html->css('bootstrap');
        echo $this->Html->css('stylesite');
        echo $this->Html->css('bootstrap-theme');
        echo $this->fetch('css');
        echo $this->Html->script('jquery.min');
        echo $this->Html->script('bootstrap.min');
        echo $this->Html->script('script_js');
        echo $this->fetch('script');

        echo $this->Html->meta('icon');
        echo $this->fetch('meta');

?>

jusque la pas de réaction jquery

par contre lorsque je fait du javascript cela fonctionne bien