[AJAX] Envoi des données du formulaire par POST

**Knight.Solidary** · 31/07/2012, 11h05

Bonjour à tous,

Je viens de commencer à travailler avec AJAX et j'aimerais faire une suppression comme cela se fait sur nos boites mail tel que Yahoo ou Hotmail.

Le code de creation du formulaire se présente comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
<article>
					<div id="article"> Liste Des Articles </div>
					<div id="action">
                        <a href="ajout.php"> Ajouter </a> <a href="javascript:suppressionArticle()"> Supprimer </a>
					</div>
					<br clear="all"/>
                    <form name="formlistarticle">
                        <table id="listearticle">
                            <thead>
                                <tr>
                                    <th> <input type="checkbox" name="checkArticle" onclick="toutSelectionner()"/> </th>
                                    <th> Nom </th>
                                    <th> Internaute </th>
                                    <th> Date </th>
                                    <th> Commentaire </th>
                                </tr>
                            </thead>
                            <tbody>
                            <?php
                            $mapper = new ArticleMapper() ;
                            $result = $mapper->find((isset($_GET['categorie'])?$_GET['categorie']:0)) ;
 
                            foreach($result as $article) {
                                echo    "<tr> " .
                                            "<td> <input type='checkbox' name='deleteArticle[]' value='" . $article->getIdArticle() . "'/> </td>" .  
                                            "<td> " . $article->getNomArticle() . " </td>" .
                                            "<td> " . $article->getNomInternaute() . " </td>" .
                                            "<td> " . $article->getDate() . " </td>" .
                                            "<td> " . $article->getCommentaire() . "</td>" .
                                        "</tr>" ;
                            }
                            ?>
                            </tbody>
                        </table>
                    </form>
				</article>

Le code JavaScript est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
function suppressionArticle() {
 
    var inputs = document.forms["formlistarticle"].elements["deleteArticle[]"] ;
        inputLength = inputs.length ,
        ids = "" ;
    for (var i = 0 , li = inputs.length ; i < li  ; i++) {
        if (inputs[i].checked) {
			if (ids != "") {
				ids += "&" ;
			}
			ids += "deleteArticle[]=" + inputs[i].value ;
		}
    }
 
	alert(ids) ;
    var xhr = new XMLHttpRequest() ;
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            suppressionLigne() ;
            readData(xhr.responseXML) ;
        }
    } ;
    xhr.open("GET" , "supprimer.php?" + ids , true) ;
    xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded") ;
	xhr.send(null) ;
}
 
function suppressionLigne() {
    var tbody = document.getElementsByTagName("tbody") ;
    while (tbody[1].hasChildNodes()) {
        tbody[1].removeChild(tbody[1].firstChild) ;
    }
}
 
 
function readData(oData) {
    var nodes = oData.getElementsByTagName("article") ;
    var oTbody = document.getElementsByTagName("tbody");
 
    for (var i ; i < nodes.length ; i++) {
        var tr = document.createElement("tr") ;
        var input = document.createElement("input") ;
        input.type = "checkbox" ;
        input.name = "deleteArticle" ;
        input.value = nodes[i].getAttribute("id") ;
        var tds = [
            document.createElement("td").appendChild(input) ,
            document.createElement("td").appendChild(nodes[i].getAttribute("nom")) ,
            document.createElement("td").appendChild(nodes[i].getAttribute("internaute")) ,
            document.createElement("td").appendChild(nodes[i].getAttribute("date")) ,
            document.createElement("td").appendChild(nodes[i].getAttribute("commentaire")) 
        ] ;
        tr.appendChild(tds[0]) ;
        tr.appendChild(tds[1]) ;
        tr.appendChild(tds[2]) ;
        tr.appendChild(tds[3]) ;
        tbody.appendChild(tr) ;
    }
}

Le code php5 du fichier supprimer.php est le suivant :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
header("Content-Type: text/xml") ;
echo '<?xml version="1.0" encoding="utf-8"?>' ;
echo '<articles>' ;
print_r($_GET) ;
if (isset($_GET['deleteArticle[]'])) {
 
    $ids = array(htmlentities($_GET['deleteArticle[]'])) ;
    $mapper = new ArticleMapper() ;
    $mapper->delete($ids) ;
 
    $result = $mapper->find(0) ;
 
    foreach ($result as $article) {
        echo    '<article id="' . $article->getIdArticle() . '" ' .
                ' nom="'  . $article->getNomArticle() . '" '.
                ' internaute="'  . $article->getNomInternaute() . '" ' .
                ' date="'  . $article->getDate() . '" '.
                ' commentaire="'  . $article->getCommentaire() . '" '.
                '/>' ;
    }
}
 
echo '</articles>' ;
 
?>

Malheureusement ça ne marche pas.

**andry.aime** · 31/07/2012, 12h11

Bonjour,

Il est mieux de nous donner le code html généré que le code php du document qui utilise le javascript.
1-

La balise <article> n'existe pas.
2-

if (isset($_GET['deleteArticle[]']))

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

if (isset($_GET['deleteArticle']))

3-

tbody[1].hasChildNodes()

Tu as 2 tbody dans le document? Attention, l'indice d'un tableau commence par 0 en javascript.

A+.

**Knight.Solidary** · 02/08/2012, 23h54

Bonjour andry.aime,

La balise <article> existe en HTML5

**andry.aime** · 03/08/2012, 08h03

Envoyé par Knight.Solidary

La balise <article> existe en HTML5

Je suis désolé pour ça.

tbody.appendChild(tr) ;

tbody n'est pas déclaré dans la fonction readData, je pense que ça doit être oTbody.
Sinon, encore une autre remarque, n'utilise pas createElement pour ajouter des lignes et colonnes dans un tableau. Regarde la faq.

A+.

**Knight.Solidary** · 04/08/2012, 04h33

Le problème ne vient pas du fait que je n'affiche pas bien les données du tableau mais du fait que lorsque je transfert les données vers le fichier PHP, il n'exécute pas la requête.