0

Alright I have built a list that targets key words (No/Yes, see attachments). The CSS changes the background color to red for no and green for yes on particular cells within the list. This works perfectly in the all docs view. Once I group by a particular column I cannot get the jQuery/css to load until the second click. The inital load shows up with no style applied, then I close it and re-open it and the style is applied (stays applied). Any ideas on how to get it to load initally?

<script type='text/javascript'>
     $(document).ready(function(){

        //All docs view functions
        $(".ms-vb2:contains(No)").addClass("no");
        $(".ms-vb2:contains(Yes, see attachment)").addClass("yes");

        //For groups view
        $('.ms-gb').click(function (e){ 
            $(".ms-vb2:contains(No)").addClass("no");
            $(".ms-vb2:contains(Yes, see attachment)").addClass("yes");
        });         
    });
</script>
<style>
.no {
    background-color: lightpink;
    text-align: center;
    border-style: solid;
    border-color: black;
    vertical-align: middle;
    font-family: Rockwell;
    font-size: 16px;
}


.yes {
    background-color: darkseagreen;
    text-align: center;
    border-style: solid;
    border-color: black;
    vertical-align: middle;
    font-family: Rockwell;
    font-size: 16px;
}
</style>
1

The problem you are facing is because SharePoint loads those groups dynamically via JavaScript, so if you are adding classes to elements, those elements don't initially exist when the page has officially finished loading, so executing on document.ready is "too soon".

I have a snippet of code I use when I need to execute something after a grouped view has finished loading. Here it is applied to your scenario:

function addCustomClasses() {
  $(".ms-vb2:contains(No)").addClass("no");
  $(".ms-vb2:contains(Yes, see attachment)").addClass("yes");
}

function addCustomClasses_WaitForGroupingToFinish()
{
    if (typeof g_ExpGroupInProgress != 'undefined' && typeof g_ExpGroupInProgress == 'boolean' && typeof g_ExpInitializing != 'undefined' && typeof g_ExpInitializing == 'boolean')
    {
        if (g_ExpGroupInProgress || g_ExpInitializing || jQuery("td[class='ms-gbload']").length > 0)
            setTimeout(addCustomClasses_WaitForGroupingToFinish, 100);
        else
            addCustomClasses();
    }
    else
        addCustomClasses();
}

$(document).ready(addCustomClasses_WaitForGroupingToFinish);

  • exactly what I was looking for! Thanks! – hittle08 Mar 25 at 12:22

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.