0

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>
  • Guess you need to remove 'var' in front of 'var query' as your function cannot read it. Need's to be a global variable. If you debug your code, you will see that the variable "query" is empty inside the SpService function. – Christoffer Mar 20 '18 at 16:15
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.