function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Bhavdip Gadhiya 7Bhavdip Gadhiya 7 

how to call method of apex class through jquery

VF page :
<apex:page controller="accountList">
    <apex:stylesheet value="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
    <apex:includeScript value="//code.jquery.com/jquery-1.10.2.js"/>
    <apex:includeScript value="//code.jquery.com/ui/1.11.2/jquery-ui.js"/>
    <apex:includeScript value="{!URLFOR($Resource.Jquery, '/js/jquery-1.7.2.min.js')}"  />
    <script>
        j$ = jQuery.noConflict();
        j$(document).ready(function() {
             
        });
    function myFunction(id1){
    alert(id1);
    accountList.fetchaccount(id1);
    }
    </script>

<body>
<apex:form id="theForm" > 
<apex:pageblock id="thePageBlock" >
    <apex:pageblocksection id="thePageBlocksection"  >
 
        <apex:pageblocktable value="{!listAccount}" var="acc" id="theTable" >
            <apex:column headerValue="Account Name"  >
            <a href="/{!acc.Id}" id="{!acc.Id}" 
               onblur="LookupHoverDetail.getHover('{!acc.Id}').hide();" 
               onfocus="myFunction('{!acc.id}');"
               onmouseout="LookupHoverDetail.getHover('{!acc.Id}').hide();" 
               onmouseover="myFunction('{!acc.id}');">
                {!acc.Name}</a>
             </apex:column> 
        </apex:pageblocktable>
           </apex:pageblocksection>
       
    <apex:pageblocksection >
        <apex:pageblocktable value="{!accountDetail}" var="acc" id="theTable2" rendered="(accountDetail.size!=0)">
            <apex:column value="{!acc.Name}">
             </apex:column> 
             <apex:column value="{!acc.phone}">
             </apex:column>
        </apex:pageblocktable>
      </apex:pageblocksection>
           
     
</apex:pageblock>         
</apex:form> 
</body>    
</apex:page>

Apex class :
public class accountList{

    public String getA() {
        return null;
    }


    public accountList() {
                 listAccount = [select id,name,phone from account limit 10];
          listContact = [select name from contact limit 10];
    }

    public list<account> listAccount{get;set;}
    public list<contact> listContact{get; set;}
    public list<account> accountDetail{get;set;}

    public pagereference list1()
    {
        listAccount = [select name,phone from account limit 10];
        listContact = [select name from contact limit 10];
    return null;
    } 

      public  void fetchAccount(string id1)
    {
          system.debug('id1' + id1); 
       
         accountDetail = [select name,phone from account where id=:id1];
    
    }
    
}

here alert is working but i want that when u put cusror on account name then other pageblock  table should display that account record details .
Andrew EchevarriaAndrew Echevarria
If you want the page to dynamically change, you're going to have to either ReRender the PageBlockTable everytime the data changes, or otherwise refresh the page (I recommend the former).

Try this:

1. Put the table in <apex:outputPanel id="DynamicTable">

2. Create an actionFunction <apex:actionFunction name="rerenderTable" rerender="DynamicTable" />

3. Create the Javascript function to call on the actionFunction
<script type="text/javascript"> function function1() { rerenderTable(); } </script>

Then just call the JS function from anywhere in VF and it will rerender the table with the new values.

You can also use actionFunction to communicate the Account to the Controller prior to rerendering the table with new values.
Bhavdip Gadhiya 7Bhavdip Gadhiya 7
Vf page
<apex:page controller="accountList">
    
    <apex:includeScript value="{!URLFOR($Resource.Jquery, '/js/jquery-1.7.2.min.js')}"  />
    
<script type="text/javascript">
    function myFunction() {
        alert('Hey');
        rerenderTable(); }
</script>

<apex:form id="theForm" > 
<apex:pageblock id="thePageBlock"  >
    <apex:pageblocksection id="thePageBlocksection"  >
        
       
        <apex:pageblocktable value="{!listAccount}" var="acc" id="theTable"  >
            <apex:column headerValue="Account Name"  value="{!acc.Name}" onclick="myFunction();" />               
        </apex:pageblocktable>
   
        
        <apex:actionFunction name="rerenderTable" reRender="DynamicTable" action="{!fetchAccount}" />
      
      <!--  <apex:param name="id1" value="" />
        </apex:actionFunction> -->
        <apex:outputPanel id="DynamicTable">
        <apex:pageblocktable value="{!accountDetail}" var="acc" id="theTable2" >
            <apex:column value="{!acc.Name}">
             </apex:column> 
             <apex:column value="{!acc.phone}">
             </apex:column>
        </apex:pageblocktable>
         </apex:outputPanel>
      </apex:pageblocksection>
           
</apex:pageblock>         
</apex:form> 
</apex:page>

Apex
public class accountList{

    public list<account> listAccount{get;set;}
    public list<contact> listContact{get; set;}
    public list<account> accountDetail{get;set;}
    public String val{get;set;}
    
    public accountList() {
          listAccount = [select id,name,phone from account limit 10];
          listContact = [select name from contact limit 10];
    }

      public  void fetchAccount()
    {
           system.debug('hi');
           val = Apexpages.currentPage().getParameters().get('id1');
           system.debug(val);
           accountDetail = [select name,phone from account where id=:val];
    
    }
    
}

Here alert is woking when click on any record of table but then method of apexclass is not called.