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
Jason DunphyJason Dunphy 

Modal Madness - Help needed with VF Edit Modal

I'm having a bit of trouble with creating a related record edit modal in conjunction with a datatable on my VF page.  And I'm hoping someone can help point me in the right direction to solve this on.  Any guidance would be greatly appriciated.

My two problems are:
1. I'm not properly getting the record from the corripsponding row selected (instead my modal always pulls the first row from my table).
2. Can't figure out how to properly insert the change.  I've tried a few different ways to set the change, but no luck.

Edit Modal

So when user's select the 'edit' button from my RelatedContacts table, the modal that always pops only reflects the first row data.  And I've tried, but failed, to incorporate an insert bit in the getRelatedContacts section of my controller so that any changes made in the modal get committed.

Script info from VF page:
<script type="text/javascript">
            
            </script>
            
            <head>
                <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous" />
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
                <style>
                .container-fluid {
                margin-top: 10px;
                }
                </style>
            </head>

Specific Table and Modal from the VF page:
<apex:pageblockTable value="{!RelatedContacts}" var="rltContact" id="rctcs">
                                                <apex:facet name="header">Related Contacts</apex:facet>
                                                <apex:column >
                                                <apex:facet name="header">Name</apex:facet>
                                                <apex:outputText value="{!rltContact.Name}"/>
                                                </apex:column>
                                                <apex:column >
                                                <apex:facet name="header">Phone</apex:facet>
                                                <apex:outputText value="{!rltContact.Phone}"/>
                                                </apex:column>
                                                <apex:column >
                                                <apex:facet name="header">Account</apex:facet>
                                                <apex:outputText value="{!rltContact.account.name}" />
                                                </apex:column>
                                                <apex:column >
                                                    <button type="button" class="row-button" data toggle="modal" data-target="#myModal2" style="text-align: center;" >
                                                    <span class="glyphicon" /> Edit
                                                        </button>
                                                        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                            <div class="modal-dialog" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                        <h4 class="modal-title" id="{!rltContact.Id}">Edit Contact</h4>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <div class="form-group">
                                                                            <label>Name</label><br />
                                                                            <apex:OutputField value="{!rltContact.Name}"  styleClass="form-control"/>
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <label>Phone</label><br />
                                                                                <apex:InputText value="{!rltContact.Phone}" html-placeholder="{case.ani__C}" styleClass="form-control"/>
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Title</label><br />
                                                                                    <apex:InputText value="{!rltContact.Title}" styleClass="form-control"/>
                                                                                    </div>
                                                                                    
                                                                                </div>
                                                                                <div class="modal-footer">
                                                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                    <apex:commandButton styleclass="btn btn-primary" value="Save" action="{!save}" reRender="contacts" onComplete="$('#myModal2').modal('hide');$('body').removeClass('modal-open');$('.modal-backdrop').remove();"/>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </apex:column>
                                                                </apex:pageblockTable>

Controller for VF Page:
public class contactsForServiceCloud {
    public case selectedAccount {get;set;}
    public Contact newCon {get;set;}

    public contactsForServiceCloud(ApexPages.StandardController stdCtrl) {
        selectedAccount = (
            case) stdCtrl.getRecord();
        selectedAccount.ANI__c = System.currentPageReference().getParameters().get('ani');
        selectedAccount.AccountId = System.currentPageReference().getParameters().get('accountId');


    }
    
        public List < Account > getSuggestedAccounts() {
            List < Account > accSugList = [SELECT Name, Phone_Reformatted__C From Account Where Phone_Reformatted__C !=null And Phone_Reformatted__C =: selectedAccount.ANI__c];
            return accSugList;


    }
    
        public List < Account > getAccountInfo() {
            List < Account > accList = [SELECT Name, ShippingStreet, ShippingCity, ShippingState, ShippingPostalCode, parent.name, acc_go_live__c From Account Where Id =: selectedAccount.AccountId];
            return accList;

    }

    public List < Contact > getContacts() {
            List < Contact > cntList = [SELECT Name, Phone, Contact.account.name From Contact Where Contact.Account.Id != null and Contact.phone != null and Contact.phone =: System.currentPageReference().getParameters().get('ani') limit 20];
            return cntList;

    }
    
    public List < Contact > getRelatedContacts() {

        IF(selectedAccount.AccountId != null) {
            Set < Id > cntAcctIds = new Set < Id > ();
            for (Account pId: [SELECT ParentID From Account Where Id =: selectedAccount.AccountId]) {
                cntAcctIds.add(pId.ParentId);
            }
            List < Contact > rltcntList = [SELECT Id, Name, Phone, Contact.account.name, Title From Contact Where Contact.Account.Id != null and ((contact.accountId =: cntAcctIds) or (contact.accountId =: selectedAccount.AccountId))];
            return rltcntList;
        }
        return null;

    }
        

    public List < Case > getOpenCases() {
        IF(selectedAccount.AccountId != null) {
            List < Case > opencsList = [SELECT CaseNumber, Subject, Status, Contact.name From Case Where accountid =: selectedAccount.accountid and Status = 'open'
                limit 20
            ];
            return opencsList;
        }
        return null;
    }
    
    public void addContact(){
    newCon.AccountId = selectedAccount.AccountId;
    newCon.Phone = selectedAccount.ANI__c;
    insert newCon;
    newCon = new Contact();
    }

    public pageReference refresh() {
        if (selectedAccount.AccountId != null) {
            pageReference pg = new pageReference(ApexPages.currentPage().getURL());
            pg.setRedirect(TRUE);
            return pg;
        } else {

            return null;
        }
    }
}