在CodeIgniter中使用AJAX刪除帖子

Question

CodeIgniter的新手也試圖學習AJAX/jQuery。我跟隨CI創建新聞網站的教程。然後我應用AJAX，每5秒發佈一次帖子。 我現在正在嘗試添加特定帖子的刪除。我可以刪除帖子，但它不會保留在同一頁面上，並刪除我刪除的單個帖子。 （把我帶到一個空白頁面，我必須點擊回來 - 但這篇文章然後被刪除）。

型號：

public function delete_news($id) 
{ 
    $this->db->delete('news', array('id' => $id)); 
} 

控制器：

public function delete_news_ajax($id) 
    { 
     $data['news'] = $this->news_model->delete_news($id); 
    } 

查看腳本：

function getNews(){ 
$.ajax({ 
    url: "<?php echo base_url(); ?>/index.php/news/get_news_ajax/" + timestamp, 
    success: function(data) { 
     articles = jQuery.parseJSON(data); 
     jQuery.each(articles, function() { 
     $("#newsfeed").prepend($("<div id='newspost'><h2>" 
       + this.title + "</h2><p>" 
       + this.text + '</p><p><a href=<?php echo base_url(); ?>/index.php/news/view/' 
       + this.slug + ">View article</a><br><a class='delete' href=<?php echo base_url(); ?>/index.php/news/delete_news_ajax/" 
       + this.id + ">Delete</a></p></div>").fadeIn("slow")); 
      timestamp = this.time; 
     }); 
    } 
}); 

}

我在做什麼錯？該頁面加載/刷新帖子就好了。但我無法使刪除工作。任何幫助，將不勝感激。

Answer 1

我有一個工作解決方案。問題似乎是正確地綁定到DOM的東西。必須在其他人的幫助下打電話才能正確工作。但功能正是我以前的意圖。 個人可以刪除帖子，並且它可以慢慢消失，而無需刷新頁面或將頁面反轉回頂部。

用於從上述

控制器相同型號：

public function delete_news_ajax($id) { 
    $data['status'] = $this->news_model->delete_news($id); 
    echo json_encode($data); 
} 

查看：

var timestamp = ""; 
var numN = 0; 
var numD = 0; 
var chart; 
function getNews() { 
    $.ajax({ 
     url: "<?php echo base_url(); ?>/index.php/news/get_news_ajax/" + timestamp, 
     success: function(data) { 
      articles = jQuery.parseJSON(data); 
      numD = articles.numDelete; 
      jQuery.each(articles.new , function() { 
       numN++; 
       output = "<div class='newspost' id='newspost" + this.id + "'>\n\ 
        <h2>" + this.title + "</h2>\n\ 
        <p>" + this.text + '</p>\n\ 
        <p>\n\ 
         <a href="<?php echo base_url(); ?>/index.php/news/view/"' + this.slug + ">View article</a>\n\ 
         <br><a class='delete' href='#' onclick='return deletenews(" + this.id + ")'>" + "Delete</a>\n\ 
        </p>\n\ 
       </div>" 
       $(".newsfeed").prepend($(output).fadeIn("slow")); 
       timestamp = this.time; 
      }); 

      jQuery.each(articles.deleted, function() { 
       $("#newspost" + this.id).fadeOut('slow', $("#newspost" + this.id).remove); 
       if (this.deletetime > timestamp) { 
        timestamp = this.deletetime; 
       } 
      }); 
     } 
    }); 
} 
$(document).ready(function() { 
    setInterval("getNews()", 1000); 

}); 

function deletenews(postid) { 
    //event.preventDefault(); 
    $.ajax({ 
     url: "<?php echo base_url(); ?>/index.php/news/delete_news_ajax/" + postid, 
     success: function(data) { 
      var status = jQuery.parseJSON(data); 
     } 
    }); 
    return false; 
} 

Answer 2

我猜這個網址會做出一個完整的重定向，因爲它是一個完整的url，它應該完全重定向，而不會阻止它。您可能需要額外的Jquery代碼。這與Codeigniter無關。試試這樣的：

$(document).on("click", "#newsfeed .delete", function(event){ 
    event.preventDefault(); 
    var url = $(this).attr("href"); 
    $.get(url, function(data) { 
    alert('Data Deleted Successfully'); 
}); 
    return false; 
}); 

你也可以使用preventDefault。

上面的代碼可能需要調整一下以適應您的情況。無法測試它，因爲我沒有你的數據庫返回。試試吧，讓我知道你得到了什麼。

[編輯] 我已經對代碼進行了更改。由於.on替代了棄用的.live，它應該能夠檢測通過ajax添加到頁面的新元素。這樣，如果元素正確定位，該功能應該可以工作。我還包括preventDefault以防萬一您需要。它應該像返回false一樣工作，這會阻止錨點重定向頁面。我想你的目標元素必須調整。按照上面的編輯中的顯示，將.on綁定爲文檔。一旦發生這種情況，您的頁面將不會重定向，除非您在頁面中還有其他內容正在打破JavaScript。用firefox找出來。

如果這不起作用，我不得不建議您使用jquery livequery插件Click Here。檢查版本的兼容性。如果使用jquery 1.9，請使用Jquery遷移，因爲.live id已棄用。它在綁定添加像你的元素的元素方面做得很好。

出於很好的理由，此代碼應該可行 - 只需確保您的定位是正確的。 如果沒有，請使用firefox中的firefox，讓我知道你在你的情況下得到什麼。

我希望這可以幫助你。