Editable Account Grid using Visualforce Javascript Remoting & Jquery Templates


/ Published in: XML
Save to your folder(s)

Apex Controller code for this snippet is available here : http://snipplr.com/view/51126/apex-controller-for-javascript-remoting-sample/


Copy this code and paste it in your HTML
  1. <apex:page controller="testremotingcontroller">
  2. <!-- Jquery Min and Template Plugin include -->
  3. <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/>
  4. <apex:includeScript value="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"/>
  5.  
  6. <apex:sectionHeader title="Javascript Remoting & jQuery Templates !"/>
  7.  
  8. <!--
  9. Existing visualforce tags like pageBlock, pageBlockSection are always good to
  10. get salesforce look and feel with lesser markup.
  11. -->
  12. <apex:pageBlock title="Accounts">
  13. <!-- Render a Section to show Account Search box with button -->
  14. <apex:pageBlockSection title="Search Accounts" columns="2">
  15. <apex:pageBlockSectionItem >
  16. Account Name :
  17. <input type = "text" id = "accountNameToSearch" />
  18. <button onclick="searchAccounts()">Get Account</button>
  19. </apex:pageBlockSectionItem>
  20. </apex:pageBlockSection>
  21.  
  22. <!--
  23. Another section for showing the account search results as grid
  24. -->
  25. <apex:pageBlockSection title="Matching Accounts !" columns="1">
  26. <!--
  27. Created Empty table using the CSS styles of visualforce pageBlockTable
  28. This gives same look and feel. Thanks firebug/firefox for this.
  29. -->
  30. <table cellspacing="0" cellpadding="0" border="0" id="searchResults" class="list ">
  31. <colgroup span="2"></colgroup>
  32. <thead class="rich-table-thead">
  33. <tr class="headerRow ">
  34. <th colspan="1" scope="col" class="headerRow">Id</th>
  35. <th colspan="1" scope="col" class="headerRow"> Name</th>
  36. <th colspan="1" scope="col" class="headerRow"> Phone</th>
  37. <th colspan="1" scope="col" class="headerRow">Type</th>
  38. <th colspan="1" scope="col" class="headerRow"> Number of Employees</th>
  39. </tr>
  40. </thead>
  41. <!-- table body left empty for populating via row template using jquery -->
  42. <tbody />
  43. </table>
  44. </apex:pageBlockSection>
  45. </apex:pageBlock>
  46.  
  47. <!-- Create a named jquery template -->
  48. <script id="resultTableRowTemplate" type="text/x-jquery-tmpl">
  49. <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">
  50. <td class="dataCell">${Id}</td>
  51. <td class="dataCell">${Name}</td>
  52. <!-- Please Note: We created a input text field here for Phone -->
  53. <td class="dataCell"><input type="text" value="${Phone}" /></td>
  54. <td class="dataCell">${Type}</td>
  55. <td class="dataCell">${NumberOfEmployees}</td>
  56. </tr>
  57. </script>
  58.  
  59.  
  60. <script type="text/javascript">
  61. // if you are inside some component
  62. // use jquery nonConflict
  63. // var t$ = jQuery.noConflict();
  64.  
  65. function searchAccounts() {
  66. var accountName = $('#accountNameToSearch').val();
  67. // clear previous results, if any
  68. $("#searchResults tbody").html('');
  69.  
  70. // The Spring-11 gift from force.com. Javascript remoting fires here
  71. // Please note "abhinav" if my org wide namespace prefix
  72. // testremotingcontroller is the Apex controller
  73. // searchAccounts is Apex Controller method demarcated with @RemoteAction annotation.
  74. abhinav.testremotingcontroller.searchAccounts( accountName, function(result, event){
  75. if (event.status && event.result) {
  76. $.each(event.result, function () {
  77. // for each result, apply it to template and append generated markup to the results table body.
  78. var row = $("#resultTableRowTemplate" ).tmpl(this);
  79. // locate the Phone field and bind this account and blur handler to it
  80. var phoneInputField = row.find('td input');
  81. // bind the current records i.e. Account object with this cell
  82. // so that it can be located later on in blur event.
  83. phoneInputField.data('account', this);
  84.  
  85. // Watch for blur events on the phone field
  86. phoneInputField.blur(
  87. function () {
  88. // fetch the binded Accout object from the phone input field
  89. var orginalAcc = $(this).data('account');
  90. // fire a Javascript Remoting update call only if, user changed the phone
  91. if (orginalAcc.Phone != $(this).val())
  92. updateAccount(orginalAcc, $(this).val());
  93. }
  94. );
  95. // append the tempalte row markup to table above
  96. row.appendTo( "#searchResults tbody" );
  97. }
  98. );
  99. } else {
  100. alert(event.message);
  101. }
  102. }, {escape:true});
  103. }
  104.  
  105. function updateAccount(acc, newPhoneVal) {
  106. // Javascript Remoting to update Accout record
  107. abhinav.testremotingcontroller.updateAccount( acc.Id, newPhoneVal, function(result, event){
  108. if (event.status && event.result) {
  109. // alert user on update for now, to go for fancy one can do animations or
  110. // even stay silent ;)
  111. alert('Account - ' + acc.Name + ' updated !');
  112. } else {
  113. alert(event.message);
  114. }
  115. }, {escape:true});
  116. }
  117. </script>
  118.  
  119. </apex:page>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.