ajax et cakephp, bootstrap

Par romses, il y a 11 ans


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, il y a 11 ans

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, il y a 11 ans

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

romses, il y a 11 ans

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, il y a 11 ans

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

romses, il y a 11 ans

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