Un peu de jquery ajax

Bonjour,

Ayant recemment eu la folle envie d'utiliser un peu d'ajax sur mon site pour dynamiser un peu l'ensemble je me retrouve face à un problème.

Dans la page de gestion des utilisateurs, l'admin possède la possibilité de changer le grade d'un utilisateur via le form ci-dessous :

<form id="editer_titre" method="post">
    <input class="submit" type="submit" name="editer_titre" value="Editer">
    <input type="hidden" id="user_id"  value="9">
    <input type="hidden" id="user_pseudo" value="Guiges3">
  </form>

Avec ce code, je gère l'event quand on clique sur "Editer" :

$('#editer_titre').click(function() {
   if($("#action_editer_titre").length == 0)
  {
    $.post( "edit_user_title.php", { id : $("#user_id").val(), pseudo : $("#user_pseudo").val()}, function(data) { $("#title_list_users").after(data); });
  }
 });
$( document ).on( "click", "#cancel_title_editing",function() {
   $("#action_editer_titre").remove();
});

L'id du form est utilisé X fois le nombre d'utilisateur (ce qui ne me posait aucun problème avant), mais avec la version ajax, quand on clique sur "Editer" soit on ne rentre même pas dans l'event soit ça modifie toujours la première personne de la liste.

Je suis donc un peu perdu et je ne sais quoi faire pour corriger ce problème. La moindre suggestion même critique envers la façon de faire est la bienvenue
Modifié par Guiges3 (20 Apr 2015 - 14:39)

Bonjour,

Mmmmm j'ai l'impression que ca part un peu en sucette... mais c'est peut etre juste une impression...

A quoi correspondent, servent les #title_list_users, #action_editer_titre
Et pourquoi mettre des "on click" sur le formulaire entier et sur le document entier plutôt qu'une seule fois sur le bouton ou meme au "submit" du form ?

Guiges3 a écrit :
L'id du form est utilisé X fois le nombre d'utilisateur

Tu peux préciser ça ? T'ai plusieurs fois le même ID sur ta page ? Un ID doit etre unique. Soit tu mets des id uniques, soit tu passe par une classe et joue avec le 'this' pour faire générique.

Et généralement le bouton de validation du formulaire se met en bas mais bon

#title_list_users sert de marqueur, en gros le retour de mon code ajax est un morceau de page que je place après #title_list_users.

#action_editer_titre est justement la zone qui est placé après #title_list_users, c'est cette zone qui est créée et qui contient le retour ajax.

Pour le "on click" sur le document en entier, si j'utilise simplement " $('#cancel_title_editing').click(function() {" ça ne fonctionne pas.

Oui au départ, j'avais le même ID pour chaque form "editer" puis j'ai décidé de suivre le HTML5 donc je n'ai plus le même ID, mais avec l'ajax sur le coup, je ne sais pas comment lui dire de récupérer les bonnes informations, car si je met un ID différent à chaque fois, il me faut X fois la fonction avec le même ID, et si je met le même ID ça bug. Après le fait de passer par une classe et de jouer avec le 'this', euh ?

Pour le bouton de validation, je viens de le déplacer, même si je ne vois pas la différence, je suppose que c'est juste une règle à suivre.

A mon avis je vais me faire taper sur les doigts si je montre le code source de tout le site
Modifié par Guiges3 (20 Apr 2015 - 16:18)

Guiges3 a écrit :
#title_list_users sert de marqueur, en gros le retour de mon code ajax est un morceau de page que je place après #title_list_users.
#action_editer_titre est justement la zone qui est placé après #title_list_users, c'est cette zone qui est créée et qui contient le retour ajax.

Ok ok

Guiges3 a écrit :
Pour le "on click" sur le document en entier, si j'utilise simplement " $('#cancel_title_editing').click(function() {" ça ne fonctionne pas.

Même prbleme que pour les form j'imagine, si t'en a plusieurs avec le meme id ça pète.

Guiges3 a écrit :
Oui au départ, j'avais le même ID pour chaque form "editer" puis j'ai décidé de suivre le HTML5 donc je n'ai plus le même ID, mais avec l'ajax sur le coup, je ne sais pas comment lui dire de récupérer les bonnes informations, car si je met un ID différent à chaque fois, il me faut X fois la fonction avec le même ID, et si je met le même ID ça bug. Après le fait de passer par une classe et de jouer avec le 'this', euh ?

D'avoir un code a peu près comme ça avec des class :

<form class="edition-form" method="post">
    <input type="hidden" class="user_id"  value="9">
    <input type="hidden" class="user_pseudo" value="Guiges3">
    <input class="submit" type="submit" name="editer_titre" value="Editer">
</form>

Et du coup un js du genre :

$( ".edition-form" ).submit(function( event ) {  // on attache un listnener à chaque form
    alert(this.id); // ici le this sera le formulaire cliqué. On peut donc "s'amuser" à faire un truc générique
    alert( $( '.user_id', $( this) ).attr( "value" ) );
});

Guiges3 a écrit :
Pour le bouton de validation, je viens de le déplacer, même si je ne vois pas la différence, je suppose que c'est juste une règle à suivre.

Oui c'était du "pinaillage" ergo, dans l'ordre des choses, on remplit puis on valide. Rien a voir avec le fonctionnement du code, désolé.
Modifié par _laurent (20 Apr 2015 - 16:28)

_laurent a écrit :
Même problème que pour les form j'imagine, si t'en a plusieurs avec le même id ça pète.

Non non, il n'est présent qu'une seule fois sur la page, cet événement se produit lorsque j'annule la modification du titre et ensuite détruit la zone de l’édition du titre.

  $( document ).on( "click", "#cancel_title_editing",function() {
    $("#action_editer_titre").remove();
  });

Pour le code j'ai utilisé ton exemple en le modifiant légèrement et tout fonctionne
Voici pour le code JS :

$( ".editer_titre" ).submit(function( event ) {
  $("#action_editer_titre").remove(); // Si on clique sur editer le titre d'une autre personne il faut enlever la zone

  $.post( "includes/body/edit_user_title.php", {
  id : $( '.user_id', $( this) ).attr( "value" ), 
  pseudo : $( '.user_pseudo', $( this) ).attr( "value" )},
  function(data) { $("h1").first().after(data); }); // on place après la balise h1 (plus simple) et n'est présente qu'une fois par page, et si jamais est présent une seconde fois le .first() corrige le problème

  return false; // empêche le rechargement de la page
});

Oh et tu peux "pinailler", si on me dit une chose j'essaie de l'appliquer
Modifié par Guiges3 (21 Apr 2015 - 15:08)