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
arosysarosys 

ajax in visual force page

Hi 

i am new in salesforce.

I had created a vf page products which shows list of products from a custom object "siteproducts"

Also there is a sidebar in the vf page for categories which also comes from custom object "categories"

I want that when ever i click on a particular category only corresponding products should be displayed.

I want to do it using Ajax. I am pasting a portion of my code here :

 

Product List :

 

<apex:outputPanel id="detail">
<apex:dataTable value="{!products}" var="prod" id="theTable" >

<apex:column >

<apex:facet name="header">Name</apex:facet>

<apex:outputText value="{!prod.Name}"/>

</apex:column>

<apex:column >

<apex:facet name="header">Image</apex:facet>

<apex:outputField value="{!prod.Image__c}"/>

</apex:column>

<apex:column >
<apex:outputLink value="/apex/ProductDetail?Id={!prod.Id}">
Details
</apex:outputLink>
</apex:column>

 

<apex:column >
<apex:outputLink value="/apex/ProductDetail?Id={!prod.Id}">
Add to Cart
</apex:outputLink>
</apex:column>

</apex:dataTable>
</apex:outputPanel>

 

 

Side bar of category :

 

<apex:dataList value="{!categories}" var="cat">
<apex:commandLink reRender="detail">{!cat.Name}
<apex:param name="categoryid" value="{!cat.id}"/>
</apex:commandLink>
</apex:dataList>

 

How will i implement this .Please help.

Thanks.

 

 

Best Answer chosen by Admin (Salesforce Developers) 
Avidev9Avidev9

There are lots of problem in code.

Anyways it should work I hope so, 

 

 public class PorductTable {
     List < SiteProduct__c > products;
     SiteProduct__c productDetail;
     List < Category__c > categories;
     
     public 
     public List < SiteProduct__c > getproducts() {

         String categoryId = System.currentPageReference().getParameters().get('categoryId');

         if (categoryId == null) {
            products = [select Id, Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c];
         } else {
             products = [select Id, Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c
                 where Category__r.Id = : categoryId
             ];
         }
         return products;
     }

     public SiteProduct__c productdetail() {

         String theId = ApexPages.currentPage().getParameters().get('id');

         productDetail = [select Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c
             where ID = : theId
         ];
         return productDetail;
     }

     public List < Category__c > getcategories() {


         categories = [select Id, Name from Category__c];
         return categories;
     }


 }

 

 

<apex:commandLink reRender="detail" value="{!cat.Name}" action="{!productDetail}">                  
                  <apex:param name="categoryid" value="{!cat.id}"/>
               </apex:commandLink>

All Answers

Maros SitkoMaros Sitko
what is not working? I don't understand where is problem. your code should work
arosysarosys

Its not working nothing happening on clicking the categories.

ths is my controller class.

 

public class PorductTable {

        List<SiteProduct__c> products;
        SiteProduct__c productDetail;
        List<Category__c> categories;
        String categoryId=System.currentPageReference().getParameters().get('categoryId');



    public List<SiteProduct__c> getproducts() {
    
        if(categoryId==null)
        {  
        if(products== null) products= [select Id,Name,Category__c,Description__c, Image__c,Price__c,Quantity__c from SiteProduct__c 
        ];
        }
        else
        {
         if(products== null) products= [select Id,Name,Category__c,Description__c, Image__c,Price__c,Quantity__c from SiteProduct__c 
        where Category__r.Id= :categoryId];
        }

        return products;

    }
    
    public SiteProduct__c getproductdetail() {
         
         String theId = ApexPages.currentPage().getParameters().get('id');
         
         productDetail= [select Name,Category__c,Description__c, Image__c,Price__c,Quantity__c from SiteProduct__c
         where ID = :theId ];

        return productDetail;

    }
    
     public List<Category__c> getcategories() {
        
         
         categories= [select Id,Name from Category__c  ];

        return categories;

    }
    
     
    
    
    
    
}
Avidev9Avidev9
Can you expain a bit ?
What is not happening ?
What is the expected behaviour ?
What do you mean by "nothing is working" ?
arosysarosys

I want that when i click on a category only products of the corresponding category should be displyed.

Category is a master object of product.

But when i click on any category , product list remain same.
Avidev9Avidev9

Ok try this if this help

 

public class PorductTable {

    List < SiteProduct__c > products;
    SiteProduct__c productDetail;
    List < Category__c > categories;
   



