Comment ajouter un LI à un UL en utilisant jQuery forms.js

Question

J'ai plusieurs formulaires sur une page et j'essaie d'utiliser jQuery form.js pour enregistrer chaque commentaire qui est posté, puis ajouter le commentaire à l'UL ensuite. La partie sauvegarde fonctionne correctement. Cependant, j'ai du mal à obtenir le commentaire pour mettre à jour l'UL correctement. Voir le code ci-dessous:

//My Form 
<form method="post" action="includes/answer.php" id="respond"> 
<input name="key_id" id="key_id" type="hidden" value="'.$row['thekey'].'" /> 
<textarea name="comment" id="comment"></textarea> 
</form> 

//The UL 
<ul id="'.$row['thekey'].'" class="answer"></ul> 

//The jQuery 
$(document).ready(function() { 
    jQuery('form').ajaxForm({ 
     target: 'ul', 
     success: function(data) { 
      $('ul#' + data.id).prepend("<li style='display:none'>"+data.comment+"</li>").fadeIn('slow'); 
      $("ul#" + data.id +"li:first").fadeIn(); 
     } 
    }); 
}); 

//Postback Code 
    $message = strip_tags(mysql_real_escape_string($_POST['comment'])); 
    $id = strip_tags(mysql_real_escape_string($_POST['key_id'])); 

    $sql_id = 'SELECT id FROM questions WHERE thekey = "'.$id.'"'; 
    $select_result = mysql_query($sql_id); 

    if($select_result) { 
     $row = mysql_fetch_array($select_result); 
     $sql = 'INSERT INTO answers (answer, question_id) VALUES("'.$message.'", '.$row['id'].')'; 
     $result = mysql_query($sql); 

     if($result) { 
      print json_encode(array("id" => $id, "comment" => $message)); 
     } 
    } 

Ceci est un tableau restituent qui ressemble { "id": "sadfasdf2", "commentaire": "ds"} en place des balises ul. Comment puis-je l'obtenir pour produire le commentaire réel dans un LI?

Answer 1

Change:

$('ul#' + data.id).prepend("<li style='display:none'>"+data.comment+"</li>").fadeIn('slow'); 

à:

$('ul#' + data.id).prepend($("<li></li>").text(data.comment).hide()).fadeIn('slow'); 

Une explication peu:

$("<li></li>") est comment créer un nouvel élément. Ensuite, vous pouvez .text(content) sur cet élément pour définir le contenu (.html(htmlcode) fonctionne également). .hide() est la même que style="display:none".

EDIT: owh et aussi, supprime le target: 'ul', .. c'est la config qui indique à ajaxForm d'injecter directement la réponse dans l'étiquette UL.