views:

39

answers:

1

I have multiple forms on a page and i'm trying to use jQuery form.js to save each comment that is posted and then append the comment to the UL afterwards. The save part of it is working fine. However, I am having trouble getting the comment to update the UL correctly. See code below:

//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));
        }
    }

This is currently outputting an array that looks something like {"id":"sadfasdf2","comment":"ds"} in place of the ul tags. How can I get it to output the actual comment in a LI?

+1  A: 

Change:

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

to:

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

A bit explanation:

$("<li></li>") is how you create a new element. Then you can .text(content) on that element to set the content (.html(htmlcode) also works). .hide() is the same as style="display:none".

EDIT: owh and also, remove the target: 'ul', .. it's the config that tells ajaxForm to directly inject the response into the UL tag.

Lukman
I gave it a try and it still appears to be outputting the array instead of actually adding the li to the list.
mike
sorry i think it's the `target: 'ul',` part that you need to remove ..
Lukman
Nope, still something else is wrong... I removed the target: 'ul', and it still saves correctly, but doesn't add the new comment to the list. hmmm....
mike
then remove the `.hide()` part :)
Lukman
or move the .fadeIn() into the preceding parentheses: `$('ul#' + data.id).prepend($("<li></li>").text(data.comment).hide().fadeIn('slow'));`
Lukman
It's working! Thanks! Any idea how I would get it to put the LI at the very bottom instead of the top?
mike
as in the title of your question, use `.append()` instead of `.prepend()` >___<
Lukman
ahhh now it is perfect. Thanks so much for your help!
mike