在CodeIgniter中使用AJAX删除帖子

Question

New to CodeIgniter and trying to learn AJAX/jQuery as well. I followed CI's tutorial on creating News site. I then applied AJAX to have posts load every 5 seconds. I'm now attempting to add a delete for specific posts. I'm able to delete a post, but it doesn't stay on the same page and remove that single post I deleted. (Takes me to a blank page and I have to click back - but the post is then deleted).

Model:

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

Controller:

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

View Script:

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

}

What am I doing wrong? The page loads/refreshes posts just fine. But I can't get the delete to work. Any help would be appreciated.

Answer 1

I guess the url is going to make a full redirect because it is a complete url that should make a full redirect nothing preventing it. You might need an extra Jquery code. This has nothing to do with Codeigniter. Try something like this:

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

You could also use the preventDefault.

The above code could need a little tweaking to fit your case. Couldn't test it since I don't have what your db is returning. Just try it and let me know what you get.

[EDIT] I have made changes to the code. Since .on replaces the deprecated .live, it should be able to detect new elements that are added to the page via ajax. That way, the function should work if the element is properly targeted. I also included the preventDefault just in case you need that. It should work like return false, which should prevent the anchor from redirecting the page. I guess your target element has to be adjusted. Bind .on to document as show in the edit above. Once this happens your page would not redirect except you have something else in the page that is breaking the javascript. Use firefox to find this out.

If that does not work, I'd have to recommend that you use the jquery livequery plugin Click Here . Check version for compatibility. Use Jquery migrate if using jquery 1.9 because .live id deprecated. It does a good job in binding ajax added elements like yours.

For good reasons, this very code should work--just ensure that your targeting is correct. If it doesn't, please use firebug in firefox and let me know what you get in your case.

I hope this helps you.

Answer 2

I have a working solution. Issue seemed to be with binding things correctly to the DOM. Had to call in the help of a couple others to get this all working correctly. But functions exactly how I had intended before. An individual can delete a post, and it fades away slowly without having to refresh the page or bumping the page back up to the top.

Used the same Model from up above

Controller:

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

View:

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