    public List < SiteProduct__c > getproducts() {
		 String categoryId = System.currentPageReference().getParameters().get('categoryId');
        if (categoryId == null) {
            if (products == null) products = [select Id, Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c];
        } else {
            if (products == null) products = [select Id, Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c
                where Category__r.Id = : categoryId
            ];
        }

        return products;

    }

    public SiteProduct__c getproductdetail() {

        String theId = ApexPages.currentPage().getParameters().get('id');

        productDetail = [select Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c
            where ID = : theId
        ];

        return productDetail;

    }

    public List < Category__c > getcategories() {


        categories = [select Id, Name from Category__c];

        return categories;

    }




}

 

 

<apex:dataList value="{!categories}" var="cat">
    <apex:commandLink reRender="detail">{!cat.Name}
        <apex:param name="categoryid" value="{!cat.id}"/>
    </apex:commandLink>
</apex:dataList>

 
arosysarosys

Not working either.
Avidev9Avidev9

Well had a close look at your code and

 

Your VF has "categoryid"

 

<apex:param name="categoryid" value="{!cat.id}"/>

 

And Apex has "categoryId"["I" capital] >> params are case sensitive so please make sure you use "categoryid" in apex

 

 String categoryId = System.currentPageReference().getParameters().get('categoryId');

 
arosysarosys

Even after correcting it , its not working .
Avidev9Avidev9
check the logs. Try to put logs in the query section and the parameter being passed
Avidev9Avidev9
can you post your full page? and code ? whatever you have it now?
arosysarosys

Ok this is my VF page :

 

<apex:page standardStylesheets="false" showHeader="false" sidebar="false" controller="PorductTable"
>
<apex:stylesheet value="{!URLFOR($Resource.SiteTemplate, 'styles.css')}"/>
<div class="header-wrapper">
<div class="header pagewidth">

<h1><a href="#">Static</a></h1>
<h2>A bright fluid layout</h2>

</div>
</div>

 

<div class="nav-wrapper-outside">
<div class="nav-wrapper pagewidth">
<div class="nav">
<ul>

<li><apex:outputLink value="/apex/SiteIndex">Home</apex:outputLink></li>
<li><apex:outputLink value="/apex/SiteAboutus">About us</apex:outputLink></li>
<li><apex:outputLink value="/apex/SiteProducts">Products</apex:outputLink></li>
<li><apex:outputLink value="/apex/SiteSupport">Support</apex:outputLink></li>
<li><apex:outputLink value="/apex/SiteContact">Contact</apex:outputLink></li>

</ul>
</div>
</div>
</div>

<apex:form >
<div class="pagewidth">
<div class="page-wrap">
<div class="content">

 

<h3>Products List</h3>
<apex:outputPanel id="detail">
<apex:dataTable value="{!products}" var="prod" id="theTable" >

<apex:column >

<apex:facet name="header">Name</apex:facet>

<apex:outputText value="{!prod.Name}"/>

</apex:column>

<apex:column >

<apex:facet name="header">Image</apex:facet>

<apex:outputField value="{!prod.Image__c}"/>

</apex:column>

<apex:column >
<apex:outputLink value="/apex/ProductDetail?Id={!prod.Id}">
Details
</apex:outputLink>
</apex:column>

 

<apex:column >
<apex:outputLink value="/apex/ProductDetail?Id={!prod.Id}">
Add to Cart
</apex:outputLink>
</apex:column>

</apex:dataTable>
</apex:outputPanel>
</div>

<br /><br />
<div class="sidebar">

<h3>Categories</h3>
<apex:dataList value="{!categories}" var="cat">

<apex:commandLink reRender="detail">{!cat.Name}
<apex:param name="categoryid" value="{!cat.id}"/>
</apex:commandLink>



</apex:dataList>

</div>


<div class="clear"></div>
</div>
</div>
</apex:form>

</apex:page>

 

 

And this is my controller :

 

 

