Thursday, 15 August 2013

How to populate textbox in a pageblock table based on a checkbox and input text box using java script

Sometimes it might be hurting if you have a page block and records have a check box, and you want to update all/some the records particular field value based on one input text box. All move into <apex: actionFunction>, but there is a good option with JavaScript.
The advantages of using JavaScript here is
  1.  No delay in populating the field values, it’s getting populated instantly.
  2.  You don’t need your browser to send request to server, resources are saved. 
  3.  The old values for each field can be recovered instantly  if someone wrongly fill the field value before saving the record
The visual force page code is given below.

 

 
        
        

        Name

        
        

apex:column >

The controller for the above class is :
public with sharing class AccountList 
{
 public string infrmpage{get;set;}
 Map mapAccount = new Map();
 List listAccount = new List();
 
 public class accounts
 {
  public boolean selected{get;set;}
  public String name{get;set;}
  public String type{get;set;}
  public String test{get;set;}
  public Id accid{get;set;}
 }
 public List accList = new List();
 public string text{get;set;}
 
 public AccountList() 
 {
 }
 public String test{get;set;}
 
 public AccountList(ApexPages.StandardController controller) 
 {
 }
 
 public List getAccounts()
 {
  accList.clear();
  for(Account a: [select id,name,type, test__c from account where Name!=null limit 10])
  {
   Accounts acc = new Accounts();
   acc.name = a.name;
   acc.type = a.type;
   acc.test = a.test__c;
   acc.accid = a.id;
   accList.add(acc);
   mapAccount.put(a.id,a);
  }

  return accList;
 }
 
 public void saveAll()
 {
  listAccount.clear();
  
  for(Accounts ac :accList)
  {
   if(ac.selected)
   {
    Account a = mapAccount.get(ac.accid);
    a.test__c = infrmpage;
    listAccount.add(a);
   }
  }
  update listAccount;
 }
}


Explanation:

1.Java Script

The method1 javascript function gets called whenever there is a change happen on the input text box. The parameter passed into the method1 function is the input text box element id from the page. So I will get the element value in script using id.

I used apex input text box for showing the text box in pageblock table. And then I fetched all the input text elements from the page using java script function-document.getElementsByTagName("input");
So inside the list of input elements I have all my check boxes and input text boxes and I need to filter them. To filter the elements I have placed id for each text boxes and check boxes. Based on the id of the element I have filtered the elements and I copied text box elements into an array textbox in java script.
Next, I want to link the checkboxes and text boxes since I have to populate the text box based on the check box.  So here in the second if condition inside the for loop I am filtering the input check boxes. Then I am checking whether it’s checked or not. If yes then I am adding index of the text box element  to an array[updateElmnts] where I need to update the value.  From my analysis the index for corresponding text boxes = index of checkbox+1.

So the updateElmnts array contains the index of the page block input text boxes which needs to be updated with value from the input text box.

Finally the second for loop update the page block input text box value with text entered in the input text box.
 
The text box elements got input text box values in UI.

The second java script function dataCheck() is used to populate the input text box data into a record once the user moved out from the input text box and clicked on the input check box later. Also it does the recover function if the user uncheck the check box.

The three parameters for the dataCheck() functions are
  •   elem – Input check box element id
  •   input – input text box element id
  •   updateele – the text box id which needs to be updated.


2. Apex Class

To update the same values in the controller I have used the following.

  1. To get the text box values from page I get-set a string variable (infrmpage).
  2. I used the wrapper class to populate the elements to the page block table, and in the save method I am checking if the corresponding element is checked in the page. If yes then I will populate the element field value from the input text box value from the page. And finally I will do an update on the element to save update to the data base.

3 comments:

  1. Great.. Tutorial is just awesome..It is really helpful for a newbie like me...

    JavaScript Online Training JavaScript Online Training JQuery Online Training JQuery Online Training
    JavaScript Course | HTML5 Online Training

    ReplyDelete
  2. BackBoneJS Training in Chennai BackBoneJS Training in Chennai EmberJS Training in Chennai EmberJS Training in Chennai
    ReactJS Training in CHennai ReactJS Training KnockoutJS Training in Chennai KnockoutJS Training in Chennai D3 Training in CHennai D3 Training

    ReplyDelete