Mettre à jour dynamiquement un tableau html

[arthuro45]

Bonjour,

J'ai un tableau html alimenté par une BDD via PHP. Dans ce tableau je peux saisir des données que j'envoie par une requête Ajax.

Ma question :
Comment faire pour mettre à jour les données d'une colonne du tableau html après la requête d'insertion Ajax ?

La fonction pour l'insertion :

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
function insertionCde(){
    $("#validerCde").click(function() {
            if(confirm("Veuillez confirmer la création de la commande")) {
                var str = $(".input_cmd").serialize(); // Très pratique, je serialize toutes les données.                     
                $.ajax({
                    type: "GET",
                    url: "test.php",
                    data: { refqte:str },
                    success: function(data){
                        if(data!="")
                        {
                            $("#cdeOk").html("Votre commande est enregistrée."); // On affiche le message
                                    $('.input_cmd').val(""); // On vide les input des quantités saisies.
                                    affMasqBtn(); // Fonction qui masque le bouton #validerCde.
                        }
                        else
                        {
                            $('#cdeOk').html("une erreur est survenue !");
                        }
                    }
                });
            } 
            else {
                            return false;
            }
    });
}

Le tableau html avec les données, en rouge la colonne à mettre à jour :

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
echo "<table class='mag30_tableau' id='tableau_cmd'>\n";
    echo '<thead>';
    echo '<tr>';
    echo '<th class="th">Référence</th>';
    echo '<th class="th">Libellé</th>';
    echo '<th class="th">Remettant</th>';
    echo '<th class="th">Stock</th>';
    echo '<th class="th">Stock disponible</th>';
    echo $thCde;
    echo '</tr>';
    echo '</thead>';
                        
    while ($row = mssql_fetch_array($req2)) {

            echo '<tbody>';
            echo '<tr>';
                    echo '<td class="td">'.$row["ascart"].'</td>';
                    echo '<td class="td">'.$row['asdese'].'</td>';
                    echo '<td class="td">'.$row['aectie'].'</td>';
                    echo '<td class="td">'.$row['qte'].'</td>';
                    echo '<td class="td">'.$stockApresLivraison.'</td>';
                    echo $tdCde;
            echo "</tr>\n";
            echo '</tbody>';
    }
    echo "</table>\n";

Pour résumé :
1 - Une page affiche un tableau html qui liste tous les articles d'une table.
2 - On saisit une quantité en bout de ligne dans $tdCde, qui n'est autre qu'un champ input.
3 - Après validation de la commande j'insert les données en BDD.
4 - Je viens mettre à jour les données du tableau.

Merci pour votre aide

[arthuro45]

J'ai avancé un peu
Dans la doc j'ai trouvé la fonction load

Code :

1
2
3
function chargerData(){
    $("body").load("mag30.php");
}

J'ai testé avec la balise body, ça recharge bien la page mais il faudrait que je cible juste une colonne du tableau. Entourer d'une div le td de la colonne en question suffirait ?

J'ai ajouté la fonction chargerData() à $.ajax :

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
function insertionCde(){
    $("#validerCde").click(function() {
            if(confirm("Veuillez confirmer la création de la commande")) {
                var str = $(".input_cmd").serialize(); // Très pratique, je serialize toutes les données.                     
                $.ajax({
                    type: "GET",
                    url: "nouvelle_commande2.php",
                    data: { refqte:str },
                    success: function(data){
                        if(data!="")
                        {
                            chargerData(); // Rechargement des données dans le tableau.
                            $('#cdeOk').html(data); // On affiche le message.
                            $('.input_cmd').val(""); // On vide les input des quantités saisies.
                            affMasqBtn(); // Fonction qui masque le bouton #validerCde.
                        }
                        else
                        {
                            $('#cdeOk').html("une erreur est survenue !");
                        }
                    }
                });
            } 
            else {
                            return false;
            }
    });
}

[x-zolezzi]

Un petit conseil, étant donné que tu charges ton tableau en ajax je te conseillerai de jeter un coup d'oeil sur un plug-in jQuery nommé jqGrid (démo)

[danielhagnoul]

Bonjour

Il est possible de chargez un fragment de page web, ici l'élément ayant l'id elemID (l'espace blanc avant #elemID est indispensable) :

Code :

$("#conteneur").load("url #elemID");

[arthuro45]

Bonjour

Code :

$("#conteneur").load("url #elemID");

On charge #elemID dans #conteneur ?

[danielhagnoul]

On remplace le contenu de #conteneur par celui de #elemID

Voir : http://api.jquery.com/load

[SpaceFrog]

tu veux dire que jquery va charger la pagez url, en extrait l'élement id et le colle dans le conteneur ? ??
de plus en plus fort ce jquery !!!

[Bovino]

Envoyé par danielhagnoul

Voir : http://api.jquery.com/load-event/

Tu voulais dire http://api.jquery.com/load/ j'imagine

Voir en particulier la partie "Loading Page Fragments"

[danielhagnoul]

Envoyé par Bovino

Tu voulais dire http://api.jquery.com/load/ j'imagine

Voir en particulier la partie "Loading Page Fragments"

C'est bien ce que je croyais avoir j'ai dit, après correction !

[SpaceFrog]

Je ne remets pas en cause tes dires Daneil. On ne contredit pas ses idoles ...
Mais Jquery m'étonneras toujours