public class PorductTable {

List<SiteProduct__c> products;
SiteProduct__c productDetail;
List<Category__c> categories;

 

public List<SiteProduct__c> getproducts() {

String categoryId = System.currentPageReference().getParameters().get('categoryId');

if(categoryId==null)
{
if(products== null) products= [select Id,Name,Category__c,Description__c, Image__c,Price__c,Quantity__c from SiteProduct__c
];
}
else
{
if(products== null) products= [select Id,Name,Category__c,Description__c, Image__c,Price__c,Quantity__c from SiteProduct__c
where Category__r.Id= :categoryId];
}

return products;

}

public SiteProduct__c getproductdetail() {

String theId = ApexPages.currentPage().getParameters().get('id');

productDetail= [select Name,Category__c,Description__c, Image__c,Price__c,Quantity__c from SiteProduct__c
where ID = :theId ];

return productDetail;

}

public List<Category__c> getcategories() {


categories= [select Id,Name from Category__c ];

return categories;

}


}

 

 
Avidev9Avidev9

You are not listening to me!!!!!!!!!!!!!!!

Your code still has a capital "I"

 

 String categoryId = System.currentPageReference().getParameters().get('categoryId');

 is should be

 

 String categoryId = System.currentPageReference().getParameters().get('categoryid');

 and also modify this 

 

 

<apex:commandLink reRender="detail"> 
                  {!cat.Name}                 
                  <apex:param name="categoryid" value="{!cat.id}"/>
               </apex:commandLink>

 To

 

<apex:commandLink reRender="detail" value="{!cat.Name}">                  
                  <apex:param name="categoryid" value="{!cat.id}"/>
               </apex:commandLink>

 
arosysarosys

Hi sorry for replying late.

My network connection was lost.

I mistakenly copied that code actually i had changed my original code now instead of using ajax i am passing categoryid in url

and reloading page and its working fine.

 

When i was copying code i mistakenly copied it from question asked only.However i tried running the code after changing it like this also :

In controller:

String categoryId = System.currentPageReference().getParameters().get('categoryid');

 

In VF page :

<apex:commandLink reRender="detail" value="{!cat.Name}">
<apex:param name="categoryid" value="{!cat.id}"/>
</apex:commandLink>

 

 

 

But its still not working.

Thanks for your patience.
arosysarosys

Also i am using this page in force.com site if that make any difference.

 
Avidev9Avidev9
did you check this, if its working internally ?
arosysarosys

I checked log like this in apex code i added this line :

 

String categoryId = System.currentPageReference().getParameters().get('categoryid');
System.Debug('categoryid'+categoryid);

 

And viewing it from Debug Log :

I got this :

 

00:05:23.046 (46043000)|USER_DEBUG|[13]|DEBUG|categoryida0G9000000874cpEAA

 

while on checking the same categoryid from platform in url its showing :a0G9000000874cp

 

means that extra 'EAA' is coming.

 

 

 

 

 

 

 
Avidev9Avidev9
That is not an issue!
What about the Query is it is returning results ?
arosysarosys

How will i view that i am first time using this log .This is the log i am getting :

 

 

