Hide div or span based on user's permission

Question

I'm using REST API to populate contents on a page. Each item has an Edit link to allow content provider to edit the text and image. Content Providers are members of 'CPGroup' SharePoint Group with contribute permission.

I want to show/hide the Edit link based on group or anyone with contribute or higher permission.

I read this article about Security Trim Snippet and tried the solution posted on this page.

Below is the code I'm using where I want to hide the Edit link:

My js file starts with:

$(document).ready(function(){
    loadhmData();
});

function loadhmData() {    
    var iconNavStart = '<i class="fab fa-readme"></i> Read More</a> | <a href="/sites/xxx/Lists/xxx/EditForm.aspx?ID=';
var iconNavEnd = '" alt="Edit above item" Title="Edit above item"><i class="fas fa-edit"></i> Edit</a>';

The page is populated using this:

    if (stringTitle == "/sites/xxx/xxxx/pages/home.aspx") {
    var requestUri = siteAbsUrl + "/_api/web/Lists/getByTitle('Page Details')/Items?$\
        filter=Category eq 'Employees'&$\
        select=Id, Title, ImageURL, Description, PageURL";

    var ajaxhm = $.ajax({
        url: requestUri,
        async: false,  //pass value outside of ajax
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            if (data.d != undefined) {
                $.each(data.d.results, function (index, item) {
                    myId = data.d.results[itemNum].Id;
                    myTitle = data.d.results[itemNum].Title;
                    myImg = data.d.results[itemNum].ImageURL;
                    myBody = data.d.results[itemNum].Description;
                    myUrl = data.d.results[itemNum].PageURL;
                    myDisplayBlock = myDisplayBlock + '<div class="col-xs-12 col-sm-6 col-md-4">'
                        + '<a href="' + myUrl + '"><img style="width:100%; height:auto" src="' + myImg + '?renditionID=2"></a>'
                        + '<a href="' + myUrl + '"><h2 style="text-align:center">' + myTitle + '</h2></a><p>' + myBody + '</p><p><a href="' + myUrl 
                        + '" alt="more about ' + myTitle + ' information" title="' + myTitle + '">'
                        + iconNavStart + myId + iconNavEnd + '</p><br/><br/></div>';
                    itemNum++;
                });
            }
        },
        error: function (data) { alert("Failed.");  }
    });
}

Below is what it looks like currently:

I attempted using SPServices from the 2nd link I provided above and inserted a <div id="hideEdit"> at:

var iconNavStart = '<i class="fab fa-readme"></i> Read More</a><div id="hideEdit"> | <a href="/sites/OASIS/Lists/PageDetails/EditForm.aspx?ID=';
var iconNavEnd = '" alt="Edit above item" Title="Edit above item"><i class="fas fa-edit"></i> Edit</a></div>';

Added the reference in my Master.HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.js">//<![CDATA[//]]></script>

I already have /3.3.1/jquery.min.js referenced and didn't add /1.11.0/jquery.mi.js

And finally, added the block of code where I had

$(document).ready(function(){
$().SPServices({
    operation: "GetGroupCollectionFromUser",
    userLoginName: $().SPServices.SPGetCurrentUser(),
    async: false,
    completefunc: function(xData, Status) {

        if($(xData.responseXML).find("Group[Name='CPGroup']").length == 1)
        {
            document.getElementById('hideEdit').style.display = "block";    
        } 
        else { 
            document.getElementById('hideEdit').style.display = "none"; 
        }
    }
});

loadhmData();

});

I'm pretty sure I inserted the last block of code incorrectly because it only hid the first instance. Subsequent items still displayed the Edit link.

As for the Security Trim snippet -- I'm still trying various methods to incorporate it with current page layout.

Answer 1

Try making the following changes:

Change <div id="hideEdit"> to <div class="hideEdit">

Two lines for adding the links would look like this:

var iconNavStart = '<i class="fab fa-readme"></i> Read More</a><div class="hideEdit"> | <a href="/sites/OASIS/Lists/PageDetails/EditForm.aspx?ID=';
var iconNavEnd = '" alt="Edit above item" Title="Edit above item"><i class="fas fa-edit"></i> Edit</a></div>';

And than change the last part of the code to this (hiding the link based on the class instead of the id):

$(document).ready(function(){
$().SPServices({
    operation: "GetGroupCollectionFromUser",
    userLoginName: $().SPServices.SPGetCurrentUser(),
    async: false,
    completefunc: function(xData, Status) {

        if($(xData.responseXML).find("Group[Name='CPGroup']").length == 1)
        {            
            $(".hideEdit").show();
        } 
        else 
        {             
            $(".hideEdit").hide();
        }
    }
});

loadhmData();

});