Toggle Side Panel
Close search

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.