0

VF Page

<apex:page controller="acccheck" docType="HTML-5.0" standardStylesheets="false" showHeader="false" sidebar="false">
  <html lang="en">
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" media="print" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


    <style type= "text/css">

    </style>
   </head>
     <body>
      <apex:form >
        <apex:pageBlock >
                  <div class="container-fluid">
                     <div class="panel panel-default">
                       <div class="panel-heading">Panel with panel-default class</div>
                         <div class="panel-body">  
                               <table class="table table-hover">
                                    <thead>
                                       <tr>
                                          <th>Name</th>
                                       </tr>
                                    </thead>  
                                    <apex:repeat value="{!acc}" var="c">
                                    <tbody>
                                       <tr>
                                          <td> 
                                              <apex:commandLink action="{!details}" styleClass="btn btn-link" value="{!c.name}" html-data-toggle="modal" html-data-target="#display" >
                                                  <apex:param value="{!c.id}" name="offname"/>
                                              </apex:commandlink>
                                          </td>
                                      </tr>
                                    </tbody>
                                    </apex:repeat>
                               </table>
                           </div> 
                         </div>



                         <div class="modal fade" id="display" role="dialog">
                           <div class="modal-dialog">
                              <div class="modal-content">
                                 <div class="model-header"> hello</div>
                                   <div class="model-body">
                                   <apex:repeat value="{!acc1}" var="a">
                                     <apex:outputField value="{!a.name}"/>
                                   </apex:repeat>
                                   </div>
                                  <div class="model-footer">
                                      This is Footer
                                  </div>
                               </div>
                            </div>
                        </div>
                   </div>
      </apex:pageblock> 
    </apex:form>
   </body>
  </html>
</apex:page>

Class

public class acccheck {
    public list<account> acc{get;set;}
    public list<account> acc1{get;set;}

    public acccheck(){
        acc=[select id,name from account];
    }

    public void details(){
        string done=apexpages.currentpage().getparameters().get('offname');
        acc1=[select id,name from account where id=:done ];
    }
}
Improve this question
2
  • What is not working?
    – Saroj Bera
    Mar 1, 2017 at 8:03
  • Please check my updated answer.
    – Saroj Bera
    Mar 1, 2017 at 9:59

2 Answers 2

Reset to default
0

In your code you are opening the modal popup immediately. Instead, you have to wait till the action callback happened. You can use a <apex:actionFunction to do the action call and from the oncomplete event open the modal dialog through jQuery. So the modal dialog is updated with data before opening. I have also wrapped the modal dialog inside a <apex:outputPanel so that it can be rerendered from <apex:actionFunction. I tried to modify your code and I can see the data in the popup.

<apex:page controller="acccheck" docType="HTML-5.0" standardStylesheets="false" showHeader="false" sidebar="false">
    <html lang="en">
        <head>
            <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
            <link rel="stylesheet" media="print" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
            <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
            <style type= "text/css">

            </style>
            <script type="text/javascript">
                function openModal(){
                    $('#display').modal({
                        keyboard: true
                    })                    
                }
            </script>
        </head>
        <body>
            <apex:form >
                <apex:outputText value="{!acc1}" id="opt"></apex:outputText>
                <apex:actionFunction action="{!details}" name="fetchDetails" oncomplete="openModal();" reRender="modalw">
                    <apex:param name="offname" value=""/>
                </apex:actionFunction>
                <apex:pageBlock >
                    <div class="container-fluid">
                        <div class="panel panel-default">
                            <div class="panel-heading">Panel with panel-default class</div>
                            <div class="panel-body">  
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                        </tr>
                                    </thead>  
                                    <apex:repeat value="{!acc}" var="c">
                                        <tbody>
                                            <tr>
                                                <td> 
                                                    <a class="btn btn-link" onclick="fetchDetails('{!c.id}');" >{!c.name}</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </apex:repeat>
                                </table>
                            </div> 
                        </div>
                        <apex:outputPanel id="modalw">
                        <div class="modal fade" id="display" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="model-header"> hello</div>
                                    <div class="model-body">
                                        <apex:repeat value="{!acc1}" var="a">
                                            <apex:outputField value="{!a.name}"/>
                                        </apex:repeat>
                                    </div>
                                    <div class="model-footer">
                                        This is Footer
                                    </div>
                                </div>
                            </div>
                        </div>
                        </apex:outputPanel>
                    </div>
                </apex:pageblock> 
            </apex:form>
        </body>
    </html>
</apex:page>
Improve this answer
1

Add rerender attribute in your command Link

<apex:commandLink action="{!details}" styleClass="btn btn-link" value="{!c.name}" html-data-toggle="modal" html-data-target="#display" rerender="innerPanel">
      <apex:param value="{!c.id}" name="offname"/>
</apex:commandlink>

In your model popup 

<apex:outputpanel layout="block" id="innerPanel" styleclass="model-body">
            <apex:repeat value="{!acc1}" var="a">
                   <apex:outputField value="{!a.name}"/>
             </apex:repeat>
</apex:outputpanel>
Improve this answer
2
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – Adrian Larson ♦
    Mar 1, 2017 at 18:12
  • @SarojBera this code is also working I don't think we need extra JavaScript code here.
    – Tushar Sharma
    Mar 2, 2017 at 5: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.