function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
mattdarnoldmattdarnold 

Issue setting a hidden input field with Javascript

Hi,

I am trying to implement some basic inline editing functionality on a Visualforce page with some custom Javascript code. I have the table setup so that when a user clicks a specific row the row elements turn into text input areas. What I've tried to do is when the user clicks the update button, the Javascript code sets two inputHidden elements to the newly edited text and then posts the apex:form element containing these two inputHidden elements. I have run into two issues here:

1. The page isn't recognizing my {!$Component.elementID} elements for the two inputHidden fields, but it is for the form element; I've got around this by adding in the full ID manually. Not sure why it works for some elements and not the others
2. When the form gets submitted (which it seems like it does successfully submit), my setDescription method runs, but doesn't update the description for the corresponding Account. I've put in some System.debug code in the setDescription method and it does show the new value I had entered in the form. The Apex log does turn up this error: "thePage:form:aDescription: An error occurred when processing your submitted information." However, it also states the select and update statements ran sucessfully.

Any help here is appreciated. And, if there is a better way to do this I'd be interested. Here is my page:

Code:
<apex:page controller="revAController" id="thePage">

 <head>
 
  <style>
  #hor-minimalist-b
  {
   font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
   font-size: 12px;
   background: #fff;
   width: 50%;
   border-collapse: collapse;
   text-align: left;
  }
  #hor-minimalist-b th
  {
   font-size: 14px;
   font-weight: normal;
   color: #666666;
   padding: 10px 8px;
   border-bottom: 2px solid #666666;
  }
  #hor-minimalist-b td
  {
   border-bottom: 1px solid #ccc;
   color: #666666;
   padding: 6px 8px;
  }
  #hor-minimalist-b tbody tr:hover td
  {
   color: #666666;
   background: #FAF8CC;
  }
  </style>
  
  <script type="text/javascript">
  
   var data = new Array();
   
   function Item(row){
    this.Row = row;
    this.Name = row.cells[0].innerHTML;
    this.Dsc = row.cells[1].innerHTML;
    this.Owner = row.cells[2].innerHTML;
    
    var _this = this;
    var mode = "view";
    
    row.onclick = function() {
     if (mode != "edit") {
      _this.Edit();
     }
     mode = "edit"
     return false;
    }

    this.Edit = function() {
     this.NameField = document.createElement("input");
     this.NameField.type = "text";
     this.NameField.value = this.Name;
     
     this.Row.cells[0].innerHTML =  "";
     this.Row.cells[0].appendChild(this.NameField);
     
     this.DscField = document.createElement("input");
     this.DscField.type = "text";
     this.DscField.value = this.Dsc;
     
     this.Row.cells[1].innerHTML =  "";
     this.Row.cells[1].appendChild(this.DscField);
     
     this.UpdateLink = document.createElement("a");
     this.UpdateLink.innerHTML = "update";
     this.UpdateLink.href = "#";
     this.UpdateLink.onclick = function() {
      _this.Update();
     }
     this.Row.cells[2].appendChild(this.UpdateLink);
     
    }
    
    this.Update = function() {
     var form = document.getElementById("{!$Component.form}");
     document.getElementById("thePage:form:aName").value = this.Name;
     document.getElementById("thePage:form:aDescription").value = this.DscField.value;
     
     //aName.value = this.Name;
     //aDescription.value = this.DscField.value;
     
     form.submit(); 
    }
   
   }
   
   window.onload = function() {
    var table = document.getElementById("hor-minimalist-b");
    
    for(var i=1; i<table.rows.length; i++){
     data.push(new Item(table.rows[i]));
    } 
   }
  
  </script>
 
 </head>

 <table id="hor-minimalist-b">
  <thead>
      <tr>
          <th scope="col">Account Name</th>
          <th scope="col">Account Description</th>
             <th scope="col">Owner</th>
         </tr>
     </thead>
  <tfoot>
  </tfoot>
     <tbody>
  <apex:repeat value="{!accounts}" var="account" id="theTable">
   <tr>
    <td>
     <apex:outputText value="{!account.name}"/>
    </td>
    <td>
     <apex:outputText value="{!account.description}"/>
    </td>    
    <td>
     <apex:outputText value="{!account.owner}"/>
    </td>
   </tr>
  </apex:repeat>
  </tbody>
 </table>
 
 <apex:form id="form">
  <apex:inputHidden id="aName" value="{!Name}"  />
  <apex:inputHidden id="aDescription" value="{!Description}"  />
 </apex:form>
</apex:page>

 And, here is my controller:

Code:
public class revAController {
 
 List<Account> accounts;
 
 public List<Account> getAccounts() {
  accounts = [select name, description, owner.name from account limit 10];
  return accounts;
 }
 
 Account acct = new Account();
 
 public String getName() { return acct.name; }
 public void setName(String aName) {
  acct.name = aName; 
 }
 
 public String getDescription() { return acct.Description; }
 public void setDescription(String aDescription) {
  System.debug('setDescription working'); 
  System.debug(acct.Name);
  System.debug(aDescription);
  Account a = new Account();
  a = [select id, name, description from account where name = : acct.Name limit 1];
  a.description = aDescription;
  update a;
 }
 

}

Thanks.

-- Matt