SPServices in a Display Template to retrieve blog comments

Question

I have built a display template and used the CSWP to show blog post comments and likes, however, being a CSWP it only updates once the search runs. I want the comments or likes to update immediately after someone posts a comment or a like. I have used spservices as below to return the comments and likes in "real time" but all my comment and post counts are appearing in the first item's commentsDIV. Any suggestions? Thanks in advance.

<!--#_

var itemID = ctx.CurrentItem.ListItemID;
var query = "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + itemID + "</Value></Eq></Where></Query>";
$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Posts",
    CAMLQuery: query,
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='NumComments' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var commentCountVar = "<span>" + $(this).attr("ows_NumComments") + "</span>";
        $("#commentsDIV").append(commentCountVar);
      });
    }
  });
});
_#-->

<div id="commentsDIV"></div>

Answer 1

So, I got this working with the following:

    var itemID = ctx.CurrentItem.ListItemID;
var query = "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + itemID + "</Value></Eq></Where></Query>";  

$(document).ready(function() {
  $().SPServices({
    webURL: "<<webURL>>",
    operation: "GetListItems",
    async: true,
    listName: "Posts",
    CAMLQuery: query,
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='NumComments' /><FieldRef Name='LikesCount' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {          
        var commentCountVar = "<span>" + $(this).attr("ows_NumComments") + "</span>";
        $("#commentCountJS"+itemID).append(commentCountVar);            
        if($(this).attr("ows_LikesCount") > 0){
            var likesCountVar = "<span>" + $(this).attr("ows_LikesCount") + "</span>";
            $("#likesCountJS"+itemID).append(likesCountVar);
        } 
        else{
            var likesCountVar = "0"
            $("#likesCountJS"+itemID).append(likesCountVar);
        }
      });
    }
  });
});

Which is great....sometimes! There is an intermittent issue where the console returns an "Object doesn't support property or method 'SPServices'" error and the comments don't load. I have tried adding the following to get this query to load last, but none have worked:

• Adding setTimeout
• Adding windowsetinterval
• Changing document.ready to window.on
• Loading spservices into the item display template as well as control
• Changing WPs to asynchronous

Would appreciate any pointers. Many thanks in advance.