[SalesForce] Can you pass the value of Apex: outputLink to Javascript

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>........

Best Answer

<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>

Related Solutions

[SalesForce] How we can pass reRender attribute value using JavaScript

I'm not sure you'll be able to do this as the parameter is processed by the server when the page is displayed to the user — even if you can it's likely to be hacky and at risk of breaking later down the road. Depending on your scenario it might be easier to leverage Visualforce remoting to move data back and forth and then to generate new output HTML accordingly.

If that's not an option, would be be disastrous to just skip the re-render and render the whole page again? Not perfect but a much simpler solution!

[SalesForce] How to pass javascript value to controller..

There are multiple solutions for this question.

1. Use of hidden field

You can define an apex variable and associate it in a hidden input field on the visualforce page. Then set a javascript variable to this field an reference it in controller:

Apex class:

public class myClass {
    // Our test variable        
    public String myString {get; set;}

    public myClass(){
        myString = '';
    }

    // Method for testing a hidden field functionality 
    public PageReference myMethod(){
        System.debug('myString: ' + myString);
        return null;
    }
}

Visualforce page:

<script>
function setVar(param){
    jQuery('[id$=myHiddenField]').val(param);
    passStringToController();
}
</script>

<!-- Hidden field to store a new value of the variable -->
<apex:inputHidden value="{!myString}" id="myHiddenField"/>

<!-- Action function for the rerendering -->
<apex:actionFunction name="passStringToController" action="{!myMethod}" rerender="myHiddenField"/>

<!-- A command button for sending a call to the function -->
<apex:commandButton value="Test me" onclick="setVar('new value'); return false;" />

2. Use of apex:param

<script>
// We don't need any javascript function anymore
// because we will access an actionFunction directly
</script>

<!-- A new value will be set to the apex:param -->
<apex:actionFunction name="passStringToController" action="{!myMethod}" rerender="myHiddenField">
    <apex:param name="p1" value="" assignTo="{!myString}" />
</apex:actionFunction>

<!-- Here we can directly access the action function per name and assign a variable value -->
<apex:commandButton value="Test me" onclick="passStringToController('new value'); return false;" />

Best Answer

Related Solutions

[SalesForce] How we can pass reRender attribute value using JavaScript

[SalesForce] How to pass javascript value to controller..

Related Topic