Javascript inopérant quand requête ajax

Version imprimable

Bonjour,

j'ai créé un script pour effacer une ligne de mon tableau quand je clique sur un lien. Une partie en javascript ( via jquery) efface la ligne dans le navigateur et la requête ajax l'efface de la BDD.

Quand je teste avec la requête javascript/jquery seule ça efface bien la ligne dans le navigateur. Mais quand j'ajoute la requête AJAX pour l'effacer dans la BBD aussi, la ligne ne s'efface plus ( mais elle supprimé de la BDD) ( sous firefox et chrome idem. C'est mon premier script ajax / javascript, j'ai du faire une erreur toute bête. voici le script
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function deleteMe(row_id, tableid) { if (!confirm('Supprime ' + row_id + ' de ' + tableid + ' ?')) { ev.preventDefault(); return false; } else { $('#' + tableid + ' #my_row_' + row_id).remove(); var dileteobject = null; dileteobject = new XMLHttpRequest(); dileteobject.open("GET", "action.php?row_id=" + row_id + "&tableid=" + tableid, false); dileteobject.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); dileteobject.send(null); if (dileteobject.readyState == 4) { alert("effacé de la table"); } } }
Note : on envoie un row_id aka le numéro de la ligne et tableid aka le nom du tableau

Merci à ceux qui auraient un conseil

26/12/2013, 16h47
sekaijin

tu utilise JQuery pourquoi ne pas utiliser les méthode de JQuery pour faire ton appel AJAX ??

ensuite il y a une chose d'incohérente dans ta façon de faire
tu supprime la ligne du tableau sans savoir si elle a pu être supprimé dans la table

perso sur la confirmation de l'utilisateur j'enverrais la requête AJAX et si le serveur réponds qu'il l'a effectivement supprimée dans la callback je supprimerais la linge du tableau. ainsi je serrais sur d'avoir un affichage cohérent avec le serveur.

A+JYT
26/12/2013, 17h01
arnogues

Pour répondre simplement à la question, tu fais une requête ajax en synchrone, ce qui a pour effet de bloquer le navigateur. Reste en asynchrone et utilise une callback pour faire le reste du code

D'abord merci pour ces réponses j'ai modifié le code en fonction ce qui donne donc

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
<script>
 
	function deleteMe(row_id,tableid){
	//document.write('row = '+row_id+' de = '+tableid)
	   if(!confirm('Supprime '+row_id+' de '+tableid+' ?')){
	      ev.preventDefault();
	      return false;
	    }else{
 
 
 
			      var dileteobject= null;
			      //document.write(row_id);
 
			      dileteobject = new XMLHttpRequest();
			      dileteobject.open("GET","action.php?row_id="+row_id+"&tableid="+tableid, true);
			      dileteobject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			      dileteobject.send(null);
			      if (dileteobject.readyState==4 ){alert ("effacé de la table");
                             $('#'+tableid+' #my_row_'+row_id).remove();
 
			      }
 
	    }
	    }
 
</script>

A priori donc on est en asynchrone
l'affacement se fait après que la ligne ai été effacée de la BDD mais dans le navigateur toujours pas

j'ai encore du merder ?

27/12/2013, 08h59
Neewd

C'est bien simple, tu as une condition pour effacer ta ligne en jQuery, mais tu ne rentres pas dedans.
Il suffit donc de tester la valeur de retour de .readystate() et voir ce qu'elle retourne, et en fonction tu connaitra l'état du serveur.

Et je ne crois pas que c'est du asynchrone ici, tu peux trouver une documentation ici , j'ai toujours eu l'habitude de faire une fonction readyStateChange pour le callback d'un AJAX en javascript natif. :ccool:

je maintiens vu que tu utilise JQuery fais ton appel AJAX avec JQuery

Code:

1
2
3
4
5
6
7
8
9
$.ajax({
  type: "GET",
  url: "action.php",
  data: {row_id: row_id, tableid:tableid},
  success: function(data, textStatus, jqXHR) {
    $('#'+jqXHR.data.tableid+' #my_row_'+jqXHR.data.row_id).remove();
  },
  dataType: "json"
});

c'est tout de même plus simple non ?

A+JYT

27/12/2013, 14h42
Neewd

J'approuve ce que dit Sekai.
C'est plus simple pour l’asynchrone puisque tu as une fonction de callBack ;)

ça marche sans que je comprenne pourquoi

Merci des réponses. J'ai essayé ce que proposait sekaijin

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function deleteMe(row_id, tableid) {
    if (!confirm('Supprime ' + row_id + ' de ' + tableid + ' ?')) {
        ev.preventDefault();
        return false;
    } else {
        $.ajax({
            type: "GET",
            url: "action.php",
            data: {
                row_id: row_id,
                tableid: tableid
            },
            success: function (data, textStatus, jqXHR) {
                $('#' + jqXHR.data.tableid + ' #my_row_' + jqXHR.data.row_id).remove();
            },
            dataType: "json"
        });
    }
}

Je l'ai peut être mal intégré mais je débute avec ajax et jquery donc ça me semblait logique. Cela efface bien la ligne de la database mais pas sur la page.

Maintenant cette version marche (efface de la BDD et sur la page) sans que je comprenne pourquoi car elle est quasi identique à la première

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function deleteMe(row_id, tableid) {
    if (!confirm('Supprime ' + row_id + ' de ' + tableid + ' ?')) {
        ev.preventDefault();
        return false;
    } else {
        $('#' + tableid + ' #my_row_' + row_id).remove();
        var dileteobject = null;
        dileteobject = new XMLHttpRequest();
        dileteobject.open("GET", "action.php?row_id=" + row_id + "&tableid=" + tableid, false);
        dileteobject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        dileteobject.send();
        if (dileteobject.status == 200 && dileteobject.readyState == 4) {
            alert("effacé de la table" + dileteobject.readyState + " " + dileteobject.status);
        }
    }
}

Le problème ne vient-il pas d'ailleurs ?? de cache ou autre qu'il faudrait vidé dans le navigateur par exemple. Le genre de truc que tout le monde sait mais que le débutant ne connait pas...

Merci encore des commentaires qui m'ont permis d'aller explorer des trucs que je ne connaissais pas.

30/12/2013, 10h14
Neewd

Dans la deuxième version tu fais un

Code:

send()

alors que dans la première tu fais un

Code:

send(null)
30/12/2013, 12h04
NoSmoking

Bonjour,
issu du premier code

Code:

$('#' + jqXHR.data.tableid + ' #my_row_' + jqXHR.data.row_id).remove();

issu du second code

Code:

$('#' + tableid + ' #my_row_' + row_id).remove();

c'est le jeux des différences!