javascript - Ajax ボタンの無効化

Question

ユーザーが特定の投稿を評価した後、Ajax を使用してボタンを無効にしたいと考えています。目標は、この投稿に対する不必要な投票の増加を避けることです。これがコードです、助けてください

<script type='text/javascript'>
$(function(){
    $("a.vote_up").click(function(){
    //get the id
    the_id = $(this).attr('id');

    // show the spinner
    $(this).parent().html("<img src='images/spinner.gif'/>");

    //fadeout the vote-count 
    $("span#votes_count"+the_id).fadeOut("fast");

    //the main ajax request
        $.ajax({
            type: "POST",
            data: "action=vote_up&id="+$(this).attr("id"),
            url: "votes.php",
            success: function(msg)
            {
                $("span#votes_count"+the_id).html(msg);
                //fadein the vote count
                $("span#votes_count"+the_id).fadeIn();
                //remove the spinner
                $("span#vote_buttons"+the_id).remove();

            }
        });
    });


}); 
</script>

score 0 · Accepted Answer

アンカータグを投稿した後、hideメソッドを使用して非表示にします。あなたがしなければならないもう一つのことpreventDefaultは、リンクのデフォルトの振る舞いを防ぐためにメソッドを使用することです。

 $(function(){
    $("a.vote_up").click(function(e){
    e.preventDefault();
    var item=$(this);
    the_id = item.attr('id');
    $(this).parent().html("<img src='images/spinner.gif'/>");
    $("span#votes_count"+the_id).fadeOut("fast");

        $.ajax({
            type: "POST",
            data: "action=vote_up&id="+the_id,
            url: "votes.php",
            success: function(msg)
            {
                $("span#votes_count"+the_id).html(msg);                 
                $("span#votes_count"+the_id).fadeIn();                   
                $("span#vote_buttons"+the_id).remove();
                item.hide();  // hide the link

            }
        });
    });    

});

リンクを非表示にせずにそのままにしておきたい場合は、この方法で行うことができます。ajax呼び出しから成功応答を受け取ったら、リンクの1つの属性値を「done」または何らかの値に設定します。リンクをクリックするときは、まず値が設定されているかどうかを確認してください。そうであれば。二度とajaxをしないでください。このようなもの。

 $(function(){
    $("a.vote_up").click(function(e){
      e.preventDefault();
      var item=$(this);
      if(item.attr("status")!="voted")
      {
         the_id = item.attr('id');
         $(this).parent().html("<img src='images/spinner.gif'/>");
         $("span#votes_count"+the_id).fadeOut("fast");

          $.ajax({
             type: "POST",
             data: "action=vote_up&id="+the_id,
             url: "votes.php",
             success: function(msg)
             {
                $("span#votes_count"+the_id).html(msg);                 
                $("span#votes_count"+the_id).fadeIn();                   
                $("span#vote_buttons"+the_id).remove();
                item.attr("status","voted");
                item.addClass("disabledLook"); //apply a css class to make the link look like disabled    
             }
           });
       }
    });        
});

score 0 · Accepted Answer

Jquery .one()を使用して、シングルクリックをaタグにバインドできます。

このフィドルの例を見てください!

$(function(){
    //click only once
    $("a.vote_up").one("click", function(e) {
        e.preventDefault();
        $('p').append('clicked ');
    });
});

ノート：

e.preventDefault();ブラウザーが href 属性をたどることを禁止するために追加されました。（ここを読む）

score 0 · Accepted Answer

このフィドルをチェックして、javascript でボタンを無効にします。

ページを更新した後も無効にしたい場合は、html5 ストレージ、Cookie、またはセッション変数を使用して、ユーザーが投票した場所を保存する必要があります。

score 0 · Accepted Answer

a1 行のコードでリクエストを送信した後の単純なバインド解除アクション:

$("a.vote_up").click(function(){
    // you ajax request here
    $(this).unbind('click');
});

javascript - Ajax ボタンの無効化

4 に答える 4

Related

Reference