Salesforce Developer Community

Rushikesh Patil
NEWBIE
25 Points
Member since 2014

Chatter

Feed
1

Best Answers
0

Likes Received
0

Likes Given
0

Questions
2

Replies

Visualforce apex function

<apex:page sidebar="false" showHeader="false" docType="html-5.0" controller="Ecommerce">
<apex:form >
<apex:actionFunction name="passStringToController" action="{!myMethod}" reRender="op">
<apex:param name="params" assignTo="{!EnteredText}" value=""/>
</apex:actionFunction>
<apex:outputPanel id="op">
<apex:outputText value="{!prodlist}"/>
</apex:outputPanel>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#ip1").keyup(function(){
 var enteredtext=document.getElementById("ip1").value;
  //alert(enteredtext); 
    passStringToController(enteredtext);
});
});
</script>
<center><h1>Welcome to Ecommerce Website</h1></center>
<div class="searchproducts">
 <form>
  <input type="text" placeholder="Search Products.." class="sp" id="ip1"/>
  <input type="text" name="search" placeholder="Search Categories.." class="sc"/>
</form> 
</div>  
<style>
.sp{
    width: 160px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background-color: white;
    background-image: url('http://www.freeiconspng.com/uploads/search-icon-png-22.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    float:right;
}

.sp:focus{
    width: 20%;
}
.sc{
    width: 160px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background-color: white;
    background-image: url('http://www.freeiconspng.com/uploads/search-icon-png-22.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    float:right;
}

.sc:focus{
    width: 20%;
}
h1{
font-size:20px;
}
</style>
</html>
</apex:form>
</apex:page>

//Controller

public class Ecommerce {
public String EnteredText{get;set;}
public List<Product2> prodlist{get;set;}
    public PageReference myMethod() {
   system.debug(EnteredText);
    List<Product2> prodlist=[Select Name from Product2 where name like: EnteredText + '%'];
    system.debug(prodlist);
        return null;
    }

}

Hi All,

Need help.MY Requirement here is in my vf page i should be able to display result from controller.
What i am doing is using onkeyup event which invokes passStringToController() method in action function which inturns calls mymethod in controller and there i am fetching results using query.Now the query result i wanted to display in vf page. Basically the idea is i am designing a ecommerce website so when any user enters product name like 'c' it should display all products with c.If he types on like "co" then it should display products with co like we search in amazon and all.
the result should be displayed exactly in the input text area.

Thanks in Advance

Deepak agarwal 9
March 08, 2017
Like
0

SOLVED

3 replies

Visualforce apex function

<apex:page sidebar="false" showHeader="false" docType="html-5.0" controller="Ecommerce">
<apex:form >
<apex:actionFunction name="passStringToController" action="{!myMethod}" reRender="op">
<apex:param name="params" assignTo="{!EnteredText}" value=""/>
</apex:actionFunction>
<apex:outputPanel id="op">
<apex:outputText value="{!prodlist}"/>
</apex:outputPanel>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#ip1").keyup(function(){
 var enteredtext=document.getElementById("ip1").value;
  //alert(enteredtext); 
    passStringToController(enteredtext);
});
});
</script>
<center><h1>Welcome to Ecommerce Website</h1></center>
<div class="searchproducts">
 <form>
  <input type="text" placeholder="Search Products.." class="sp" id="ip1"/>
  <input type="text" name="search" placeholder="Search Categories.." class="sc"/>
</form> 
</div>  
<style>
.sp{
    width: 160px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background-color: white;
    background-image: url('http://www.freeiconspng.com/uploads/search-icon-png-22.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    float:right;
}

.sp:focus{
    width: 20%;
}
.sc{
    width: 160px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background-color: white;
    background-image: url('http://www.freeiconspng.com/uploads/search-icon-png-22.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    float:right;
}

.sc:focus{
    width: 20%;
}
h1{
font-size:20px;
}
</style>
</html>
</apex:form>
</apex:page>

//Controller

public class Ecommerce {
public String EnteredText{get;set;}
public List<Product2> prodlist{get;set;}
    public PageReference myMethod() {
   system.debug(EnteredText);
    List<Product2> prodlist=[Select Name from Product2 where name like: EnteredText + '%'];
    system.debug(prodlist);
        return null;
    }

}

Deepak agarwal 9
March 08, 2017
Like
0

2 replies

how to add Lead Layout in package ?

hi,
I am trying to buil a package, but 'Lead Layout' can't include in package, when i include LeadLayout then show below error

Data Not Available
The data you were trying to access could not be found. It may be due to another user deleting the data or a system error. If you know the data is not deleted but cannot access it, please look at our support page.

Error ID: 266224100-145892 (-68824995)

please help me.....

Aarti Chaudhari
March 08, 2017
Like
0