function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sales4cesales4ce 

jQuery and Visualforce to add Multiple contacts

Hi,

 

I have a custom object called Visit__c, which is a child of standard Account Object. Visit_Contacts__c is a Junction object between Visit__c and Standard Contact Object.

I have created a VF page to to associate multiple contacts with a single visit record.

 

The user selects the account record and then clicks on the "add contact(s) " button. This action should open a dialog and display all contacts associated with the customer record selected with check boxes. The user selects the check box to add the contact(s) to visit__c record.

 

I am having trouble in creating the dialog and adding those contacts to the visit record. can any one help me with some pointers or sample code. any help is highly appreciated.

 

<apex:page standardController="Visit__c" 
title="{!$ObjectType.Visit__c.Label} Edit: {!IF(ISNULL(_Visit__c.Id), 'New ' & $ObjectType.DDS_Visit__c.Label, DDS_Visit__c.Name)}" >
    
    <!-- Include reference for jQuery -->
      <apex:includeScript value="{!URLFOR($Resource.jQuery,'js/jquery-1.7.2.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.19.custom.min.js')}"/>
      <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.19.custom.css')}"/>
      
   <script type="text/javascript">
   
       var j$= jQuery.noConflict();
       
       j$(document).ready(function(){
           j$('#openContactDialog').click(function(){
               j$('#contactListDialog').dialog({
               buttons:{'Ok': function(){ j$(this).dialog("close");},'Cancel':function(){}
               }, modal:true,title:"contacts",width:800, closeOnEscape:true, draggable:false, resizable:false,show:"fade",position:"center"});
           });
       });
       
       
        function openContactListDialog() {
        j$("#contactListDialog")
            .find("input:checked")
                .each(function() {
                    this.checked = false;
                })
            .end()
            .dialog("open");
    }
   </script>
  
  <!-- section header -->
  <apex:sectionHeader title="{!$ObjectType.Visit__c.Label} Edit"
        subtitle="{!IF(ISNULL(Visit__c.Id), 'New ' & $ObjectType.Visit__c.Label, Visit__c.Name)}" />
  
  <apex:outputText rendered="false" value="{!Visit__c.OwnerId}" />
  
  <apex:form id="customerForm" rendered="{!ISNULL(Visit__c.Customer_Name__c)}">
     <apex:pageBlock title="Select {!$ObjectType.Account.Label}" mode="edit">
     
         <apex:pageBlockButtons location="bottom">
             <apex:commandButton value="Next"/>
             <apex:commandButton value="Cancel" action="{!cancel}" immediate="true"/>             
         </apex:pageBlockButtons>
         
         <apex:pageBlockSection columns="1" collapsible="false">
             <apex:inputField value="{!Visit__c.Customer_Name__c}" required="true"/>             
         </apex:pageBlockSection>
     
     </apex:pageBlock>
  
  </apex:form>
  
  <apex:form id="visitForm" rendered="{!NOT(ISNULL(Visit__c.Customer_Name__c))}">
      <apex:pageBlock title="{!$ObjectType.Visit__c.label}" mode="edit">
      
          <apex:outputPanel layout="block" >
          
          <!-- TO DO: container for error messages -->
          
          </apex:outputPanel>
      
          <apex:pageBlockButtons >
              <apex:commandButton value="Save"/>
              <apex:commandButton value="Cancel" action="{!cancel}" immediate="true"/>
          </apex:pageBlockButtons>
         
         <apex:pageBlockSection collapsible="false" showHeader="true" title="Information">
             <apex:pageBlockSectionItem >
                 <apex:outputLabel value="{!$ObjectType.Visit__c.fields.Customer_Name__c.Label}"/>
                 <apex:inputField value="{!Visit__c.Customer_Name__c}"/>
             </apex:pageBlockSectionItem>
             
             <apex:pageBlockSectionItem >
                 <apex:outputLabel value="{!$ObjectType.Visit__c.fields.Visit_Type__c.Label}"/>
                 <apex:inputField value="{!Visit__c.Visit_Type__c}"/>
             </apex:pageBlockSectionItem>
             
             <apex:pageBlockSectionItem >
                 <apex:outputLabel value="{!$ObjectType.Visit__c.fields.Visit_Stage__c.Label}"/>
                 <apex:inputField value="{!Visit__c.Visit_Stage__c}" required="true"/>
             </apex:pageBlockSectionItem>
         
             <apex:pageBlockSectionItem >
                 <apex:outputLabel value="{!$ObjectType.Visit__c.fields.Visit_Date_Time__c.Label}"/>
                 <apex:inputField value="{!Visit__c.Visit_Date_Time__c}" required="true"/>
             </apex:pageBlockSectionItem>
         </apex:pageBlockSection> 
          
     
      
      
      <apex:pageBlockSection title="Contacts: Who did you talk to or Who will you talk to" showHeader="true" columns="1" collapsible="false">
          <apex:outputPanel layout="block">
              <div>
                  <input type="button" value="Delete"/>
                  <input type="button" value=" Add Contact(s)" id="openContactDialog" />
              </div>
          
          </apex:outputPanel>
      
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
  <div id="contactListDialog" style="display: none;">
        <apex:form id="contactListForm">
        
            <apex:outputPanel styleClass="dataGrid" layout="block" >
                <table id="contactListTable" border="0" cellspacing="0" cellpadding="0">
                    <thead>
                        <tr>
                            <th class="first" scope="col"><img src="/s.gif" alt="" border="0" width="1" height="1" /></th>
                            <th scope="col"><apex:outputText value="{!$ObjectType.Contact.Fields.Name.Label}" /></th>
                            <th scope="col"><apex:outputText value="{!$ObjectType.Contact.Fields.title.Label}" /></th>
                            <th scope="col"><apex:outputText value="{!$ObjectType.Contact.Fields.Phone.Label}" /></th>
                            <th scope="col"><apex:outputText value="{!$ObjectType.Contact.Fields.Email.Label}" /></th>
                        </tr>
                    </thead>
                    
                </table>
            </apex:outputPanel>
        </apex:form>
    </div>
      
</apex:page>

 

Thanks,

Sales4ce