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.

8 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
  3. It's interesting that many of the bloggers to helped clarify a few things for me as well as giving.Most of ideas can be nice content.The people to give them a good shake to get your point and across the command

    rpa training in bangalore
    best rpa training in bangalore
    RPA training in bangalore
    rpa courses in bangalore

    ReplyDelete
  4. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.
    I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Java training in Chennai
    Java training in Bangalore
    Java online training
    Java training in Pune














    ReplyDelete
  5. Nice tips. Very innovative... Your post shows all your effort and great experience towards your work Your Information is Great if mastered very well.
    python Online training in chennai
    python Online training in bangalore
    python interview question and answers

    ReplyDelete
  6. Whoa! I’m enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this.

    AWS Training in Bangalore with Placements | AWS Training in Bangalore Cost
    AWS Training in Pune With Placement | AWS Devops Training in Pune
    AWS Online Training | AWS Online Training Cost
    AWS Training in Bangalore cost| Aws training in Bangalore Besant Technologies

    ReplyDelete
  7. Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.
    AWS training in chennai

    AWS Training in Bangalore

    ReplyDelete