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以防万一你需要它。它应该像返回false一样工作，这应该阻止锚重定向页面。我想你的目标元素必须调整。将.on绑定到上面编辑中显示的文档。一旦发生这种情况，您的页面就不会重定向，除非您在页面中有其他内容破坏了javascript。使用firefox找到它。

如果这不起作用，我必须建议您使用jquery livequery插件Click Here。检查版本是否兼容。如果使用jquery 1.9，请使用Jquery迁移，因为不推荐使用.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;
}

在CodeIgniter中使用AJAX删除帖子

2 个答案: