Customizing item_CommonHoverPanel_Actions display template

Question

I customized the item_CommonHoverPanel_Actions display template and added custom link to it. Whenever user clicks on the link he/she is redirected to another page.

What i am trying to do now is to add(log) user info to another list whenever he/she clicks on the link.

Can someone guide me in the right direction about how to do it?

Update: I have added jquery via $includescript and now i am trying to add click event handler to the link but seems that its not working. Here is the code:

<!--#_         
            var LinkTilSakHtml = "";
            var LinkTilSak = "http://google.com";
            if(!$isEmptyString(LinkTilSak))
            {
              LinkTilSakHtml = String.format('<a class="ms-calloutLink ms-uppercase" id="yourTestLink" href="javascript:;" title="Go til sak"> Test link</a></div>');            
            }
_#-->
             <div class="ms-srch-hover-action"> 
             _#= LinkTilSakHtml =#_ 
              </div> 
<!--#_
        }
        if (!Srch.U.isSPFSKU() && ctx.CurrentItem.csr_ShowFollowLink && !$isEmptyString(ctx.CurrentItem.Path)){
            var isDoc = true;
            if(!$isNull(ctx.CurrentItem.csr_IsSite) && ctx.CurrentItem.csr_IsSite == true){
                isDoc = false;
            }
        }         
        AddPostRenderCallback(ctx, function() {             
                  $('#yourTestLink').click(function() {
                     alert ("inside onclick");   
                  });           
        });
_#-->

I am adding the event handler in AddPostRenderCallBack() method. Can some one help me find out what am i doing wrong?

Answer 1

Add a click event handler to the link, and then use JSOM or REST to add a list item to your log list. For example:

$('#yourTestLink').click(function(){
    var userInfo = { // these should be whatever fields you need to capture in your list.  E.g., a field called user:
        user: _spPageContextInfo.userLoginName
    };
    $.ajax({
        url: "<siteurl>/_api/web/lists/getbytitle('Log List')/items",
        type: "POST",
        headers: {
            'accept': 'application/json; odata=nometadata',
            'content-type': 'application/json; odata=nometadata'
        },
        success: function() { window.location.href = newUrl; },
        error: errorHandler
    });
});

Try using RegisterSod() instead of $includeScript(). The latter is asynchronous, so it may not be loaded when you need it. Add to the script block at the top of the template:

<script>
    RegisterSod('jquery.min.js', 'path to jquery or cdn');
</script>

And then prior to using jQuery your code, you can do the following:

if(typeof jQuery === 'undefined') {
    EnsureScriptFunc('jquery.min.js', null, function() {
        yourFunction();
    });
} else {
    yourFunction();
}