[AJAX] Actualisation d'une DIV

Version imprimable

15/02/2010, 15h26
carter15_2001

[AJAX] Actualisation d'une DIV

Bonjour,
Je me tourne vers vous après avoir essayé quelques solutions mais en vain...

Je vous expose mon problème.
Je dispose d'un tableau extrait d'une base affiché sans problème, j'ai ajouté une colonne a la fin de celui ci pour que l'on puisse en cliquant sur l'image associé supprimé un user.
En cas de formulaire cela passe trés bien.
Maintenant j'ai essayé de faire de l'Ajax. Cela passe bien, la suppression s'effectue correctement. Mais je souhaiterais que une fois la requete effectuée et le message de validation affiché, la DIV contenant mon tableau soit mis a jour pour afficher le nouveau tableau sans le user supprimé...
Malheureusement je n'arrive pas a rafraichir la DIV...

Avez vous une idée?
16/02/2010, 07h09
andry.aime

Bonjour,
Tu passes en paramètre aussi l'image cliqué pour supprimer la ligne.

Code:

imageClique.parentNode.parentNode.parentNode.removeChild(imageClique.parentNode.parentNode);
16/02/2010, 09h14
carter15_2001

Merci Andry.

D'accord, dans l'appel Javascript tu appel également l'image.
Mais je comprends pas comment ça va supprimer l'affichage de la ligne...

Veux tu voir mon code?
16/02/2010, 10h16
andry.aime

parentNode se réfère au noeud parent, j'imagine que c'est td pour l'image et le second la ligne et le troisième le tableau. removeChild suprimme le noeud en paramètre.
16/02/2010, 11h34
carter15_2001

Ok, merci beaucoup Andry.
Je teste ça de suite et te tient au courant de l'issue.
16/02/2010, 15h00
carter15_2001

Re

J'ai appliqué ta méthode Andry. Cela fonctionne très bien et supprime bien la ligne du tableau par contre cela supprime la première ligne quelque soit mon choix dans le tableau.
Y a t il un moyen a partir de cela de récupérer juste la bonne ligne?
17/02/2010, 06h15
andry.aime

Re,
Peux tu nous montrer ton bout de code HTML et comment tu faits l'appel de la fonction Javascript?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
                                                include ("./connect.php");
                                                $sql = 'SELECT id_presta, nom, prenom, num_tel, num_bureau, service FROM presta order by nom';
                                                $req = mysql_query($sql) or die ('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
                                                while($user = mysql_fetch_assoc($req))
                                                        {
                                                        ?>
                                                        <tr>
                                                                <td  ondblclick="inlineMod(<?php echo $user['id_presta']; ?>, this, 'nom', 'texte')">
                                                                <?php echo $user['nom']; ?>
                                                                </td>
 
                                                                <td  ondblclick="inlineMod(<?php echo $user['id_presta']; ?>, this, 'prenom', 'texte')">
                                                                        <?php echo $user['prenom']; ?>
                                                                </td>
 
                                                                <td  ondblclick="inlineMod(<?php echo $user['id_presta']; ?>, this, 'num_tel', 'texte')">
                                                                        <?php echo $user['num_tel']; ?>
                                                                </td>
 
                                                                <td  ondblclick="inlineMod(<?php echo $user['id_presta']; ?>, this, 'num_bureau', 'nombre')">
                                                                        <?php echo $user['num_bureau']; ?>
                                                                </td>
 
                                                                <td  ondblclick="inlineMod(<?php echo $user['id_presta']; ?>, this, 'service', 'texte')">
                                                                        <?php echo $user['service']; ?>
                                                                </td>
                                                                <td onclick="javascript:suppr_num(<?php echo $user['id_presta']; ?>)">
                                                                        <img src="./img/suppr.jpg" width="20px" id="suppr">
                                                                </td>
                                                        </tr>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var xhr_object = null;
function suppr_num(id) {
if(window.XMLHttpRequest) // Firefox
              xhr_object = new XMLHttpRequest();
           else if(window.ActiveXObject){ // Internet Explorer
              xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); }
           else { // XMLHttpRequest non supporté par le navigateur
              alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
              return;
           }
                //var url = "./admin/suppr_num_tel.php";
                var url = "./test2.php";
            xhr_object.open("POST", url, true);
 
            xhr_object.onreadystatechange = function() {
              if(xhr_object.readyState == 4 && xhr_object.status == 200){
                 //eval(xhr_object.responseText);
                                    setMessage(xhr_object.responseText);
                                   recup = xhr.responseText;
                                                // On se sert de innerHTML pour rajouter les options a la liste
                                                document.getElementById('livre').innerHTML = recup;
                                }
           }
           xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
           var data = "id="+ id;
           //xhr_object.send(data);
           document.getElementById('suppr').parentNode.parentNode.parentNode.removeChild(document.getElementById('suppr').parentNode.parentNode);
 
 
        }

18/02/2010, 06h24
andry.aime
Bonjour,

Citation:

bout de code HTML

Le code HTML généré mais pas le PHP.

Citation:

<td onclick="javascript:suppr_num(<?php echo $user['id_presta']; ?>)">
<img src="./img/suppr.jpg" width="20px" id="suppr">
</td>

1- C'est dans l'image que tu dois appeler la fonction suppr_num mais pas sur le td pour le code que je t'ai donné.
2- onclick attend déjà des instructions javascript, donc inutile de mettre "javascript:"
3- La valeur de la parametre dans l'appel de la fonction doit être dans une quote.
4- Avec ton code, tu aura l'id suppr qui se repete, c'est pourquoi il supprime le premier qu'il trouve.
Code:

1 2 3 <td> <img src="./img/suppr.jpg" width="20px" onclick="suppr_num('<?php echo $user['id_presta']; ?>',this)"> </td>
Code:

1 2 3 function suppr_num(id,obj){ ...... obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
A+
18/02/2010, 23h32
carter15_2001

Merci beaucoup Andry, je test ça demain matin et te tient au courant.
J'aurais certainement 2 ou 3 questions a te poser.
19/02/2010, 14h31
carter15_2001

Mercy beaucoup Andry!!
Tout fonctionne et je n'ai pas de question, je vais me baser la dessus également pour l'ajout dynamique.
Great!!!