action sur une vue html générée avec ajax

Par romses, il y a 10 ans

Javascript

salut à tous, j'utilise le framework cakephp 2.7 mais mon problème est plus jquery.
en effet j'utilisé de l'ajax pour générer une vue (page html) mais lorsque la vue est généré, je n'arrive plus à accéder a un élément de la page avec du jqry, impossible de sélectionnez un element dom aucune action ne repond voici un exemple de code. la page généré est :

<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Liste des élèves de la classe : &nbsp;&nbsp;<span class="badge classestudent"> <?php echo $calsseAllstudent; ?></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span> Nombre Total d'élève <span class="badge"><?php echo $nbre_eleve; ?></span></span></h3> </div> <div class="panel-body"> <td><?php $i = 1; ?></td> <table class="table table-bordered"> <tr class="active"> <td><strong>#</strong></td><td><strong>Nom</strong> </td><td><strong>Prénom</strong></td><td><strong>Note obtenu</strong></td> </tr> <?php foreach ($listeeleve as $key => $eleve): ?> <tr> <td><?php echo $key +1 ; ?></td> <td><?php echo $eleve['Student']['nom']; ?></td> <td><?php echo $eleve['Student']['prenom']; ?></td> <td> <?php echo $this->Form->input('noteobtenu', array('label' => '','class'=>'form-control classmatiere noteeleve','type' => 'text')); ?> </td> </tr> <?php endforeach; ?> <?php unset($eleve); ?> </table> <div class="line-input"> <p> <?php echo $this->Form->button(' Sauvegarder', array('class'=>'btn btn-primary btn-submit glyphicon glyphicon-ok bt-submit-attribution btnsendform','type' => 'submit','id' =>'sendform')); echo $this->Form->button(' Annuler', array('type'=>'reset','class'=>'btn btn-default btn-reset glyphicon glyphicon-refresh')); ?> </p> </div> <?php echo $this->Form->end();?> </div> <div class="panel-footer"></div> </div>

cette page est générer grace à cette fonction

$(function() { $('.listclass').change(function() { var id = $('#idfiliere').val(); $.get('index', {id}, function(data) { $('.contenu-form').empty().append(data); } ); return false; } ); });

une fois générer j'aimerai pouvoir valider mon formulaire lorsque l'on aimerai faire un submit
ainsi:

$(function() { $("#formstudent").validate({ rules: { noteobtenu: "required", lastname: "required" }, messages: { noteobtenu: "Please enter your note", } }); } );

cela n'obeit a aucun evènement une fois lorsue l'on fait un click, les informations sont envoyer sans être testées. j'aimerai savoir si est ce possible de sélectionner de nouveau un element généré par jquery?si oui comment procéder?

16 réponses

romses, il y a 10 ans

le fait de génére une page avec de l'ajax vérouille automatique ment la page? (empêche les évènement ajax d'agir encor)

romses, il y a 10 ans

oui mikael, c'est exactement cela

Si j'ai bien compris, ton problème, c'est que tu perd la possibilité de faire un nouvel appel ajax une fois que tu as généré ta vue ?

mikael, il y a 10 ans

Salut,

Si j'ai bien compris, ton problème, c'est que tu perd la possibilité de faire un nouvel appel ajax une fois que tu as généré ta vue ?

betaWeb, il y a 10 ans

Salut,

Utilises la fonction on() de jquery sur tes éléments:

Par exemple:

$('#elem').on('change', function(){...});
betaWeb, il y a 10 ans

@mikael "délégation d'évenements" c'est le terme que je cherchais ^^

romses, il y a 10 ans

je viens de le faire mais rien voici le code que j'ai ajouter pour faire le test

$(function() $('.btnsendform').on('click',function() { alert('ok'); }); );

voici la vue généré ou je veus appliqué l'action du click

