AJAX + Codeigniter实时页面加载功能

时间:2013-05-09 20:50:14

标签: jquery codeigniter

更新:现在可以100%使用。

这些代码段允许用户单击视图上的“删除”按钮,该按钮向我的控制器发送AJAX请求以与数据库进行交互(删除记录)。然后反馈回调函数中发生的结果,以更新记录被删除的当前视图(没有页面加载)并隐藏元素。

查看:

<?php
// Output the records
if($result)
{
    foreach ($result as $rows => $row) 
    {
        echo "<tr id=\"row" . $row['id'] . "\">";
            echo "<td>" . $row['id'] . " - " . $row['name'] . "</td>";
            echo "<td>" . $row['logo_path'] . "</td>";
            echo "<td>" . $row['date_created'] . "</td>";
            echo "<td>" . "<a href=\"#\" id=\"" . $row['id'] . "\" class=\"delete\">Delete</a><br>" . "</td>";
        echo "</tr>";
    }

} else {
    echo "There are no platforms to show";
}
?>

<script type="text/javascript">
$("a.delete").click(function(e) 
{
    e.preventDefault();
    var platform_id = $(this).attr('data-id');
    var row = $(this).attr('id');

    $.ajax({
        type: "POST",
        url: "platform/delete",
        dataType: "json",
        data: 'platform_id='+platform_id,
        success: function(result){
            if (result.success == 1)
            {
                $("#row" + row).fadeOut();
                //document.getElementById(row).style.display = 'none'
            }
        },
        error: function(result){
            alert(result.message);
        }
    });
});
</script>

控制器:

function delete()
{
    $result=array(); 

    $this->load->model('platform_model');
    $platform_id = $this->input->post('platform_id');

    if($this->platform_model->delete($platform_id))
    {
        $result['success']= 1;
        $result['platform_id']= $platform_id;
        $result['message']= "Success";
    } else {
        $result['success']= 0;
        $result['message']= "Error";
    }

    die(json_encode($result));

}

型号:

function delete($platform_id)
{
    $this->db->where('id =', $platform_id);

    if ($this->db->delete('platforms'))
    {
        return TRUE;
    }
    else
    {
        return FALSE;
    }   
}

1 个答案:

答案 0 :(得分:1)

<强>更新

您无需任何表单代码即可完成此操作。在您更新的问题中,您缺少定义id变量的位置。没有它,您将无法删除记录。

如果HTTP POST请求是提交它的表单,则会通过HTTP POST请求发送数据。使用您的AJAX代码数据也作为POST数据发送,由Codeigniter在您的AJAX模型方法中使用$this->input->post()数组进行处理。调试此过程的一个很好的工具是Firebug,您可以看到发布的数据和返回的内容(Net / XHR选项卡)

在我使用属性data-id而不是id属性之前的示例中,后者需要是唯一的。我自己更喜欢这个解决方案,但您可以使用除id之外的任何属性名称(如果重复属性值)。

$('a.delete').click(function(e) 
{
   e.preventDefault();
   var id = $(this).attr('data-id');
   // your ajax call

将HTML匹配为锚点,但可以是按钮或任何其他元素:

<a href="#" data-id="<?php echo $row['id']; ?>" class="delete">Delete</a>

AJAX代码是通过点击删除链接触发的,因此不需要任何表格。