在没有刷新的表单提交后添加行到表 - jquery ajax php

Question

I've an ajax form and a table.

This is my ajax code :

$(function () {
    $(".submitann").click(function () {
        var title = $("#title").val();
        var announcement = $("#announcement").val();
        var dataString = $('#annform');

        if ((title == '') || (announcement == '')) {
            alert("Please Fill In The Fields");
        } else {

            $.ajax({
                type: "POST",
                dataType: "json",
                data: dataString.serialize(),
                url: "http://www.domain.com/formprocess.php",
                success: function (data) {

                    //insert table code here

                });
            }
            return false;
        });

    });

I tried but failed. In the php code, I've done this :

$data = '<tr class="odd gradeX">
    <td>
        <input type="checkbox" class="checkboxes" value="1" />
    </td>
    <td><a href="#" class="anntitle" data-type="text" data-pk="'.$id.'" data-original-title="Enter title"
        data-name="title">'.$_POST["title"].'</a>
    </td>
    <td><a class="delete" href="javascript:;">Delete</a>
    </td>
</tr>';

echo json_encode($data);

It works with many problems. Firstly, it goes to the last row. Second, the x-editables does not work.

How to add a row to the without refreshing the page?

Answer 1

first you need to give the id to your <table id="mytable">.than on success of ajax, add just like this:

var row_data = "";
row_data +="<tr class='odd gradeX'>
                                <td><input type='checkbox' class='checkboxes' value='1' /></td>
                                <td><a href='#' class='anntitle' data-type='text' data-pk=''.$id.'' data-original-title='Enter title' data-name='title' >'.$_POST['title'].'</a></td>
                                <td><a class='delete' href='javascript:;'>Delete</a></td>
                 </tr>";
$("#mytable").append(row_data);