Search Results Clear On Refinement or Subsequent Search wiith Custom Display Template

Question

I'm working with a custom search display template. I have my results shown as a grid as well as a few other changes. Since it is shown as a grid, I have a requirement to show the rows with alternating background colors. Easy enough to do with jQuery.

To support this, I've added the jQuery reference and the following call for OnPostRender to the Control_SearchResults template.

ctx.OnPostRender = [];
    ctx.OnPostRender.push(function(){
       $().ready(function(){
            $("div[id*='peopleContainer']" ).filter(":even").css( "background-color", "#EFF2ED" );
        })
    });

With this in place, the page shows the initial results just fine and I have the alternating row background colors in place. So the selector and overall code is good.

However, when the user types in a different search keyword in the box or hits a refinement value the results clear out and no longer display. I know there are still results in the dataset because the refinement panel is still populated.

I suspect that with the refinement or subsequent search it is trying to add the function again, and the duplicate is making it bomb. but how can I determine if it has already been added?

Answer 1

I finally figured it out thanks to something that Corey Roth published. Instead of using the OnPostRender.push() method, I changed it to call the AddPostRenderCallback() method and it works.

AddPostRenderCallback(ctx, function () {     
            $().ready(function(){
                $("div[id*='peopleContainer']" ).filter(":even").css( "background-color", "#EFF2ED" );
            })

        });