0

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

}

我究竟做错了什么？页面加载/刷新帖子就好了。但我无法让删除工作。任何帮助，将不胜感激。

4

2 回答 2

0

我猜该 url 将进行完全重定向，因为它是一个完整的 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 以防万一。它应该像 return false 一样工作，这应该防止锚重定向页面。我猜你的目标元素必须调整。将 .on 绑定到文档，如上面的编辑所示。一旦发生这种情况，您的页面将不会重定向，除非您在页面中有其他内容破坏了 javascript。使用 Firefox 来找出这一点。

如果这不起作用，我不得不建议您使用 jquery livequery 插件Click Here。检查版本的兼容性。如果使用 jquery 1.9，请使用 Jquery 迁移，因为不推荐使用 .live id。它在绑定像你这样的 ajax 添加元素方面做得很好。

有充分的理由，这个代码应该可以工作——只要确保你的定位是正确的。如果没有，请在 firefox 中使用 firebug，让我知道你在你的情况下得到了什么。

我希望这可以帮助你。

于 2013-02-25T09:10:27.713 回答
0

我有一个可行的解决方案。问题似乎在于将事物正确绑定到 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;
}
于 2013-03-06T23:09:37.433 回答