成功した場合に関連要素を更新するのを手伝ってくださいjquery ajax

Question

私はジョークアップを投票できるdb driven jokes Webサイトを構築しています。誰かが投票すると、mysql dbのジョークの "score"カラムがインクリメントされます。成功すると、ジョークのスコアがページ上で更新されます。 2つの質問があります。表示される関連スコアを選択するにはどうすればよいのですか？また、更新された値を取得するためにデータベースにクエリを行う方法を教えてください。ここでは、AJAXを実行するにはjQueryのです：

<script type="text/javascript"> 
$(function() { 
    $(".votebutton").click(function() { 
     var id = $(this).attr('id'); 
     var ip = $('.ipz').attr('id'); 
     var dataString = 'id=' + id + '&ip=' + ip; 
     $.ajax({ 
     type: "POST", 
     url: "bin/vote.php", 
     data: dataString, 
     success: function() { 
      // find the associated joke's score and query db for new score, or increment it, either is fine. 
     } 
     }); 
     return false; 
    }); 
}); 
</script> 

は、そして、ここであなたが見ることができるように構成冗談のスコアのdivのidは何である方法は次のとおりです。その後、ID = score_：

<div class="jokecontainer" id="joke_<?php echo $row['id']; ?>"> 
     <div class="score" style="float: left; width: 110px; height: 85px;"> 
      <p class="scorenum" id="score_<?php echo $row['id']; ?>"><?php echo $row['score']; ?></p> 
      <p class="scorevote"><a class="votebutton" id="<?php echo $row['id']; ?>" href="#">VOTE UP</a></p> 
     </div> 
     <div class="joke"> 
      <span class="joketext"><?php echo $row['joke']; ?></span> 
     </div> 
     <div class="jokeinfo" style="float: left; width: 200px; height: 85px; margin-top: 5px;"> 
      <span class="jokeinfo1">Date: </span><span class="jokeinfo2">date</span><br /> 
      <span class="jokeinfo1">Author: </span><span class="jokeinfo2"><?php echo $row['user']; ?></span><br /> 
      <span class="jokeinfo1">Category: </span><span class="jokeinfo2"><?php echo $row['category']; ?></span><br /> 
     </div> 
</div> 

スコアのIDがこれですid。たとえば、IDが123の投票ボタンをクリックすると、スコアのIDは「score_123」になります。

私は私がやろうとしていることがあるのidセレクタを構築していると思う：「score_」と既存のvar id：

var scoreid = "#score_" + id 
$(scoreid).html(); 

そして、第二部 - 私は私のようにスコアを保存すると思っていますjquery変数を変更し、それをインクリメントします。

おかげ

Answer 1

私は、JSONオブジェクトとして、upvoteへの応答として、新しいスコア値を返すためにPHPを変更したいです。あなたの応答を仮定するとのようなものである（あなたはそれがあなたのジョークオブジェクトの表現であることによって、このより複雑にしたいかもしれません - あなたは、このようなだけでなくidとして複数のキーと値を持つことができる）

{"newScore" : 12} 

//or if you want, something more complex like - note the script below assumes the first JSON string 
{"joke":{"id":123456, "score":12, "author":"someone", "date":"2012-12-12T00:00:00"}} 

することができますがそして、あなたがしようと考えていた言及しただけのように新しいスコアをJSONを解析し、挿入：

<script type="text/javascript"> 
$(function() { 
    $(".votebutton").click(function() { 
     var id = $(this).attr('id'); 
     var ip = $('.ipz').attr('id'); 
     var dataString = 'id=' + id + '&ip=' + ip; 
     $.ajax({ 
     type: "POST", 
     url: "bin/vote.php", 
     data: dataString, 
     dataType: 'json', //specify that the response content-type is expected to be JSON 
     success: function(data) { 
      // expect server to return the updated data score 
      if(data.newScore) { 
       $("#score_" + id).html(data.newScore); 
      } 
      else { 
      //handle error condition 
      } 
     } 
     }); 
     return false; 
    }); 
}); 
</script> 

複数のユーザーが同時にアップ投票している場合、これは、いくつかの使用であるかもしれない - 二有権者は正しいが表示されます彼の投票と以前の有権者の投票の合計となる最終的な価値（すなわち、彼は+1の代わりに+2の結果を見るでしょう）。しかし、最初の有権者はまだ失効した値を見ており、2番目の有権者は1の代わりに2ずつ増加して混乱するかもしれないので、これはもっとリアルタイムに何かを得るためにもっと考える必要があります。それはおそらく価値がないと思う - ページ上の特定のコンテンツの更新を確認するハートビートを持つ（ここではちょうどここのような）良い妥協であるかもしれない。

サーバーで何も返さずに、ページ上の現在の投票額をsuccessに増やしたい場合は、次のようにすることができます（このスニペットを最適化したいエラーチェックを追加してください）：

success: function() { 
    var newScore = parseInt($("#score_" + id).html()) + 1; 
    $("#score_" + id).html(newScore); 
}