You need to sign in to do that
Don't have an account?
AK2017
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.
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>
and id of Modal would be id="pwdModal-{!New.ID}"
You need to use Apex: Parm visual force tag.Please take look.
Thanks & Regards
David Hales(KSPL1005)