Question

I’m sure this is a common question but I have an input field and a button. Whenever the button is pressed an ajax call is performed returning a string. I understand that if you attach it to a div in the original file, that div will erase any strings or numbers in it and replace with the returned string. What would be the most efficient way to allow for every single callback to be displayed on the screen real time? I attempted it but it appears that dynamically changing the javascript variable that assigns which div tag the ajax callback inserts into does not work. Does anyone know either what is wrong with this code or a more efficient way to write this code, i.e. with php, etc.

<div id="part1">

<input type="text" id="text"/>

<input type="button" value="button" id="button"/>

</div>

<div id="hidden" class="2"></div>
<div id="part2"></div>
<div id="part3"></div>
<div id="part4"></div>
<div id="part5"></div>

<script type="text/javascript" >

$('#button').click(function () {

    var text = $('#text').val();    

$.post('ajaxskeleton.php', {
                red: text                   
        }, function(){
        var number = $('#hidden').attr("class");
        $('#part' + number).html(text);
        var number = number+1;                      
        var class_name = $('#hidden').attr('class')
        $('#hidden').removeClass(class_name);       
        $('#hidden').addClass(number);
            $('#text').val('');
    });


});


</script>

Answer 1

Instead of erasing its contents with .html(), you could append the new results to an existing div . For example, suppose you want to append the results to a div with id results:

$('#button').click(function () {
    var text = $('#text').val();    
    $.post('ajaxskeleton.php', { red: text }, function() {
        $("<li>" + text + "</li>").appendTo($("#results"));
    });
});​

Here’s a DEMO.