GET後のページにいくつかのDivsをリフレッシュする

Question

私のページには画像のリストがあります。各画像で、削除や編集などのコントロールを設定します。削除リンクは次のとおりです。

<a href='delete.php?imageid=xx'>Delete Image</a> 

私はページで設定no形式を持っていないので、削除画像上のユーザーのクリックが、それはその後、delete.phpページに行くとき、データベースから画像を削除し、前のページに戻ります。ユーザーが削除をクリックしたときにやろうとしていることは、画像を削除してDIVを更新しただけで、delete.phpページに移動してから元のページに戻る必要があります。このAJAX/Jquery私が見てきたものはすべてフォームを必要としたので、どうやって始めたらよいか分かりません。

jqueryを使用してこれを行うにはどうすればよいですか？

ありがとうございました。

Answer 1

あなたは、その後のget（）関数で、実行を介してサーバにデータを送信する。これは、クリックをリッスンされ

$(myimage).click(function() { 
    $.get('delete.php', function(data) { 
    // this is processed once the delete.php has been processed 
    postProcess(); 
    }); 
}); 

....画像やボタンやリンクをclicksを待ち受けることができ完了時にpostProcess（）と呼ばれるメソッド

Answer 2

まず、すべての削除リンクにクラスを選択して、簡単に選択できるようにします。

javascriptの

$(function(){ 
    $('.delete').click(function(e){ 
     var url = $(this).attr('href'); 
     $.get(url, function(){ 
      $('yourdivid').load('put url here'); // this will load div with new content 
     }); 
     e.preventDefault(); 
    }); 
}); 

編集のためのその後

<a href='delete.php?imageid=xx' class="delete">Delete Image</a> 

：あなたは

<div id="images"> 

</div> 

をリフレッシュしたいページ上のdivを持っていると言うそして、あなたはいくつかの方法で更新することができ

$('#images').load('http://yoursite.com/show_images #images'); // this would be the current pages url 

abov eコードはページを取得してイメージdivを抽出し、現在のページイメージdivを置き換えます。

あなたはまた、任意のイベントハンドラ、DIVをリフレッシュの意味を覚えておいてください

$('#images').load('http://yoursite.com/show_image_div'); // this is the partial views url. This only sends back html for the div and no other html. 

（これが唯一のdivのHTML、ない他のHTMLが含まれています）あなたが既に持っているという部分図と現在のdivを更新することができあなたが現在持っているものはもはや動かなくなります。ライブやデリゲートを使わなければなりません。

もっと良い方法は、divをリフレッシュする代わりにdivからイメージを削除することです。

 $.get(url, function(){ 
      $image_div.remove();  
     }); 

Answer 3

おそらく各画像の周りに削除ボタンがあります。あなたのようなマークアップしている場合場合

$('a[href^="delete.php"]').click(function() { // for all delete buttons 
    var url = $(this).attr('href'); // ge delete image url 
    var $img = $(this).parent(); // find image container element 
    $.post(url, function() { // make call to delete image 
     $img.remove(); // delete image on success call 
    }); 
    return false; 
}); 

：だから、あなたが必要とするあなたのdeleteボタンをクリックする上でこの場合

<div> 
    <a href='delete.php?imageid=xx'>Delete Image</a> 
    <img src='...' /> 
</div> 

画像はdelete.phpに成功要求に削除され、あなたドンされますページ上でリフレッシュする必要はありません。

コードを// find image container elementで再生して、削除の正しい要素を見つけることができます。