表格提交后添加行到表格后不刷新 - jquery ajax php

这是我的Ajax代码：

$(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; 
     }); 

    });

我试过，但失败了。在php代码中，我已经这样做了：

$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);

它可以解决很多问题。首先，它进入最后一行。其次，x-editables不起作用。

如何在不刷新页面的情况下添加行？

来源

2013-08-27 Redzwan Latif

首先你需要给ID对阿贾克斯的成功你。比，添加就像这样：

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

来源

2013-08-27 14:41:02

它还是到最后一排和jQuery的X-editables不起作用。 x-editables仅在刷新后才起作用。 –

比您要添加新行的位置？ –

新行将被添加在顶部。表中的第一行将被新增加的记录替换。或者我必须使用jQuery来按日期或主ID对表进行排序？我不能得到任何关于x-editable问题的想法 –

表格提交后添加行到表格后不刷新 - jquery ajax php

回答

相关问题