Bonjour à toutes et à tous,
Je me permets de poster ici pour avoir quelques explications astuces concernant un script en ajax pour poster des commentaires. Le système en lui même fonctionne très bien. Je voudrais savoir comment ajouter une image au système.
Le fonctionnement est le suivant :
<div id="comments">
</div>
<div id="leaveComment">
<h2>Leave a Comment</h2>
<div class="row"><label>Your Name:</label><input type="text"></div>
<div class="row"><label>Comment:</label><textarea cols="10" rows="5"></textarea></div>
<button id="add">Add</button>
</div>
La div "conmments" affichera sans rechargement de la page les information du input ainis que du textarea.
La fonction en javascript est la suivante :
<script type="text/javascript">
$(function() {
//add click handler for button
$("#add").click(function() {
//define ajax config object
var ajaxOpts = {
type: "post",
url: "addComment.php",
data: "&author=" + $("#leaveComment").find("input").val() + "&comment=" + $("#leaveComment").find("textarea").val() + "&info=" + $("#leaveInfo").find("input").val(),
success: function(data) {
//create a container for the new comment
var div = $("<div>").addClass("row").appendTo("#comments");
//add author name and comment to container
$("<label>").text($("#leaveComment").find("input").val()).appendTo(div);
$("<div>").addClass("comment").text($("#leaveComment").find("textarea").val()).appendTo(div);
//empty inputs
$("#leaveComment").find("input").val("");
$("#leaveComment").find("textarea").val("");
}
};
$.ajax(ajaxOpts);
});
});
</script>
L'image à intégrer est la suivante : avatar.jpg contenu dans une variable php. Comment créer un nouveau bloc (div) avec cette information et qu'elle s'affiche en même temps que le commentaire sans recharger la page ? Je ne sais pas si je suis assez clair dans mes explications, je reste a disposition pour mieux développer mon problème en cas de soucis.
Vous remerciant par avance pour vos réponses.
Brutos