Get clicked item ID from list

Question

I have a list with items. Each item contains a link to another page. If a user clicks on one of those items, the specific item should get updated with a date when he clicked it.

Now I get a target from the event properties with the a tag.

In JSOM I need the item ID to update it

function urlClicked(e) {
        var url = e.currentTarget.text;
        var target = e.target;
        e.preventDefault();

        setClickedInfo();
    }

function setClickedInfo() {
   var list = lists.getByTitle(listName);
   var item = list.getItemById(1); //need correct ID here
   var currentDate = new Date();
   item.set_item("Last_x0020_Visited", currentDate);
   item.update();
}

How do I retreive the correct ID instead of my "1" of the clicked item? Can I find it somewhere on the clientcontext or maybe on the html?

Answer 1

I presume you want this in a View.

CSR - Client Side Rendering (SP2013/Online only)

On SP2013 you can use CSR - Client side Rendering to change how a Column is displayed (on both Views and Forms)

The context will then get you the iid:

var iid = GenerateIIDForListItem( inCtx , listItem );

Besides a lot more scaffolding code than this one line, this ofcourse requires adding scriptfiles, and setting JSlink on the WebParts

Inside a Calculated Column (all SP versions since 2010, but only in Views)

This id is also available on the TR tag in the View. And you can easily retrieve it with just one Calculated Column which will execute everywhere it is displayed. No need for scriptfiles or JSlink connections.

Full explanation on how this works at https://www.365csi.nl/vm365com/#/How

Paste this Formula in a Calculated Column and set the datatype to Number:

="<a target=_blank href=""http://"
&"www.microsoft.com"
&""" onclick=""{"
&"     var TR=this;while(TR.tagName!='TR'){TR=TR.parentNode}"
&"     var clientContext=new SP.ClientContext.get_current();"
&"     var list=clientContext.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList());"
&"     var item=list.getItemById( TR.id.split(',')[1] );"
&"     clientContext.load(item);"
&"     item.set_item('Last_x0020_Visited', new Date());"
&"     item.update();"
&"     clientContext.executeQueryAsync();"
&"   }"">"
&"goto URL"
&"</a>"

The A tag with JavaScript will be created for every List Item. Once clicked the onclick event takes precedence over the href location, so first executes:

• Go up the DOM to the TR tag
• set JSOM context for this current list
• extract the correct id from the TR attribute iid notation: x,ID,y
• Update the item the Link was clicked today
• and execute the update (this is missing in your example code) See MSDN for success and failure functions
• after the onclick event the A tag will navigate to the href destination

I have hardcoded the URL and label, you can use all SharePoint Calculated Column options to format this.