0

CodeIgniterは初めてで、AJAX/jQueryも学習しようとしています。ニュースサイトの作成に関するCIのチュートリアルに従いました。次に、AJAXを適用して、投稿を5秒ごとにロードしました。現在、特定の投稿に削除を追加しようとしています。投稿を削除することはできますが、同じページにとどまらず、削除した1つの投稿を削除します。（空白のページに移動し、クリックして戻る必要がありますが、投稿は削除されます）。

モデル：

    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

私は実用的な解決策を持っています。問題は、物事を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 に答える
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を使用することをお勧めします。バージョンの互換性を確認してください。.live id が廃止されたため、jquery 1.9 を使用している場合は Jquery migrate を使用してください。あなたのような ajax 追加要素をバインドするのに適しています。

正当な理由により、まさにこのコードが機能するはずです。ただし、ターゲティングが正しいことを確認してください。そうでない場合は、firefox で firebug を使用して、あなたのケースで何が得られるか教えてください。

これがお役に立てば幸いです。

于 2013-02-25T09:10:27.713 に答える