Rating Feature in Display Form SharePoint 2013

Question

I want to use custom display form to submit the star rating feature using out of box approach or JSOM. Feature should have the exact same the functionality when you submit the rating in AllItems.aspx view.

Answer 1

Code for showing stars on the page / html content

<div class="ms-comm-noWrap">
        <span id="averageRatingElement-4">
            <a href="javascript:SetRating('1')">
                <span title="Click to apply your rating as 1 star." class="ms-comm-ratingsImageContainer">
                    <img id="averageRatingElement-4-img-1" alt="Click to apply your rating as 1 star." src="/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43" />
                </span>
            </a>
            <a href="javascript:SetRating('2')">
                <span title="Click to apply your rating as 2 stars." class="ms-comm-ratingsImageContainer">
                    <img id="averageRatingElement-4-img-2" alt="Click to apply your rating as 2 stars." src="/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43" />
                </span>
            </a>
            <a href="javascript:SetRating('3')">
                <span title="Click to apply your rating as 3 stars." class="ms-comm-ratingsImageContainer">
                    <img id="averageRatingElement-4-img-3" alt="Click to apply your rating as 3 stars." src="/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43" />
                </span>
            </a>
            <a href="javascript:SetRating('4')">
                <span title="Click to apply your rating as 4 stars." class="ms-comm-ratingsImageContainer">
                    <img id="averageRatingElement-4-img-4" alt="Click to apply your rating as 4 stars." src="/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43" />
                </span>
            </a>
            <a href="javascript:SetRating('5')">
                <span title="Click to apply your rating as 5 stars." class="ms-comm-ratingsImageContainer">
                    <img id="averageRatingElement-4-img-5" alt="Click to apply your rating as 5 stars." src="/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43" />
                </span>
            </a>
        </span>
        <span class="ms-comm-ratingSeparator"></span>
        <span title="0 people rated this." class="ms-comm-ratingCountContainer" id="ratingDisplay"></span></div>

Get Rating from the item

var itemRating;
function GetRating() 
{ 
    try
    {   
        $("#ratingDisplay").html("0");
        $("#ratingDisplay").attr('title','0 people rated this.');

        //alert("1");   
        var countryValue = $("#ddlCountry").val();
        var siteURL =  _spPageContextInfo.siteAbsoluteUrl + "/" + countryValue;
        var spCtx = new SP.ClientContext(siteURL);
        var list = spCtx.get_web().get_lists().getByTitle("Section Whats New");
        var itemID = document.getElementById("hdnWhatNewItemId").value;
        if(itemID >0)
        {
         this.itemRating= list.getItemById(itemID);
         spCtx.load(itemRating);
         spCtx.executeQueryAsync
         (
            Function.createDelegate(this, this.onQuerySucceeded), 
            Function.createDelegate(this, this.onQueryFailed)
         );
        }
    }
    catch(err) {}
}

function onQuerySucceeded(sender , args) 
{
    //debugger; 
        var averageRating = itemRating.get_item('AverageRating');
        var ratingCount = itemRating.get_item('RatingCount');
        $("#ratingDisplay").html(ratingCount);
        $("#ratingDisplay").attr('title',ratingCount  +' people rated this.');
        if(averageRating == 0)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
        }               
        else if(averageRating == 0.5)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarLeftHalfFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
        }
        else if(averageRating == 1)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
        }
        else if(averageRating == 1.5)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarLeftHalfFilled.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
        }
        else if(averageRating == 2)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
        }
        else if(averageRating == 2.5)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarLeftHalfFilled.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
        }
        else if(averageRating == 3)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
        }
        else if(averageRating == 3.5)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarLeftHalfFilled.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
        }
        else if(averageRating == 4)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarEmpty.png?rev=43");
        }
        else if(averageRating == 4.5)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarLeftHalfFilled.png?rev=43");
        }
        else if(averageRating == 5)
        {
            $("#averageRatingElement-4-img-1").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-2").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-3").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-4").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
            $("#averageRatingElement-4-img-5").attr("src","/_layouts/15/images/RatingsSmallStarFilled.png?rev=43");
        }   
}

function onQueryFailed(item , args) 
{
   SP.UI.Notify.addNotification("Error in getting rating.", false);
}

Set Rating for the item

function SetRating(rValue) 
{
    try
    {                   
        var countryValue = $("#ddlCountry").val();  
        var upd = this; 
        var siteURL =  _spPageContextInfo.siteAbsoluteUrl + "/" + countryValue;
        var listGUID="";
        var listGUIDURL = siteURL +"/_api/web/lists/getbytitle('Section Whats New')?$select=Id";

        var itemID = document.getElementById("hdnWhatNewItemId").value; 
        $.ajax(
        {        
            url: listGUIDURL,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) 
            {
                if (data.d.Id != "")
                {    
                    listGUID=data.d.Id;             
                    //alert("here 1");
                    var spCtx = new SP.ClientContext(siteURL);
                    Microsoft.Office.Server.ReputationModel.Reputation.setRating(spCtx, listGUID, itemID, rValue);
                    spCtx.executeQueryAsync(
                        function() {
                            SP.UI.Notify.addNotification("Thank you for rating.", false);
                            GetRating();
                        },
                        function() {
                            SP.UI.Notify.addNotification("There was an error saving.", false);                         
                        });          

                }
            }
        });
    }
    catch(err)
    {
        SP.UI.Notify.addNotification("There was an error saving.", false);                         
    }
}