aktualisieren Daten mit Ajax

Question

Ich bin ein Projekt zu tun, dass ein soziales Netzwerk wie Facebook, ich brauche Gleichen ohne Refresh zählen zu aktualisieren (Ajax) mit jsrender, das ist mein Code:

Wie kann ich die Anzahl der ersetzen die Likes, die Post mit Ajax haben?

<script type="text/x-jsrender" id="postsTemplate"> 
 
    ... 
 
<div class="feed-post-options"> 
 
    <div class="feed-post-buttons" data-postId="{{:PostId}}"> 
 
    <p class="post-feed-options" id = "postLikesCount">{{:PostLikesCount}}</p> 
 
    {{if PostIsLiked }} 
 
     <a class="small-icons-feed" href="javascript:likePost('{{:PostId}}')"><span class="glyphicon glyphicon-thumbs-up like"></span></a> 
 
    {{else}} 
 
     <div> 
 
      <a class="small-icons-feed" href="javascript:likePost('{{:PostId}}')"><span class="glyphicon glyphicon-thumbs-up-checked like"></span></a> 
 
     </div> 
 
    {{/if}} 
 

 
    <p class="post-feed-options">{{:NumberOfComments}}</p> 
 
    <a class="small-icons-feed" href="#"><span class="glyphicon glyphicon-comment comment" title="Comment"></span></a> 
 
    <p class="post-feed-options">0</p> 
 
    <input id="postIdValue" type="hidden" value={{:PostId}} /> 
 
    <a class="small-icons-feed" href="javascript:shareModal('{{:PostId}}')" name="Save" data-toggle="modal" data-target="#shareModal" onclick="shareModal('{{:PostId}}')"><span class="glyphicon glyphicon-share share" title="Share"></span> 
 
    </a> 
 
    </div> 
 
    ... 
 
</div> 
 
    .... 
 
</script> 
 

 
<script type="text/javascript"> 
 
    
 
    function likePost(postId) { 
 
     var appUserId = $("#appUserValue").val(); 
 
     var request = 
 
     $.ajax("/Home/LikeComment", { 
 
     type: "GET", 
 
     dataType: "html", 
 
     data: { appUserId: $("#appUserValue").val(), postId: postId }, 
 
       success: function (data) { 
 
       //how can i replace the number of the likes without refresh 
 
       }}); 
 
      request.done(function(jqXHR, textStatus){//just debug 
 
       alert("Request done: " + textStatus) 
 
       }); 
 
      request.fail(function(jqXHR, textStatus) { 
 
       alert("Request failed: " + textStatus); 
 
       }); 
 
     } 
 

 
</script>

Answer 1

können Sie jQuery verwenden den Textinhalt des Elements zu ändern:

<p class="post-feed-options" id="postLikesCount">{{:PostLikesCount}}</p> 

und den Innertext auf die neue aktualisierten Zählung gesetzt.

Alternativ können Sie JsViews verwenden, um die Daten zu binden (siehe http://www.jsviews.com/#jsv-quickstart) und dann die PostLikesCount beobachtbar aktualisieren - was automatisch eine inkrementelle Aktualisierung des Innertext auslösen:

<p class="post-feed-options" id="postLikesCount">{^{:PostLikesCount}}</p> 

oder

<p class="post-feed-options" id="postLikesCount" data-link="PostLikesCount"></p>