[AJAX] Rafraîchissement de page après ajout html
Bonjour à tous,
Bon il est certain que mon titre est loin d'être clair, et autant être franc avec vous, ce n'est pas non plus très clair dans ma tête ! ^^
Je viens donc vers vous aujourd'hui, car, à force de m'acharner sur quelque chose, je commence à perdre toute logique, et un regard extérieur pourra toujours m'être utile !
Bref, venons-en au coeur du problème:
Actuellement, j'essaye de générer du html, après une fonction ajax. Pour cela, pas de problème. Or, dans cet html que je génère, j'y dispose un bouton (delete) qui permettrait de supprimer cette élément de la liste.
Je vais essayer d'être le plus clair possible, mais en gros, lorsque j'ajoute mes éléments, il n'y a aucuns problèmes. Si je rafraîchit la page, ils sont là, et je peux alors les supprimer (le selecteur ayant pour class "delete" est reconnu). Alors que si j'ajoute cet élément, et que je souhaite le supprimer immédiatement derrière, rien ne marche (la fonction est considérée comme "non-existente"). Il me faut donc rafraîchir la page pour que cela fonctionne.
Et bien sûr, je ne souhaite pas que l'on ai recours à un rafraîchissement de page !
Enfin bref, après maintes tentatives, je vous demande un peu d'aide :).
Voici mon code:
Le HTML:
Code:
1
2
3
4
5
6
7
8
9
10
| <div class="tableau-droppable">
<div class="tableau-selection">
<label>Options du choix multiple : </label><br/>
<ul id="sortable-options" class="sortable-options" style="background: #f8f8f8; border-radius: 8px; min-height: 150px; max-height: 250px; width: 300px; display: block;">
<span id="replaceMeOptions"></span>
</ul>
<input type="text" name="valeur" id="valeurOption" maxlength="30" />
<span class="option_send">Ajouter</span>
</div>
</div> |
L'ajax qui me génère un XML, que je parse pour créer mon élément de la liste:
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
32
| $(".option_send").click(function() {
var test = $("#valeurOption").val();
var dataString = 'content='+ test;
if(test=='')
{
alert("Entrez du texte avant d'envoyer.");
}
else
{
$.ajax({
type: "POST",
url: "AjaxTemplates/AttributValeurManager.php",
data: dataString,
dataType: 'xml',
cache: false,
success: function(xml){
var string
$(xml).find('attribut').each(function(){
var id = $(this).find('id').text();
var title = $(this).find('titre').text();
string = '<li class="ui-state-default" title="' + id + '">' + title + '<span class="delete_option" style="cursor: pointer; float: right; margin-top: 1px;" id="delete-' + id + '" ><img src="img/bibliotheque/delete.png" /></span></li>';
});
$("#replaceMeOptions").before(string);
document.getElementById('valeurOption').value='';
document.getElementById('valeurOption').focus();
//fnSubmitOptions(true);
}
});
}
}); |
Et enfin, la suppression de l'élément:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $('.delete_option').click(function() {
var current = $(this);
var dataString = 'delete=' + current.attr('id').replace('delete-','');
$.ajax({
type: 'POST',
url: 'AjaxTemplates/AttributValeurManager.php',
data: dataString,
cache: false,
beforeSend: function() {
current.parent().animate({'backgroundColor':'#fb6c6c'},300);
},
success: function() {
current.parent().slideUp(300,function() {
current.parent().remove();
//fnSubmitOptions(true);
});
}
});
}); |
Je vous remercie d'avance pour toute l'aide que vous pourriez m'apporter :)