<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Liste des élèves de la classe : &nbsp;&nbsp;<span class="badge classestudent"> <?php echo $calsseAllstudent; ?></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span> Nombre Total d'élève <span class="badge"><?php echo $nbre_eleve; ?></span></span></h3> </div> <div class="panel-body"> <td><?php $i = 1; ?></td> <table class="table table-bordered"> <tr class="active"> <td><strong>#</strong></td><td><strong>Nom</strong> </td><td><strong>Prénom</strong></td><td><strong>Note obtenu</strong></td> </tr> <?php foreach ($listeeleve as $key => $eleve): ?> <tr> <td><?php echo $key +1 ; ?></td> <td><?php echo $eleve['Student']['nom']; ?></td> <td><?php echo $eleve['Student']['prenom']; ?></td> <td> <?php echo $this->Form->input('noteobtenu', array('label' => '','class'=>'form-control noteeleve','type' => 'text','required' => true)); ?> </td> </tr> <?php endforeach; ?> <?php unset($eleve); ?> </table> <div class="line-input"> <p> <?php echo $this->Form->button(' Sauvegarder', array('class'=>'btn btn-primary btn-submit glyphicon glyphicon-ok bt-submit-attribution btnsendform','type' => 'submit','id' =>'sendform')); echo $this->Form->button(' Annuler', array('type'=>'reset','class'=>'btn btn-default btn-reset glyphicon glyphicon-refresh')); ?> </p> </div> <?php echo $this->Form->end();?> </div> <div class="panel-footer"></div> </div>

toujours rien

mikael, il y a 10 ans

Le problème ici, c'est que tu attaches l'événement directement sur le bouton et lorsque le contenu est remplacé, l'événement disparait avec.
Il faudrait plutôt que tu attaches ton événement sur le conteneur du html généré en ajax.

Ce qui donnerai :

$('.contenu-form').on('click', '.btnsendform', function() { alert('ok'); });

Avec le code ci-dessus, lorsque tu cliques sur btnsendform, l'événement click bouillionera (remontera à travers l'arbre du DOM) et quand contenu-form recevra cet événement, ta fonction sera alors executée.

En espérant avoir été clair ;)

romses, il y a 10 ans

merci Mikael, mais toujours rien voici ce que je met pour m'assuré de l'ecoute:

$(function() { $(document).on('click', '.btnsendform', function() { alert('ok'); }); } );
romses, il y a 10 ans

merci MIKAEL, mais toujours rien avec ce code. Mais je suis unpeu curieux parceque lorsque j'utilise les attribut html5 required = true,
çela fonctionne très bien mais je ne comprends pas le pourquoi l'action click ne fonctionne pas

mikael, il y a 10 ans

Essaies de remplacer $('.contenu-form') par $(document) dans le code que je t'ai donné.

Spiker, il y a 10 ans

Essaye quelque chose comme ça :

$(function() { $('.listclass').change(function() { var id = $('#idfiliere').val(); $.get('index', {id}, function(data) { $('.contenu-form').empty().append(data); setTimeout(function(){ $(document).on('click', '.btnsendform', function() { $("#formstudent").validate({ rules: { noteobtenu: "required", lastname: "required" }, messages: { noteobtenu: "Please enter your note", } }); }); }, 0); }); return false; }); });
romses, il y a 10 ans

Merci , Spike mais cela ne fonctionne pas. Je ne sais pas si tu m'as suivit en effet lorsque je clik, j'ai dans les données posté auf les notes remplis or je veus aussi avoir les paramètre de configuration des menus (sequences_id,filieres_id,matieres_id) posté

Spiker, il y a 10 ans

Oui j'ai bien compris, d'ou la fonction setTimeout(function(){
}, 0);

Cela permet de lancer ce qu'il y a dedans après que le DOM ait finis d'etre chargé. Je pense que le problème viens du fait que ton dom n'est pas encore chargé quand il tente de valider t'es données.

As-tu des erreurs js? car le code que je t'es copié, je l'ai fais rapidement de tête sans tester (vus que j'ai pas t'es fichiers)

romses, il y a 10 ans

non j'ai pas d'erreur cela passe très bien. j'ai juste le tableau des notes qui est envoyé mais pas avec les paramètres

FactureHero.com, il y a 10 ans

Essaye ceci :
1 D'utiliser en effet comme dit plus haut le document et la fonction On :

$(document.body).on('click', '.tonElementClikable', function() { // Générer la vue });

2 Génère ta vue avec un .html() plutôt qu'un append()

$('.contenu-form').empty().html(data);

3 Essaye d'agir à nouveau sur le contenu généré en sélectionnant l'élément que tu veux écouter avec :

$(document.body).on('click', '.tonElement', function() { // Faire ici ce que tu veux });

Théoriquement avec cette méthode, ça fonctionne, on peut manipuler du contenu généré en Jquery préalablement.
en espérant que ça puisse t'aider.