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>........
  • 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. – sfdcfox Nov 13 '15 at 17:06
  • @sfdcfox I have edited my post. Any suggestions? – Alex Brigham Nov 13 '15 at 17:08
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>
  • Ahh good to know. May I just ask what the 'e' represents? Thank you! – Alex Brigham Nov 13 '15 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). – sfdcfox Nov 13 '15 at 17:48
  • Hey, I still cannot get this to work. Is there something I am missing? – Alex Brigham Nov 13 '15 at 19:27
  • @AlexBrigham Allow me to write up some example code; maybe that will help you out. – sfdcfox Nov 13 '15 at 19:28
  • @AlexBrigham I wrote a minimalist version that works. Let me know if this helps you out. – sfdcfox Nov 13 '15 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.