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
Javeed ShaikJaveed Shaik 

Unable to call remote action method usging javascript in visualforce page

I wanted to display a case details as a table when user enters a case number and hit ''search" button.
I dont know what is wrong with my code. I also tried to display the searched element on browser console and log.. but its not working. Pleae help me out!!

My Controller: 
global with sharing class CaseSearch {
    
    public string searchElement {get; set;}
    public static Case c;
    
    public CaseSearch(ApexPages.StandardController controller) {

    }
    
    @RemoteAction
    global static Case caseSearchMethod(string searchElement){
        c = [SELECT Id,Account.name,status FROM Case WHERE CaseNumber= :searchElement LIMIT 1];
        system.debug(searchElement);
        return c;
        }
}

and here is my Visualforce Page: 
<apex:page standardController="Case" extensions="CaseSearch">
<apex:messages />
<style>
    input{
        float: center;
        width: 100%;
        padding: 12px  50px;
        margin: 8px 0;
        display: inline-block;
        border: 2px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .center{
        margin: auto;
        width: 60%;
        //border: 3px solid #73AD21;
        padding: 10px;
    }
    h{
        font-size: 20px; 
        text-align: center;
    }
    table {
        border: 1px solid;
        padding: 12px 20px;
    }
</style>
<script type="text/javascript"> 
    function search(){
    var searchElement = document.getElementById.('case_number').value;
        window.alert("Hello!");
        console.log(searchElement);
        Visualforce.remoting.manager.invokeAction("{!$remoteAction.CaseSearch.caseSearchMethod}",searchElement,function(result,event){
            if(event.status){
                console.log(searchElement);
            }
        });
    }
</script>
    <br/><br/><br/><br/>
    <div class="center">
        <input placeholder="Please Enter Your Case Number Here" id="case_number"></input>
        <Button type="button" value="Search" onclick="search()">Search</button>
    </div>
    <div id="caseDetails" class="center" rendered="false">
        <table style="width:100%">
            <tr>
                <th style="25%">Case Number</th>
                <th style="25%">Name</th>
                <th style="25%">Status</th>
            </tr>
            <tr>
                <td><apex:outputText value="{!C.CaseNumber}"></apex:outputText></td>
                <td><apex:outputText value="{!C.account.name}"></apex:outputText></td>
                <td><apex:outputText value="{!C.status}"></apex:outputText></td>
            </tr>
        </table>
    </div>

</apex:page>
*It would be nice if you help me to show the case details table only after I hit 'Search' button and align the search button to center.

Thanks in Advance!!
Javeed Shaik
Best Answer chosen by Javeed Shaik
Shun KosakaShun Kosaka
Hi Javeed,
There is a syntax error in search() method. Remove the dot after getElementById! And add result html in the callback method. Case number is also required in the query if you display it.

I also modified the visibility of the case details table :D

Controller: 
global with sharing class CaseSearch {
    
    public string searchElement {get; set;}
    public static Case c;
    
    public CaseSearch(ApexPages.StandardController controller) {

    }
    
    @RemoteAction
    global static Case caseSearchMethod(string searchElement){
        c = [SELECT Id, Account.Name, Status, CaseNumber FROM Case WHERE CaseNumber= :searchElement LIMIT 1];
        system.debug(searchElement);
        return c;
        }
}

Page: 
<apex:page standardController="Case" extensions="CaseSearch">
<apex:messages />
<style>
    input{
        float: center;
        width: 100%;
        padding: 12px  50px;
        margin: 8px 0;
        display: inline-block;
        border: 2px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .center{
        margin: auto;
        width: 60%;
        //border: 3px solid #73AD21;
        padding: 10px;
    }
    h{
        font-size: 20px; 
        text-align: center;
    }
    table {
        border: 1px solid;
        padding: 12px 20px;
    }
    #caseDetails{
        display:none;
    }
</style>
<script type="text/javascript">
    function search(){
    var searchElement = document.getElementById('case_number').value;    
    Visualforce.remoting.Manager.invokeAction("{!$remoteAction.CaseSearch.caseSearchMethod}",searchElement,function(result,event){
            if(event.status){
                document.getElementById('caseDetails').style.display = "block";
                document.getElementById('result_case_number').innerHTML = result.CaseNumber;
                document.getElementById('result_case_accname').innerHTML = result.Account.Name;
                document.getElementById('result_case_status').innerHTML = result.Status;
            }
        }
    );
    }
</script>
    <br/><br/><br/><br/>
    <div class="center">
        <input placeholder="Please Enter Your Case Number Here" id="case_number"></input>
        <button type="button" value="Search" onclick="search()">Search</button>
    </div>
    <div id="caseDetails" class="center">
        <table style="width:100%">
            <tr>
                <th style="25%">Case Number</th>
                <th style="25%">Name</th>
                <th style="25%">Status</th>
            </tr>
            <tr>
                <td id="result_case_number"></td>
                <td id="result_case_accname"></td>
                <td id="result_case_status"></td>
            </tr>
        </table>
    </div>
</apex:page>


 

All Answers

Shun KosakaShun Kosaka
Hi Javeed,
There is a syntax error in search() method. Remove the dot after getElementById! And add result html in the callback method. Case number is also required in the query if you display it.

I also modified the visibility of the case details table :D

Controller: 
global with sharing class CaseSearch {
    
    public string searchElement {get; set;}
    public static Case c;
    
    public CaseSearch(ApexPages.StandardController controller) {

    }
    
    @RemoteAction
    global static Case caseSearchMethod(string searchElement){
        c = [SELECT Id, Account.Name, Status, CaseNumber FROM Case WHERE CaseNumber= :searchElement LIMIT 1];
        system.debug(searchElement);
        return c;
        }
}

Page: 
<apex:page standardController="Case" extensions="CaseSearch">
<apex:messages />
<style>
    input{
        float: center;
        width: 100%;
        padding: 12px  50px;
        margin: 8px 0;
        display: inline-block;
        border: 2px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .center{
        margin: auto;
        width: 60%;
        //border: 3px solid #73AD21;
        padding: 10px;
    }
    h{
        font-size: 20px; 
        text-align: center;
    }
    table {
        border: 1px solid;
        padding: 12px 20px;
    }
    #caseDetails{
        display:none;
    }
</style>
<script type="text/javascript">
    function search(){
    var searchElement = document.getElementById('case_number').value;    
    Visualforce.remoting.Manager.invokeAction("{!$remoteAction.CaseSearch.caseSearchMethod}",searchElement,function(result,event){
            if(event.status){
                document.getElementById('caseDetails').style.display = "block";
                document.getElementById('result_case_number').innerHTML = result.CaseNumber;
                document.getElementById('result_case_accname').innerHTML = result.Account.Name;
                document.getElementById('result_case_status').innerHTML = result.Status;
            }
        }
    );
    }
</script>
    <br/><br/><br/><br/>
    <div class="center">
        <input placeholder="Please Enter Your Case Number Here" id="case_number"></input>
        <button type="button" value="Search" onclick="search()">Search</button>
    </div>
    <div id="caseDetails" class="center">
        <table style="width:100%">
            <tr>
                <th style="25%">Case Number</th>
                <th style="25%">Name</th>
                <th style="25%">Status</th>
            </tr>
            <tr>
                <td id="result_case_number"></td>
                <td id="result_case_accname"></td>
                <td id="result_case_status"></td>
            </tr>
        </table>
    </div>
</apex:page>


 
This was selected as the best answer
Javeed ShaikJaveed Shaik
Hi Shun Kosaka,

Thank you very much! it worked for me!! :)