28.0 APEX_CODE,DEBUG;APEX_PROFILING,INFO;CALLOUT,INFO;DB,INFO;SYSTEM,DEBUG;VALIDATION,INFO;VISUALFORCE,INFO;WORKFLOW,INFO
00:05:13.059 (59381000)|EXECUTION_STARTED
00:05:13.059 (59433000)|CODE_UNIT_STARTED|[EXTERNAL]|06690000002Yrdl|VF: /apex/SiteProducts
00:05:13.059 (59632000)|VF_DESERIALIZE_VIEWSTATE_BEGIN|06690000002Yrdl
00:05:13.069 (69604000)|VF_DESERIALIZE_VIEWSTATE_END
00:05:13.071 (71759000)|CODE_UNIT_STARTED|[EXTERNAL]|01p9000000344GU|PorductTable get(products)
00:05:13.071 (71781000)|SYSTEM_MODE_ENTER|true
00:05:13.080 (80912000)|CODE_UNIT_STARTED|[EXTERNAL]|01p9000000344GU|PorductTable invoke(getproducts)
00:05:13.081 (81018000)|METHOD_ENTRY|[1]|01p9000000344GU|PorductTable.PorductTable()
00:05:13.081 (81031000)|METHOD_EXIT|[1]|PorductTable
00:05:13.081 (81208000)|SYSTEM_METHOD_ENTRY|[12]|System.currentPageReference()
00:05:13.081 (81319000)|SYSTEM_METHOD_EXIT|[12]|System.currentPageReference()
00:05:13.081 (81355000)|SYSTEM_METHOD_ENTRY|[12]|System.PageReference.getParameters()
00:05:13.081 (81431000)|SYSTEM_METHOD_EXIT|[12]|System.PageReference.getParameters()
00:05:13.081 (81473000)|SYSTEM_METHOD_ENTRY|[12]|MAP<String,String>.get(Object)
00:05:13.081 (81492000)|SYSTEM_METHOD_EXIT|[12]|MAP<String,String>.get(Object)
00:05:13.081 (81517000)|SYSTEM_METHOD_ENTRY|[13]|System.debug(ANY)
00:05:13.081 (81538000)|USER_DEBUG|[13]|DEBUG|categoryida0G9000000874cpEAA
00:05:13.081 (81546000)|SYSTEM_METHOD_EXIT|[13]|System.debug(ANY)
00:05:13.081 (81567000)|CODE_UNIT_FINISHED|PorductTable invoke(getproducts)
00:05:13.081 (81581000)|CODE_UNIT_FINISHED|PorductTable get(products)
00:05:13.082 (82256000)|CODE_UNIT_STARTED|[EXTERNAL]|01p9000000344GU|PorductTable get(categories)
00:05:13.082 (82272000)|SYSTEM_MODE_ENTER|true
00:05:13.082 (82287000)|CODE_UNIT_STARTED|[EXTERNAL]|01p9000000344GU|PorductTable invoke(getcategories)
00:05:13.083 (83640000)|SOQL_EXECUTE_BEGIN|[44]|Aggregations:0|select Id, Name from Category__c
00:05:13.088 (88033000)|SOQL_EXECUTE_END|[44]|Rows:4
00:05:13.088 (88135000)|CODE_UNIT_FINISHED|PorductTable invoke(getcategories)
00:05:13.088 (88149000)|CODE_UNIT_FINISHED|PorductTable get(categories)
00:05:13.094 (94179000)|CODE_UNIT_STARTED|[EXTERNAL]|01p9000000344GU|PorductTable get(products)
00:05:13.094 (94198000)|SYSTEM_MODE_ENTER|true
00:05:13.094 (94215000)|CODE_UNIT_STARTED|[EXTERNAL]|01p9000000344GU|PorductTable invoke(getproducts)
00:05:13.094 (94274000)|SYSTEM_METHOD_ENTRY|[12]|System.currentPageReference()
00:05:13.094 (94322000)|SYSTEM_METHOD_EXIT|[12]|System.currentPageReference()
00:05:13.094 (94338000)|SYSTEM_METHOD_ENTRY|[12]|System.PageReference.getParameters()
00:05:13.094 (94377000)|SYSTEM_METHOD_EXIT|[12]|System.PageReference.getParameters()
00:05:13.094 (94406000)|SYSTEM_METHOD_ENTRY|[12]|MAP<String,String>.get(Object)
00:05:13.094 (94425000)|SYSTEM_METHOD_EXIT|[12]|MAP<String,String>.get(Object)
00:05:13.094 (94441000)|SYSTEM_METHOD_ENTRY|[13]|System.debug(ANY)
00:05:13.094 (94452000)|USER_DEBUG|[13]|DEBUG|categoryida0G9000000874cpEAA
00:05:13.094 (94459000)|SYSTEM_METHOD_EXIT|[13]|System.debug(ANY)
00:05:13.094 (94474000)|CODE_UNIT_FINISHED|PorductTable invoke(getproducts)
00:05:13.094 (94485000)|CODE_UNIT_FINISHED|PorductTable get(products)
00:05:13.096 (96048000)|CODE_UNIT_STARTED|[EXTERNAL]|01p9000000344GU|PorductTable get(categories)
00:05:13.096 (96062000)|SYSTEM_MODE_ENTER|true
00:05:13.096 (96075000)|CODE_UNIT_STARTED|[EXTERNAL]|01p9000000344GU|PorductTable invoke(getcategories)
00:05:13.096 (96247000)|SOQL_EXECUTE_BEGIN|[44]|Aggregations:0|select Id, Name from Category__c
00:05:13.098 (98655000)|SOQL_EXECUTE_END|[44]|Rows:4
00:05:13.098 (98717000)|CODE_UNIT_FINISHED|PorductTable invoke(getcategories)
00:05:13.098 (98735000)|CODE_UNIT_FINISHED|PorductTable get(categories)
00:05:13.205 (205505000)|VF_SERIALIZE_VIEWSTATE_BEGIN|06690000002Yrdl
00:05:13.208 (208605000)|VF_SERIALIZE_VIEWSTATE_END
00:05:13.921 (211888000)|CUMULATIVE_LIMIT_USAGE
00:05:13.921|LIMIT_USAGE_FOR_NS|(default)|
Number of SOQL queries: 2 out of 100
Number of query rows: 8 out of 50000
Number of SOSL queries: 0 out of 20
Number of DML statements: 0 out of 150
Number of DML rows: 0 out of 10000
Number of code statements: 12 out of 200000
Maximum heap size: 0 out of 6000000
Number of callouts: 0 out of 10
Number of Email Invocations: 0 out of 10
Number of fields describes: 0 out of 100
Number of record type describes: 0 out of 100
Number of child relationships describes: 0 out of 100
Number of picklist describes: 0 out of 100
Number of future calls: 0 out of 10

