1

Using apex:outputLink you can link to record IDs. I would like to access a record through a JQuery click function. Is there a way to pass the value of the outputLink to javascript?

function clickTables()
{

     ('.propertyRateTable').click(function()
     {
         //OPEN LINK FROM COMMAND LINK
     });
}

Output Link:

<apex:outputLink id="hkLink" value="/{!hk.id}" target="_blank">{!hk.Property__r.Name}</apex:outputLink>

EDIT 

<div id="leftBottomBlock">                                
            <apex:pageBlock id="todayReport" title="Today's Reports">
                <div id="hkRecords">
                    <apex:outputLabel ><strong>Properties:</strong></apex:outputLabel>
                    <apex:repeat value="{!hk_records}" var="hk" id="hkRecordList">
                        <div class="propertyRateDiv">
                            <table class="hkRecordTable">
                                <apex:outputLink id="hkLink" value="/{!hk.id}" target="_blank">{!hk.Property__r.Name}</apex:outputLink>
                                <thead>
                                    <tr>
                                        <td>Supervisor: </td>
                                        <td>{!hk.Supervisor__c}</td>
                                    </tr>
                                    <tr>........
Improve this question
2
  • Could you include a code snippet of what you've done (tried) so far? The answer to your question is generally "yes", but you'll get a much better answer if you can provide a Short, Self-Contained, Correct Example. Commented Nov 13, 2015 at 17:06
  • @sfdcfox I have edited my post. Any suggestions? Commented Nov 13, 2015 at 17:08

1 Answer 1

Reset to default
2

<apex:outputLink> is rendered as a normal a tag, so you can bind to it normally, like this:

$('.propertyRateTable').on('click','a', function(e) {
    window.open($(this).attr('href'));
    e.preventDefault();
});

Example:

<apex:page standardController="Account" recordSetVar="Accounts">
    <apex:includeScript value="https://code.jquery.com/jquery-2.1.4.js" />
    <script>
    var $j = jQuery.noConflict();
    $j(function() {
        $j('.pageBlockTable').on('click', 'a', function(e) {
            alert('This link goes to the URL: '+$j(this).attr('href'));
            e.preventDefault();
        });
    });
    </script>
    <apex:pageBlock>
        <apex:pageBlockTable value="{!accounts}" var="record" styleClass="pageBlockTable">
            <apex:column>
                <apex:outputLink value="/{!record.id}">{!record.name}</apex:outputLink>
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>
Improve this answer
8
  • Ahh good to know. May I just ask what the 'e' represents? Thank you! Commented Nov 13, 2015 at 17:37
  • @AlexBrigham you can call it whatever you want, but e is the traditional value used. It's the event that was triggered (e.g. this was a MouseEvent, so e contains details about the target, the mouse cursor's position, etc). Commented Nov 13, 2015 at 17:48
  • Hey, I still cannot get this to work. Is there something I am missing? Commented Nov 13, 2015 at 19:27
  • @AlexBrigham Allow me to write up some example code; maybe that will help you out. Commented Nov 13, 2015 at 19:28
  • @AlexBrigham I wrote a minimalist version that works. Let me know if this helps you out. Commented Nov 13, 2015 at 19:40

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.