Return to Snippet

Revision: 43536
at March 26, 2011 00:23 by abhinavguptas

Initial Code
<apex:page controller="testremotingcontroller">
<!-- Jquery Min and Template Plugin include -->
<apex:includeScript value=""/>
<apex:includeScript value=""/>

<apex:sectionHeader title="Javascript Remoting & jQuery Templates !"/>

  Existing visualforce tags like pageBlock, pageBlockSection are always good to
  get salesforce look and feel with lesser markup.
<apex:pageBlock title="Accounts">
    <!-- Render a Section to show Account Search box with button -->
    <apex:pageBlockSection title="Search Accounts" columns="2">
       <apex:pageBlockSectionItem >
          Account Name :
          <input type = "text" id = "accountNameToSearch" />
          <button onclick="searchAccounts()">Get Account</button>
    Another section for showing the account search results as grid
    <apex:pageBlockSection title="Matching Accounts !" columns="1">
    Created Empty table using the CSS styles of visualforce pageBlockTable 
    This gives same look and feel. Thanks firebug/firefox for this. 
    <table cellspacing="0" cellpadding="0" border="0" id="searchResults" class="list ">
       <colgroup span="2"></colgroup>
       <thead class="rich-table-thead">
          <tr class="headerRow ">
              <th colspan="1" scope="col" class="headerRow">Id</th>
              <th colspan="1" scope="col" class="headerRow"> Name</th>
              <th colspan="1" scope="col" class="headerRow"> Phone</th>
              <th colspan="1" scope="col" class="headerRow">Type</th>
              <th colspan="1" scope="col" class="headerRow"> Number of Employees</th>                            
  <!-- table body left empty for populating via row template using jquery -->
       <tbody />

<!-- Create a named jquery template -->
<script id="resultTableRowTemplate" 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">${Id}</td>
    <td class="dataCell">${Name}</td>
    <!-- Please Note: We created a input text field here for Phone -->
    <td class="dataCell"><input type="text" value="${Phone}" /></td>
    <td class="dataCell">${Type}</td>       
    <td class="dataCell">${NumberOfEmployees}</td>

<script type="text/javascript">
// if you are inside some component
// use jquery nonConflict
// var t$ = jQuery.noConflict();

function searchAccounts() {
    var accountName = $('#accountNameToSearch').val();
    // clear previous results, if any
    $("#searchResults tbody").html('');
    // The Spring-11 gift from Javascript remoting fires here
    // Please note "abhinav" if my org wide namespace prefix
    // testremotingcontroller is the Apex controller
    // searchAccounts is Apex Controller method demarcated with @RemoteAction annotation.
    abhinav.testremotingcontroller.searchAccounts( accountName, function(result, event){          
       if (event.status && event.result) {  
         $.each(event.result, function () {              
    // for each result, apply it to template and append generated markup to the results table body.
              var row = $("#resultTableRowTemplate" ).tmpl(this);
    // locate the Phone field and bind this account and blur handler to it
    var phoneInputField = row.find('td input');
    // bind the current records i.e. Account object with this cell 
    // so that it can be located later on in blur event.'account', this);
    // Watch for blur events on the phone field
       function () {
     // fetch the binded Accout object from the phone input field
     var orginalAcc = $(this).data('account');
     // fire a Javascript Remoting update call only if, user changed the phone
     if (orginalAcc.Phone != $(this).val()) 
         updateAccount(orginalAcc, $(this).val());
    // append the tempalte row markup to table above
    row.appendTo( "#searchResults tbody" );
       } else {
    }, {escape:true});

function updateAccount(acc, newPhoneVal) {
    // Javascript Remoting to update Accout record 
    abhinav.testremotingcontroller.updateAccount( acc.Id, newPhoneVal, function(result, event){          
       if (event.status && event.result) {        
     // alert user on update for now, to go for fancy one can do animations or 
     // even stay silent ;)
          alert('Account - '  + acc.Name + ' updated  !');
       } else {
    }, {escape:true});


Initial URL

Initial Description
Apex Controller code for this snippet is available here :

Initial Title
Editable Account Grid using Visualforce Javascript Remoting & Jquery Templates

Initial Tags

Initial Language