openPrimaryTab() from pageBlockTable link (SOLVED)

Question

I've created a custom sidebar using a visualforce page and custom controller to dynamically search for relative cases. All is working well but now I'm trying to get the links to open up as a primary tab within the console.

I don't have advanced knowledge of javascript and I thought I was pretty slick by just formatting the href and using that in my variable but during testing I've found that all the links in the sidebar are the same even though the href is actually different for each when you hover over over check in the browser tools. At first I thought it was an issue with duplicate tabs but it's more than likely my code. Can anyone help me debug this?

Here are the portions of my code I think which may be helpful to see:

    <apex:page controller="caseSearchController" sidebar="false" showHeader="false" standardStylesheets="false" docType="html-5.0">

    <!-- import the lightning design system style sheet -->
    <apex:slds />
    <!-- load support console js library -->
    <apex:includeScript value="/support/console/39.0/integration.js"/>

    <script type="text/javascript">
        function openTab() {

            var caseurl = document.getElementById("caseId").href;

            sforce.console.openPrimaryTab(null, caseurl, true, 
            'Loading...', null, null); 

        };
    </script>



<apex:pageBlockTable value="{!cases}" var="case">
    <apex:column >
        <div class="results">
            <p class="problem-statement">         
                <a href="{!$Site.Prefix}/{!case.id}" id="caseId" onClick="openTab('{!case.id}');return false;">
                    <apex:outputText id="caseProblem" value="{!case.Problem_Statement_Question__c}"/>
                </a>
            </p>
            <p class="problem-detail">
                <apex:outputText value="{!IF(LEN(case.Problem_Details__c) > 100, LEFT(case.Problem_Details__c,100)+' ...', case.Problem_Details__c)}"/>
            </p>
        </div>
    </apex:column>        
</apex:pageBlockTable>

</apex:page>

UPDATED SOLUTION:

With a little help I now have working code for this by passing in my variables but still collecting the prefix from the href which always stays the same for these particular links:

        <apex:page controller="caseSearchController" sidebar="false" showHeader="false" standardStylesheets="false" docType="html-5.0">

        <!-- import the lightning design system style sheet -->
        <apex:slds />
        <!-- load support console js library -->
        <apex:includeScript value="/support/console/39.0/integration.js"/>

    <script type="text/javascript">
            function openPrimaryTab(id,number) {    

                var prefix = document.getElementById("caseId").href;    

                sforce.console.openPrimaryTab(null, prefix+id, true,
                number, null, number);

            }
    </script>

    <p class="problem-statement"><a href="{!$Site.Prefix}/" id="caseId" onClick="openPrimaryTab('{!case.id}','{!case.casenumber}');return false;">
                        <apex:outputText id="caseProblem" value="{!case.Problem_Statement_Question__c}"/>
                    </a>
                    </p>

</apex:page>

Answer 1

When you do document.getElementById('caseId'), it only fetches single record because there are different anchor tag with same id. Additionally when you're working with tables, use classes for DOM manipulation.

Here you resolve the problem with passing the case URL as parameter to openTab function.

Here is some psuedo code:

// JavaScript code, using caseUrl passed as a parameter:
function openTab(caseUrl) {

    sforce.console.openPrimaryTab(null, caseurl, true, 
        'Loading...', null, null); 

};

// Anchor tag, passing complete url:
<a href="{!$Site.Prefix}/{!case.id}" id="caseId" 
    onClick="openTab('{!$Site.Prefix}/{!case.id}');return false;">
    <apex:outputText id="caseProblem" 
        value="{!case.Problem_Statement_Question__c}"/>
</a>