function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
rohitash yadavrohitash yadav 

working with multiple records in visualforce javascript remoting

Hi,

I have create a visualforce page with javascript remoting and I am using jquery template plugin to show list of leads. Now I want to add a delete button into this listing. How can I achieve this??

My visualforce page is :
 
<apex:page controller="LeadsWithoutActivityController" >
    <!-- include jquery API to create a dynamic table with dynamic columns and CSS similar to salesfroce -->
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/> 
    <apex:includeScript value="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"/> 
    <apex:pageBlock >
        <apex:pageBlockSection columns="1" collapsible="false" id="resultPanel"  >
        <!--- dynamic table --->
        <table cellspacing="0" cellpadding="0" border="0" id="searchResults" class="list "> 
            <colgroup span="2"></colgroup>      
            <thead>
                <tr class="headerRow ">
                    <th colspan="1" scope="col" class="headerRow">Name</th>
                    <th colspan="1" scope="col" class="headerRow">View Quote</th>
                    <th colspan="1" scope="col" class="headerRow">Account Name</th>
                    <th colspan="1" scope="col" class="headerRow">Opportunity Amount</th>
                    <th colspan="1" scope="col" class="headerRow">Quote No</th>
                    <th colspan="1" scope="col" class="headerRow">Date Created</th>
                </tr>
            </thead>
            <tbody />   
        </table> 
        <br/>
        <button type="button" onclick="getCall('previous')">Previous</button>   &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" onclick="getCall('next')">Next</button>  &nbsp;&nbsp;&nbsp;&nbsp;
        <div id="responseErrors"></div>
        </apex:pageBlockSection>
    </apex:pageBlock>

    <!-- dynamic column mapping with javascript SObject fields -->
    <script id="leadsTableRowTemplate" type="text/x-jquery-tmpl">
        <tr onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}" onmouseout="if (window.hiOff){hiOff(this);} " onmouseover="if (window.hiOn){hiOn(this);} " class="dataRow even  first">
            <td class="dataCell">${Name}</td>
            <td class="dataCell">${Site_quote_no__c}</td>
            <td class="dataCell">${Account__c}</td>
            <td class="dataCell">${Opportunity_Amount__c}</td>
            <td class="dataCell">${Site_quote_no__c}</td>
            <td class="dataCell">${CreatedDate}</td>
        </tr>
    </script>
    <script type="text/javascript">
        var objectValue;
        var pageNumber =0;
        var searchValue;
        
        //Method calls from search button to call server method   
        function getRemoteCall() {
            var markup = "";
            var arrTableHeader = [];
            pageNumber=0;

            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.LeadsWithoutActivityController.RemoteCall}',
                function(result, event){
                    if (event.status && event.result) {
                        pageNumber=1;

                        //dynamic header creation
                        refreshData(event.result.rowList);
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
            );
        }

        //append data to search table via jquery tamplates
        function refreshData(data){
            $("#searchResults tbody").html('');
            $.each(data, function () {
                $("#leadsTableRowTemplate" ).tmpl(this).appendTo( "#searchResults tbody" );
            });
        }

        //Methods for paginations
        function getCall(buttonType){
            if(buttonType=='next' ){
                pageNumber =  pageNumber +1 ;
            } else if(buttonType=='previous' ){
                if( pageNumber >=2){
                    pageNumber =  pageNumber -1 ;
                }
            }

            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.LeadsWithoutActivityController.RemoteCallPagaination}',
                buttonType,pageNumber,
                function(result, event){
                    if (event.status && event.result) {
                        refreshData(event.result);
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
            );
        }

        function createHeaderMarkup() {
            return ("<th >${colName}</th>");
        }
        function createHeader(colName) {
            return ({ 'colName': colName });
        }
        getRemoteCall();
    </script>
</apex:page>



Thanks,
Rohitash