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

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)

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 ?

Salut,

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

Par exemple:

$('#elem').on('change', function(){...});

Comme le dit betaWeb la solution serait d'utiliser la délégation d'événements avec la fonction on(), il y a un tuto de grafikart à ce sujet http://www.grafikart.fr/tutoriels/jquery/jquery-on-events-518

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

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 ?

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

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 ;)

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

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

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

$(function()

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

  );

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; 
      });  
});

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é

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)

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

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.