Pass ParentId from span tag to JS function

Question

I am returning a list of Users/Records that I follow in Chatter. Ultimately, what I want to do is display the list in a webpage and simply click on a User or Record and I will stop following them.

So I've returned the list and I figure if I remove the parent.id or set it to null and update the record, that should do the trick. I know it might not be perfect but I want to try it anyway.

<apex:repeat value='{!Admin}' var="f">
    $('#admin').append(
        $('<div>').append(  
            $('<span>').addClass('parent-span').append('<b>Parent Id: </b>'  + '{!f.parentid}' + '</br></br>' )
        )
    )
</apex:repeat>

I need to pass the parentId from 'parent-span' into a function but I'm not really sure how to proceed. Would anyone have any suggestions?

Something like this perhaps?

var parentId;
$(".parent-span").click(function(){ 
   parentId = $(this).attr(??);
   alert(parentId)
});

Answer 1

Try to set the specific ID to the span itself:

jQuery('<div>').append(  
    jQuery('<span id="parentId-{!f.parentid}">').addClass('parent-span').append('<b>Parent Id: </b>'  + '{!f.parentid}' + '</br></br>' )
)

And then get it in the jQuery click listener:

var parentId;
jQuery(".parent-span").on("click", function(){ 
    parentId = jQuery(this).attr(id);
    alert(parentId)
});

Update: to pass this id to the controller use a simple actionFunction and apex:param:

Controller:

public String currentParentId { get; set; }

public MyClass{
    currentParentId = '';
}

public PageReference myMethod(){
    System.debug(' passed id: ' + currentParentId);
    return null;
}

Page:

<apex:actionFunction name="processId" action="{!myMethod}" reRender="none">
    <apex:param name="p1" assignTo="{!currentParentId}" value=""/>
</apex:actionFunction>

<script>
    jQuery(".parent-span").on("click", function(){ 
        processId(jQuery(this).attr(id));
    });
</script>