2017-11-20 15 views
0

フィードの各投稿に個別のfeedLikes.phpを読み込むフィードページがあります。現在、私は各投稿が好きで、Ajaxを使って好きなものを更新しています。ただし、likeが更新されるたびに、フィードの先頭に戻ります。以下はfeedLikes.phpです:データID付きAjax成功関数

if (isset($_POST['feedID'])) 

    { 

$feedID = ($_POST['feedID']); 

$findHasUserLiked = $pdo->prepare('SELECT username FROM feedLikes WHERE feedID =? and username=?'); 

//execute query and variables 
$findHasUserLiked->execute([$feedID, $username]); 

if ($findHasUserLiked->rowCount() > 0) 
    { 

$hasUserLiked = $findHasUserLiked->fetchColumn(); 

echo<<<_END 

<form action="feedLikes.php" id="unlikePostForm$feedID" method="post"> 

<button type="submit" class="unLikeButton"></button> 

<input type="hidden" name="feedIDForUnlike" class="feedIDForUnlike$feedID" value="$feedID"> 

</form> 

_END; 

?> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 

$('#unlikePostForm<?php echo $feedID ?>').on('submit', function (e) { 
    e.preventDefault(); 

var feedIDUnlike = $(".feedIDForUnlike<?php echo $feedID ?>").val(); 



    $.ajax({ 
     url: "feedLikesClicked.php", 
     cache: false, 
     type: "POST", 
     data: {feedIDUnlike: feedIDUnlike}, 
     dataType: "html", 
     success: function(html){ 
    location.reload(); 
     } 
    }); 
    }); 
}); 

</script> 

<?php 

} 

else 

{ 

echo<<<_END 

<form action="feedLikes.php" id="likePostForm$feedID" method="post"> 

<button type="submit" class="likeButton"></button> 


<input type="hidden" name="feedIDForLike" class="feedIDForLike$feedID" value="$feedID"> 

</form> 

_END; 

?> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 

$('#likePostForm<?php echo $feedID ?>').on('submit', function (e) { 
    e.preventDefault(); 

var feedIDLike = $(".feedIDForLike<?php echo $feedID ?>").val(); 



    $.ajax({ 
     url: "feedLikesClicked.php", 
     cache: false, 
     type: "POST", 
     data: {feedIDLike: feedIDLike}, 
     dataType: "html", 
     success: function(html){ 
    location.reload(); 
     } 
    }); 
    }); 
}); 

</script> 

<?php 

} 


$likesNumber = $pdo->prepare('SELECT count(*) FROM feedLikes WHERE feedID =?'); 

//execute query and variables 
$likesNumber->execute([$feedID]); 

$numberOfLikes = $likesNumber->fetchColumn(); 

print' 
<div class=numberOfLikes data-id="'.$feedID .'"> 
<p>'. $numberOfLikes .'</p> 
</div>'; 

} 

私はlocation.reload()は実際にすべてのfeedLikes.phpページ、私が気に入っているだけではなくつのポストをリロードしているため、これは承知しています。しかし、私は1つのポストを更新し、フィードの先頭に戻さないためにどのような成功関数を使用する必要があるのか​​分かりません。

私はそうのようなdivの中にfeedLikes.phpのすべてを置く試してみました:この行を使用して、AJAX成功に

<div class=allLikesPage data-id="'.$feedID .'"> 

、その後:

$('.allLikesPage[data-id='"+ feedID +"']').load(document.URL + ' .allLikesPage[data-id='"+ feedID +"']'); 

しかしちょうどすべてを削除しないこと更新。私は他のものの中でもデータIDなしで同じことを試みました。

+0

あなたが気に入った後に好きなものを計算し、そのフィードだけをリロードして更新したくない場合は、フィードに表示されているお気に入りを上書きする必要があります。 1つのインデックスのようにして、別のものにtrueまたはfalseを入れてから、その配列でjson_encodeを使用して読み込み機能を使用すると、$ .parseJsonをparsedataに使用し、data.success、data.likes –

+0

wowのように使用します。私は本当に感謝しています。ありがとうございましたが、いくつかのコードでこれを答えとして書くことができます。私はそれにすべて非常に新しいと$ .parseJsonなどを使用して行く方法を確信していない。 – crapAtCode

+0

私は私の席に戻ったときにちょうどいくつかの時間を与える、私はなります –

答えて

1

が、あなたは私が、私は自分のドメイン上の例を追加しましたので、

あなたPHPファイルは次のようになりますajax応答をエンコードする方法を示すために、私はSQLを省略していた例hereを見ることができます行きます配列はあなたはそれが役に立つあなたは物事が

<?php 
$response = array('success'=>false,'likes'=>0); 


if(isset($_POST['count'])){ 
    $counter = $_POST['count']; 
    $response['likes']=$counter+1; 
    $response['success']=true; 
} 

echo json_encode($response); 
?> 

を作業しているどのようにあなたのHTMLページが

を下回っているに見て、あなたのローカルマシン上でこのコードを使用することができます願って json_encodeを使用する方法のロジックのみを一部、コメントを追加しました
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
    <style> 
     .feed { 
      width: 95%; 
      height: auto; 
     } 

     i.fa { 
      cursor: pointer; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".voteup").click(function() { 
       var curElement = $(this); 
console.log(curElement.parent().find('.likes').text()); 
       $.ajax({ 
        url: 'test.php', 
        dataType: 'json', 
        data: 'count=' + curElement.parent().find(".likes").text(), 
        method: 'POST' 
       }).done(function (data) { 
        if (data.success) { 
         curElement.parent().find(".likes").html(data.likes); 
        } else { 
         alert('Some Error occoured at the server while liking the feed'); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Panel Heading</div> 
     <div class="panel-body"> 
      <div class="feed"> 
       <p>This is my feed can someone like it</p> 
       <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i> 
       <span class="likes">0</span> 
       <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i> 
       <span class="dlikes">0</span> 
      </div> 
      <div class="feed"> 
       <p>Another feed item</p> 
       <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i> 
       <span class="likes">0</span> 
       <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i> 
       <span class="dlikes">0</span> 
      </div> 
      <div class="feed"> 
       <p>This is my feed can someone like it</p> 
       <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i> 
       <span class="likes">0</span> 
       <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i> 
       <span class="dlikes">0</span> 
      </div> 
      <div class="feed"> 
       <p>This is my feed can someone like it</p> 
       <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i> 
       <span class="likes">0</span> 
       <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i> 
       <span class="dlikes">0</span> 
      </div> 
      <div class="feed"> 
       <p>This is my feed can someone like it</p> 
       <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i> 
       <span class="likes">0</span> 
       <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i> 
       <span class="dlikes">0</span> 
      </div> 
      <div class="feed"> 
       <p>This is my feed can someone like it</p> 
       <i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i> 
       <span class="likes">0</span> 
       <i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i> 
       <span class="dlikes">0</span> 
      </div> 
     </div> 
    </div> 


</body> 


</html> 

EDIT:基本的に、私はちょうど掲示変数countをインクリメントしています

あなたはちょうどあなたがAJAX呼び出しを送った後、データベースに同類を更新する必要があることを行うと、その後にカウントする必要はありません。 SQLクエリを使用して私が使用しているのと同じ形式で出力を表示してください。$.parseJSON()については、dataTypeを設定した場合は、dataTypeJSONに設定されています。 var myData=$.parseJSON(data);を使用し、次にのように使用する必要がありますmyData.success

関連する問題