在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

我猜該網址將進行完全重定向，因為它是一個完整的網址，應該進行完全重定向不會阻止它。 您可能需要一個額外的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，以防萬一您需要它。 它應像return false一樣工作，這應防止錨點重定向頁面。 我想您的目標元素必須調整。 如上編輯所示，將.on綁定到文檔。 一旦發生這種情況，您的頁面將無法重定向，除非頁面中有其他損壞JavaScript的內容。 使用firefox找出答案。

如果還是不行，我必須建議您使用了jQuery的liveQuery插件點擊這里 。 檢查版本的兼容性。 如果使用jquery 1.9，請使用Jquery migration，因為不建議使用.live id。 在綁定像您這樣的ajax添加元素方面，它做得很好。

出於充分的原因，此代碼應該可以正常工作-只需確保您的定位正確即可。 如果不是，請在firefox中使用firebug，讓我知道您的情況。

我希望這可以幫助你。

Answer 2

我有一個可行的解決方案。 問題似乎在於將事物正確綁定到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;
}