Activity › Forums › Salesforce® Discussions › Using controller methods via Javscript without Action tags in a salesforce visualforce page

Tagged: , , , , , ,

  • Vikas Kumar

    Member
    January 20, 2017 at 2:33 pm

    Hi kumar,

    Try the following code

    Try the following code

    CONTROLLER

    public with sharing class SearchJavascriptController {

    public list<Account>accountlist { get; set; }
    public SearchJavascriptController()
    {
    accountList = new list<Account>();
    accountList =[Select Name,Id,AnnualRevenue From Account];
    }

    }

     

    VF Page

    <apex:page controller=”SearchJavascriptController”>
    <html>
    <head>
    <style>

    * {
    box-sizing: border-box;
    }

    #myInput {
    background-image: url(‘/css/searchicon.png’);
    background-position: 10px 10px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    }

    #myTable {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    font-size: 18px;
    }

    #myTable th, #myTable td {
    text-align: left;
    padding: 12px;
    }

    #myTable tr {
    border-bottom: 1px solid #ddd;
    }

    #myTable tr.header, #myTable tr:hover {
    background-color: #f1f1f1;
    }
    </style>
    </head>
    <body>

    <apex:form id=”theForm”>
    <apex:pageBlock >
    <h2>My Account</h2>
    <input type=”text” id=”myInput” onkeyup=”myFunction()” placeholder=”Search for names..” title=”Type in a name”>
    </input>
    </apex:pageBlock>
    <table id=”myTable”>
    <tr>
    <th><h1> ACCOUNT NAME</h1></th>
    <th><h1> ACCOUNT ID</h1></th>
    <th><h1>ANNUAL REVENUE</h1></th>
    </tr>
    <apex:repeat value=”{!accountList}” var=”acc” id=”theRepeat”>
    <tr>
    <td>{!acc.name}</td>
    <td>{!acc.id}</td>
    <td>{!acc.AnnualRevenue}</td>
    </tr>
    </apex:repeat>
    </table>
    <script>
    function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById(“myInput”);
    console.log(input);
    filter = input.value.toUpperCase();

    table = document.getElementById(“myTable”);
    tr = table.getElementsByTagName(“tr”);
    for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName(“td”)[0];
    if (td) {
    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

    tr[i].style.display = “”;
    } else {
    tr[i].style.display = “none”;
    }
    }
    }
    }
    </script>
    </apex:form>
    </body>
    </html>

    </apex:page>

Log In to reply.

Reply

Subscribe

Popular Salesforce Blogs

Popular Salesforce Videos

Report

Harassment or bullying behavior
Harassment or bullying behavior
Contains mature or sensitive content
Contains misleading or false information
Mobile App Reported Contents
Contains abusive or derogatory content
Contains spam, fake content or potential malware

Block Member?

Please confirm you want to block this member.

You will no longer be able to:

  • See blocked member's posts
  • Mention this member in posts
  • Invite this member to groups
  • Message this member
  • Add this member as a connection

Please note: This action will also remove this member from your connections and send a report to the site admin. Please allow a few minutes for this process to complete.

Report

You have already reported this .