Adding a table row after insert with jQuery $.ajax PHP/MySQL

Question

I need a help to adding a table row after inserting with PHP/MySQL. I don't know what else to do. FYI i'm able to insert with $.ajax and my select are working correctly. I need a help on how to retrieve this information to the table row.

agenda.php

<form class="form-inline" id="form-agenda">
    <input type="text" name="data" class="input-big datepicker" placeholder="Data">
    <input type="text" name="local" class="input-big" placeholder="Local">
    <input type="text" name="cidade" class="input-big" placeholder="Cidade">
    <button type="submit" name="submit" class="btn btn-primary">Gravar</button>
</form>
<table class="table table-hover">
    <thead>
        <tr>
            <th>Data</th>
            <th>Local</th>
            <th>Cidade</th>
        </tr>
    </thead>
    <tbody id="teste">
        <?php   
            $agendaDAO = new AgendaDAO();
            foreach($agendaDAO->select() as $row){
                echo '<tr>'.
                        '<td>'.$row['data'].'</td>'.
                        '<td>'.utf8_encode($row['local']).'</td>'.
                        '<td>'.$row['cidade'].'</td>'.
                        '<td><i class=icon-edit></i> <i class=icon-remove></td>'.
                      '</tr>';

            }
        ?>                  
    </tbody>
</table>

agenda.js

$('#form-agenda').submit(function(){
    var fields = $(this).serialize();

    $.ajax({
        url: 'ajax-agenda.php',
        type: 'POST',
        data: fields,
        dataType: 'text',
        beforeSend: function(){
            $('#loading-indicator').css({display: 'block'});
        },
        complete: function(){
            $('#loading-indicator').css({display: 'none'});
        },
        success: function(data) {
            $('#teste').prepend(data);
            $('#teste tr:first').slideDown('slow');

        }
    });
    $(this).trigger('reset');   
    return false;
});

ajax-agenda.php

<?php

    include('util/config.php');

    $data = $_POST['data_submit'];
    $local = utf8_decode($_POST['local']);
    $cidade = utf8_decode($_POST['cidade']);

    $agenda = new Agenda($data, $local, $cidade); 

    $agendaDAO = new AgendaDAO();
    $agendaDAO->add($agenda);



    foreach($agendaDAO->select("SELECT * FROM agenda ORDER BY id DESC LIMIT 1") as $rowA){
        echo '<tr><td>'.$rowA['data'].'</td><td>'.utf8_encode($rowA['local']).'</td><td>'.$rowA['cidade'].'</td><td><i class=icon-edit></i> <i class=icon-remove></td></tr>';
    }

?>

Answer 1

Try changing the dataType: 'text' to dataType: 'html'.