1

I have a list of related contacts in a customer detail page. I'd like to click a name in the list to see the contact detail in a popup modal, but I can't figure out two things:

  1. How to reference a particular contact within the list?
  2. How to pass contact id to modal in order to display correct record?

The list is currently displayed using apex:repeat

<apex:repeat value="{!contacts}" var="c">
    <tr>
        <td>{!c.Name}</td>
        <td>{!c.Address__c}</td>
        <td>{!c.City__c}</td>
        <td>{!c.State__c}</td>
        <td>{!c.Zipcode__c}</td>
        <td>{!c.Country__c}</td>
    </tr>
</apex:repeat>

Here's the getter method for the related contacts list:

public Contact__c[] getContacts() {

     Contact__c[] contacts = [SELECT Id, Name, Address__c, City__c, State__c, Zipcode__c, Country__c
                            FROM Contact__c 
                            WHERE Customer__c = :ApexPages.currentPage().getParameters().get('id')
                            ];

         return contacts;
}
2

Assuming you have a javascript function called showModal() that takes an ID as a parameter you just reference a particular contact like so:

<apex:repeat value="{!contacts}" var="c">
  <tr>
    <td><a href="#" onClick="showModal('{!c.Id}');">{!c.Name}</a></td>

With more information on how you're doing the modal dialog it's hard to provide a more complete answer, but passing the ID like this is tried and tested and works well. You could then use a JS remoting call inside your JavaScript function to get the data, or you could always have a hidden div in the same element with an absolute position and which is revealed when the link is hovered:

<apex:repeat value="{!contacts}" var="c">
  <tr>
    <td>
      <a href="#" onMouseOver="showModal('{!c.Id}');">{!c.Name}</a>
      <div class="modal" id="modal{!c.Id}"> Some content to show </div>
    </td>

// CSS 
.modal
{
  display: none;
  position: absolute;
}

// JS
function showModal(id)
{
  var div = document.getElementById(id);
  // show the div here by changing CSS etc.
}
  • Thanks @LaceySnr. Hide/show div is a nice trick, but I would prefer to use one element which can display all the records alternately. I'm using Twitter Bootstrap and will try the js remoting solution. There is no way to get at a particular record in the contacts list without another trip to the DB is there? – geeljire Apr 19 '13 at 0:57
  • Not unless you load all the data you want for all the records and store it in JS objects or something but that would get pretty big. I'd go with the remoting option, it's perfect for things like that and it's crazy fast too. – Matt Lacey Apr 19 '13 at 1:06

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.