jquery ajaxを使用してfollow-unfollowボタンを実装できません。

Question

シナリオ：followおよびunfollowアクションのデータベース部分が正常に動作しています。 jqueryとajaxのいくつかの問題は、ボタンをクリックしてからではなく、ページを更新した後でのみ、followからunfollow（CSSスタイルはほとんどありません）に変わります。リフレッシュせずにボタンを複数回クリックすることはできません。私はjqueryの - AJAXの適切な理解を持ってscroll down toパソコンへ転送、以来ここでjqueryの部未満

<script> 
function addfollow(friend,action) 
{ 
    $.ajax({ 
     url:"follow.php", 
     data:'friend='+friend+'&action='+action, 
     type:"POST", 
     success:function(data){ 
      switch(action){ 
       case "follow": 
       $("#"+friend).html('<input type="submit" id="'+friend+'" class="unfollow" value="unfollow" onClick="addfollow('+friend+',\'unfollow\')"/>'); 
       break; 
       case "unfollow": 
       $("#"+friend).html('<input type="submit" id="'+friend+'" class="follow" value="follow" onClick="addfollow('+friend+',\'follow\')"/>'); 
       break; 
      } 
     } 
    }); 
} 
</script> 

ので、私は間違って何かがなければならないと信じて、上記の方法

<?php 
    $action="follow"; 
    if()//php code to check if user is already a follower 
    { 
     $action="unfollow"; 
    } 
    $friend=$name; 
?> 
<div class="col-sm-12"> 
    <input type="submit" id="<?php echo $friend;?>" class="<?php echo $action;?>" value="<?php echo $action?>" onClick="addfollow('<?php echo $friend;?>','<?php echo $action;?>')"> 
</div> 

を呼び出すためのHTML + PHPのコードですsucess：function（data）の構文を使用します。 H

Answer 1

jQuery.html()。一致する要素のHTML内部を取得/設定します。あなたがここで欲しいものではありません。 .replaceWith()を試して、現在の要素を削除し、別の要素に置き換えてください。

EDIT：あなたはより多くのjavascriptの中心のアプローチをとった場合にも、より良い運を持っているかもしれません

。 PHPでjavascriptを書くと混乱することがあります。

PHPコードでは、そのように見える要素が作成されました。

<button> data-friend-id="<?php echo $friend;?>" class="follow-button <?php echo $action;?>" data-following="true"></button> 

次に、ロジックの残りの部分をjavascriptで処理できます。次のようなものがあります：

//Set a click handler on the follow buttons. 
$('.follow-button').click(handleFollowClick); 

function handleFollowClick() { 
    var $button, friend_id, action;  

    // jQuery will set 'this' to the button that was clicked. 
    $button = $(this); 

    // Extract data from the button. 
    friend = $button.data('friend-id'); 
    action = $button.data('following') === 'true' ? 'unfollow' : 'follow'; 

    $.ajax({ 
    url:"follow.php", 
    data:'friend='+friend+'&action='+action, 
    type:"POST", 
    success:function(data){ toggleFollow($button)} 
    }); 
} 

//You could actually get away with styling the button default as 
//not-following. Then just $button.toggleClass('follow'); but 
//this is consistent with your existing approach. 
toggleFollow($button) { 
    if ($button.data('following') === 'true) { 
    $button.data('following', 'false'); 
    $button.removeClass('unfollow'); 
    $button.addClass('follow'); 
    } else { 
    $button.data('following', 'true'); 
    $button.removeClass('follow'); 
    $button.addClass('unfollow'); 
    } 
}