Bon,je suis entrain de travailler sur le systeme de commentaire dans mon site web et j'ai choisit de faire tout le systeme en ajax.Et pour ce systeme,j'ai choisit $.get .Le probleme auxquel je suis confronté c'est que je n'arrive pas a faire la selection du lien supprimer en jquery sur le commentaire poster en ajax sans recharger la page(ca ne marche pas).Si quelqu'un peut m'aider ca pourraît être sympa.Merci
PHP
<?php
$url = Router::url(array('controller'=>'myctrl',
'action'=>'add',
'admin'=> false
));
$delete = Router::url(array('controller'=>'myctrl','action'=>'delete',
'admin'=> false));
?>
JAVASCRIPT
$(function(){
$('#post-form').click(function(e){
e.preventDefault();
$name = "<?php echo $this->Session->read('Auth.User.username') ?>";
$mail = "<?php echo $this->Session->read('Auth.User.email') ?>";
$content = $('#CommentContent').val();
$parent_id=$('#parent_id').val();
$id = $('#CommentPostId').val();
$post = $('.postss');
$.get("<?php echo $url ?>",{username:$name,post_id:$id,email:$mail
,content:$content,parent_id:$parent_id},function(data){
$html ='<div class="comment"style="margin:10px 0;">
<div class="media well">\
<a class="pull-left" href="#">\
<img src="http://1.gravatar.com/avatar/
<?= md5('+data.Comment.email+'); ?>?s=100" width="70%"
class="img-circle"></a><a href="#" class="pull-right del"
data-id="<?php echo $v['id'] ?>" >Supprimer</a>
</div></div></div>'
$post.after($html);
},'json');
return false;
});
$('.del').click(function(e){
e.preventDefault();
console.log($(this).parent().parent());
if(confirm('Voulez vous vraiment supprimer cette image?')){
$.get("<?php echo $delete ?>/"+$(this).data('id')+"",function(data){
},'json');
$(this).parent().parent().slideUp();
}
});
});
Bonjour,
encore une fois (ce problème étant récurrent) :
$('.del').click
A cet endroit jquery parcours le dom à la recherche de ces élements et ajoute des listeners sur l'évènement clicks aux élements trouvés.
Si tu rajoutes à posteriori des élements dans le dom, jquery ne relance pas le parcours du dom et aucun listener ne se trouve alors ajoutés sur tes éléments.
La solution :
Binder l'évenement sur un conteneur parent fixe
Pour ce faire:
$(document).on('click','.del',function(event){
//Ta fonction
})
On peut remplacer document par n'importe quel élément parents à tes divs de class del présent avant l'appel ajax.
Cordialement
Antho