00:05:13.921|CUMULATIVE_LIMIT_USAGE_END

00:05:13.211 (211951000)|CODE_UNIT_FINISHED|VF: /apex/SiteProducts
00:05:13.211 (211960000)|EXECUTION_FINISHED
Avidev9Avidev9

There are lots of problem in code.

Anyways it should work I hope so, 

 

 public class PorductTable {
     List < SiteProduct__c > products;
     SiteProduct__c productDetail;
     List < Category__c > categories;
     
     public 
     public List < SiteProduct__c > getproducts() {

         String categoryId = System.currentPageReference().getParameters().get('categoryId');

         if (categoryId == null) {
            products = [select Id, Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c];
         } else {
             products = [select Id, Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c
                 where Category__r.Id = : categoryId
             ];
         }
         return products;
     }

     public SiteProduct__c productdetail() {

         String theId = ApexPages.currentPage().getParameters().get('id');

         productDetail = [select Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c
             where ID = : theId
         ];
         return productDetail;
     }

     public List < Category__c > getcategories() {


         categories = [select Id, Name from Category__c];
         return categories;
     }


 }

 

 

<apex:commandLink reRender="detail" value="{!cat.Name}" action="{!productDetail}">                  
                  <apex:param name="categoryid" value="{!cat.id}"/>
               </apex:commandLink>
This was selected as the best answer
arosysarosys

First time it was properly working.

But now its showing error :

 

List has more than 1 row for assignment to SObject

Error is in expression '{!productDetail}' in page siteproducts 

An unexpected error has occurred. Your development organization has been notified.

 

Also what is the purpose of calling 'productdetail'

in the function productdetail from where it will get the value 'id'

 

String theId = ApexPages.currentPage().getParameters().get('id');

 

we are not passing any parameter.

But ut worked fine first time.
Avidev9Avidev9

Man you need to work on basic.

 

I really dont understand the purpose of the code I am just guessing!

 

This is where you are passing the parameters.

 

<apex:commandLink reRender="detail" value="{!cat.Name}" action="{!populateCategories}">                  
                  <apex:param name="categoryid" value="{!cat.id}"/>
               </apex:commandLink>

 

 

Actually I modified your code and I felt like you were having everything else in place.

 

public class PorductTable {
     List < SiteProduct__c > products;
     SiteProduct__c productDetail;
     List < Category__c > categories;
     String categoryid; 
     public List < SiteProduct__c > getproducts() {


         if (categoryId == null) {
            products = [select Id, Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c];
         } else {
             products = [select Id, Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c
                 where Category__r.Id = : categoryId
             ];
         }
         return products;
     }
     
     public void populateCategories(){
        categoryid = ApexPages.currentPage().getParameters().get('categoryid');
     }
     /*I dont know the pupose of this*/
     public SiteProduct__c productdetail() {

         categoryid = ApexPages.currentPage().getParameters().get('categoryid');

         productDetail = [select Name, Category__c, Description__c, Image__c, Price__c, Quantity__c from SiteProduct__c
             where ID = : categoryId
         ];
         return productDetail;
     }

     public List < Category__c > getcategories() {


         categories = [select Id, Name from Category__c];
         return categories;
     }


 }
arosysarosys

Productdetail is called from a different visualforce page which shows detail of a particular product.

 

when you told paste whatever code you have i pasted whole controller class .

 

Previously you called productdetail action in command link thats why i asked whats the purpose.

 
Annie KitchensAnnie Kitchens
AJAX is the art of exchanging data between server and client without reloading the complete web page (https://erideshub.com/). Visualforce has inbuilt support for the AJAX. using the attribute “rerender” we can specify that where the response should be rendered.