+ Start a Discussion
AK2017AK2017 

bootstrap visualforce modal on click of each row of table

Hello All,

I am pulling a list of opportunities from controller and running it through apex:repeat.

one of the column has a click that calls the bootstrap modal. i wanted this modal to display details related to the record i clicked.

in my case, it is always displaying details of first record even if i click 5th row of this table.

here is my code, please help me.
<apex:page controller="OpportunityListViewController">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  th{background: #ff9999;}
  tr{background: #ffe6e6;}
  a{font-color:blue;}
  </style>
 <apex:form >
 <apex:pageBlock >
 <div style="width:100%" class="container">
 <h4>New Leads - first contact</h4><br></br><br></br>
 <table width="100%" class="table table-bordered table-hover">
 <th >Action</th>
 <th>Opp ID</th>
 <th>FullName</th>
 <th>Email</th>
 <th>Home Phone</th>
 <th>Work Phone</th>
 <th>Mobile Phone</th>
 <th>Stage</th>
 <th>Status</th>
 <apex:repeat value="{!NewOpps}" var="New">
 <tr><td>
 
 <div><a href="#" data-target="#pwdModal" data-toggle="modal">Notes</a></div> 
  
  
  </td>
  <td>{!New.ID}</td>
  <td>{!New.Account.FirstName} {!New.Account.LastName}</td>
  <td>{!New.Account.PersonEmail}</td>
  <td>{!New.Account.Home_Phone__pc}</td>
  <td>{!New.Account.Work_Phone__pc}</td>
  <td>{!New.Account.PersonMobilePhone}</td>
  <td>{!New.StageName}</td>
  <td>{!New.Opportunity_Status__c}</td>
  <div id="pwdModal" class="modal fade" tabindex="-1" role="dialog" style="border:0px;">
                          <div class="modal-dialog" style="border:0px;">
                          <div class="modal-content" style="border:0px;">
                              <div class="modal-header text-left">
                                  <h4 style="color:#2d4366;">Providing contact feedback for {!New.Account.FirstName} {!New.Account.LastName} {!New.ID}</h4>
                              </div>
                              <div class="modal-body" style="border:0px;">
                                  <div class="col-md-12" style="border:0px;">
                                        
                                            <div class="panel-body" style="border:0px;">
                                                        
                                             </div>     
                                    </div>
                              </div>
                              <div class="modal-footer" style="border:0px;">
                                  <div class="col-md-12">
                                        <fieldset>                                              
                                             <apex:commandbutton styleclass="btn btn-lg btn-primary btn-block" value="Send My Password" />
                                         </fieldset>
                                  </div>    
                              </div> 
                          </div>
    </div></div>
  </tr>
  </apex:repeat></table>
<!-- <apex:pageBlockTable value="{!NewOpps}" var="New" border="1">
 <apex:column headerValue="Action"><div><a href="#" data-target="#pwdModal" data-toggle="modal">Forgot my password</a></div>   </apex:column>
  <div id="pwdModal" class="modal fade" tabindex="-1" role="dialog" style="border:0px;">
                          <div class="modal-dialog" style="border:0px;">
                          <div class="modal-content" style="border:0px;">
                              <div class="modal-header text-center">
                                  <p style="color:#2d4366;">A temporary password will be send to . You can reset your password by logging into the application with the provided temporary password.</p>
                              </div>
                              <div class="modal-body" style="border:0px;">
                                  <div class="col-md-12" style="border:0px;">
                                        
                                            <div class="panel-body" style="border:0px;">
                                                        <fieldset>                                                
                                                            <apex:commandbutton styleclass="btn btn-lg btn-primary btn-block" value="Send My Password" />
                                                        </fieldset>
                                             </div>     
                                    </div>
                              </div>
                              <div class="modal-footer" style="border:0px;">
                                  <div class="col-md-12">
                                  <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
                                  </div>    
                              </div> 
                          </div>
                          </div>
  </div>
  <apex:column value="{!New.ID}"  headerValue="Opp ID"/>  
  <apex:column value="{!New.Account.FirstName} {!New.Account.LastName}"  headerValue="Fullname"/>
  <apex:column value="{!New.Account.PersonEmail}"  headerValue="Email"/>
  <apex:column value="{!New.Account.Home_Phone__pc}"  headerValue="Home phone"/>
  <apex:column value="{!New.Account.Work_Phone__pc}"  headerValue="Work phone"/>
  <apex:column value="{!New.Account.PersonMobilePhone}"  headerValue="Mobile phone"/>
  <apex:column value="{!New.StageName}"  headerValue="Stage"/>
  <apex:column value="{!New.Opportunity_Status__c}"  headerValue="Status"/>
 </apex:pageBlockTable> -->
 </div><br></br><br></br>
 <div style="width:100%" class="container">
 <h4>Leads -  Second contact</h4><br></br><br></br>
 <apex:pageBlockTable value="{!SecondContactOpps}" var="second" border="1">
 <apex:column headerValue="Action"/>
  <apex:column value="{!second.ID}"  headerValue="Opp ID"/>  
  <apex:column value="{!second.Account.FirstName} {!second.Account.LastName}"  headerValue="Fullname"/>
  <apex:column value="{!second.Account.PersonEmail}"  headerValue="Email"/>
  <apex:column value="{!second.Account.Home_Phone__pc}"  headerValue="Home phone"/>
  <apex:column value="{!second.Account.Work_Phone__pc}"  headerValue="Work phone"/>
  <apex:column value="{!second.Account.PersonMobilePhone}"  headerValue="Mobile phone"/>
  <apex:column value="{!second.StageName}"  headerValue="Stage"/>
  <apex:column value="{!second.Opportunity_Status__c}"  headerValue="Status"/>
 </apex:pageBlockTable> 
 </div>
 </apex:pageBlock> 
 
 </apex:form>
</apex:page>

 
Hung Vu 3Hung Vu 3
Please try data-target="#pwdModal-{!New.ID}" in <a> tag
and id of Modal would be id="pwdModal-{!New.ID}"
 
David HalesDavid Hales
Hi Aariff,

You need to use Apex: Parm visual force tag.Please take look.
<td>{!New.ID}</td> <td>{!New.Account.FirstName} {!New.Account.LastName}</td> <td>{!New.Account.PersonEmail}</td> <td>{!New.Account.Home_Phone__pc}</td> <td>{!New.Account.Work_Phone__pc}</td> <td>{!New.Account.PersonMobilePhone}</td> <td>{!New.StageName}</td> <td>{!New.Opportunity_Status__c}</td> <div id="pwdModal" class="modal fade" tabindex="-1" role="dialog" style="border:0px;"> <div class="modal-dialog" style="border:0px;"> <div class="modal-content" style="border:0px;"> <div class="modal-header text-left"> <h4 style="color:#2d4366;">Providing contact feedback for {!New.Account.FirstName} {!New.Account.LastName} {!New.ID}</h4> </div> <div class="modal-body" style="border:0px;"> <div class="col-md-12" style="border:0px;"> <div class="panel-body" style="border:0px;"> </div> </div> </div> <div class="modal-footer" style="border:0px;"> <div class="col-md-12"> <fieldset> 

<apex:commandbutton styleclass="btn btn-lg btn-primary btn-block" value="Send My Password" >
<apex:param></apex:param> 
</apex:commandbutton>  

</fieldset> </div> </div> </div> </div></div>


Thanks & Regards 
David Hales(KSPL1005)