Requête Ajax et mise à jour de la vue
Bonjour à tous,
Je travaille sur un projet PHP / JS qui me donne du mal ...
Je vous expose mon problème :
J'ai un formulaire 'visit' dans lequel un utilisateur peut enregistrer les visites qu'il a programmé dans sa journée. Pour une visite, un utilisateur peut ajouter / supprimer des pieces-jointes. L'ajout d'une pièce jointe est validée par la soumission du formulaire 'visit'. Cependant, on peut supprimer une pièce-jointe sans que toute la page soit rechargée et les infos déjà entrée dans les autres champs perdues.
Pour cela, j'ai tenté un appel AJAX (quelle audace !) mais qui ne marche qu'à moitié. La piece jointe est bien supprimée en base, mais la vue n'est pas mise à jour. En gros, ma pièce jointe est toujours affichée après sa suppression et je n'ai pas l'alert qui s'affiche (d'ailleurs j'ai seulement besoin que la vue soit mise à jour, l'alert c'était pour le test).
Résumé de ce que j'ai fait :
<form action="visit.php" method="post">
<input type="text" name="name">
<?php foreach ($attachment as $key => $a): ?>
<?php $id_attachment = "myattachment_" . <?= echo $attachment->id; ?> ?>
<span id="<?= echo $id_attachment; ?>"><?php echo $attachment->name; ?></span> <a href="#" class="removeAtt">Delete?</a>
<script>
var linkToRemove = "attachment/delete/<?php echo $attachment->id; ?>";
</script>
<?php endforeach ?>
<input type="submit" value="OK"/>
</form>
<script>
$('.removeAtt').click( function(e) {
var url = e.currentTarget.attr("href");
$.ajax({
url: linkToRemove,
method: 'post',
success: function(data) {
alert('success');
},
error: function(xhr, error){
console.debug(xhr);
console.debug(error);
}
});
});
</script>Dans ma console j'ai ça :
Object { readyState: 4, getResponseHeader:
.ajax/v.getResponseHeader(), getAllResponseHeaders:
.ajax/v.getAllResponseHeaders(), setRequestHeader:
.ajax/v.setRequestHeader(), overrideMimeType:
.ajax/v.overrideMimeType(), statusCode: .ajax/v.statusCode(), abort:
.ajax/v.abort(), state: .Deferred/d.state(), always:
.Deferred/d.always(), then: .Deferred/d.then(), 11 more… } 3:261:17
errorCa ne me parait pas si compliqué pourtant, mais pas moyen de me débrouiller !
Quelqu'un aurait une idée pour me faire avancer ?
5 réponses
Ouiiii ça marche !
Je reprend mon code ici pour les personnes qui pourraient avoir le même problème :
<form action="visit.php" method="post">
<input type="text" name="name">
<?php foreach ($attachment as $key => $a): ?>
<?php $downloadLink = "dll_" . <?= echo $attachment->id; ?> ?>
<?php $removeLink = "rm_" . <?= echo $attachment->id; ?> ?>
<span id="<?= echo $downloadLink; ?>"><?php echo $attachment->name; ?></span> <a href="#" class="removeAtt" id="<? echo $removeLink; ?>">Delete?</a>
<script>
var downloadLink = {{ downloadLink }};
var removeLink = {{ removeLink }}
var linkToRemove = "attachment/delete/<?php echo $attachment->id; ?>";
</script>
<?php endforeach ?>
<input type="submit" value="OK"/>
</form>
<script>
$('.removeAtt').click( function(e) {
var url = linkToRemove
$.ajax({
url: linkToRemove,
method: 'post',
success: function(data) {
$( downloadLink ).remove();
$( removeLink ).remove();
},
error: function(xhr, error){
console.debug(xhr);
console.debug(error);
}
});
});
</script>Merci pour ton aide betaWeb ;)
Salut,
Alors déjà un id c'est UNIQUE. Or dans ta boucle, tu as <a href="#" id="removeAtt">Delete?</a>. Il te faut impérativement remplacer cet attribut id par un attribut class. Essayes déjà de modifier ça et on verra après ;)
Oui effectivement ! Je met à jour le code !
Après le problème ne change pas. Par contre, je passe maintenant dans le success de ma fonction (il y avais une erreur côté serveur que j'ai corrigé entre temps).
J'ai aussi ajouté un id (unique celui-ci !) pour chaque nom de la piece jointe (le nom que j'aimerais faire disparaitre). Ca pourra surement servir ...
Beh donc tu es sur la bonne voie ;)
Tu n'as plus qu'à effectuer les opérations de suppression de contenu du DOM dans le callback success.