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
Vishal DedaniyaVishal Dedaniya 

How to create Ajax enabled Visualforce pages?

Hi All,

I am creating a customize version of new lead page using Visualforce and I want to add Ajax which allows users to edit the field by directly double clicking on it. They do not need to click on "edit" button to re-load the entire page in edit mode..

Please suggest how I should start implementing Ajax with visualforce pages?

Any help in solving this problem would be highly appreciated.

Thank You,
Vishal

David VPDavid VP
Example using just one field (I kept it simple so the code hopefully speaks for itself) :

Code:
<apex:page standardController="Lead" extensions="LeadControllerExtension">
    
  <apex:form>
      <apex:outputpanel id="leadpanel">
          <apex:actionSupport action="{!toggleEditCompany}" event="ondblclick" rerender="leadpanel"></apex:actionSupport>
          <apex:outputField value="{!Lead.Company}" rendered="{!NOT(editCompany)}"/>
          <apex:inputField value="{!Lead.Company}" rendered="{!editCompany}"/>
      </apex:outputpanel>
  </apex:form>
  
</apex:page>

public class LeadControllerExtension {

 private final Lead lead;
 public Boolean editCompany {get;set;}
 
 public LeadControllerExtension(ApexPages.StandardController stdController) {
  this.lead = (Lead)stdController.getRecord(); 
  editCompany = false;
 }

 //method to toggle
 public void toggleEditCompany() {
  if(editCompany == false) {
   editCompany = true;
  }
  else {
   editCompany = false;
  }
 }
}

 

You might want to make this a bit more dynamic and 'reusable' for other fields but I guess you get the idea.

Hope this helps,


David
Colin LoretzColin Loretz
I'm trying to do something similar to this but in a table of values which allows a user to edit a row at a time.

Table:
|  Name   |    Description    |   Action    |
|---------|-------------------|-------------|
|   ABC   |    ABCDEF         |  edit|save  |
|   DEF   |    DEFGHI         |  edit|save  |


The edit/save buttons would change the outputFields in the Name and Description columns to inputText fields.

When using the method as described above, an entire column is made available for editing. How might I go about setting this up as a row?

Thanks,
Colin

Message Edited by Colin Loretz on 10-12-2008 04:32 PM

Message Edited by Colin Loretz on 10-12-2008 04:32 PM
Colin LoretzColin Loretz
After staring at this for much longer than it should have taken me, I have arrived at a solution:

I took a different approach and put javascript on the page:

Code:
function showRowEdit(id)
  {
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':name').style.display = 'block';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':desc').style.display = 'block';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':qty').style.display = 'block';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':cost').style.display = 'block';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':tName').style.display = 'none';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':tDesc').style.display = 'none';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':tQty').style.display = 'none';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':tCost').style.display = 'none';
  }
  
  function hideRowEdit(id)
  {
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':name').style.display = 'none';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':desc').style.display = 'none';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':qty').style.display = 'none';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':cost').style.display = 'none';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':tName').style.display = 'block';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':tDesc').style.display = 'block';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':tQty').style.display = 'block';
    document.getElementById('invoicer:mainForm:output:theTable:' + id + ':tCost').style.display = 'block';
  }

 
And then added the following to my PageBlockTable:

Code:
<apex:pageblocktable value="{!time}" var="t" id="theTable">
  <apex:column headervalue="Item Name" id="itemName">
   <apex:outputLabel id="tName" value="{!t.name}" ondblclick="showRowEdit('{!t.id}');" />
   <apex:outputPanel id="name" style="display: none;">
             <apex:inputText id="inputName" value="{!t.name}" ondblclick="hideRowEdit('{!t.id}');" />
   </apex:outputPanel>
  </apex:column>
  <apex:column headervalue="Description" id="itemDesc">
   <apex:outputLabel id="tDesc" value="{!t.description}" ondblclick="showRowEdit('{!t.id}');" />
   <apex:outputPanel id="desc" style="display: none;">
             <apex:inputText id="inputDesc" value="{!t.description}" ondblclick="hideRowEdit('{!t.id}');" />
   </apex:outputPanel>
  </apex:column>
  <apex:column headervalue="Qty" id="itemQty">
   <apex:outputLabel id="tQty" value="{!t.qty}" ondblclick="showRowEdit('{!t.id}');" />
   <apex:outputPanel id="qty" style="display: none;">
             <apex:inputText id="inputQty" value="{!t.qty}" ondblclick="hideRowEdit('{!t.id}');" />
   </apex:outputPanel>
  </apex:column>
  <apex:column headervalue="Unit Cost" id="itemCost">
   <apex:outputLabel id="tCost" value="{!t.unitCost}" ondblclick="showRowEdit('{!t.id}');" />
   <apex:outputPanel id="cost" style="display: none;">
             <apex:inputText id="inputCost" value="{!t.unitCost}" ondblclick="hideRowEdit('{!t.id}');" />
   </apex:outputPanel>
  </apex:column>
  <apex:column headervalue="Price" id="itemPrice">
   {!t.price}
  </apex:column>
  <apex:column headervalue="Modify" colspan="5" id="modifyItem"><B>
   <apex:commandLink action="{!removeLine}" value="remove" rerender="output">
    <apex:param name="removeSelected" value="{!t.id}" />
   </apex:commandLink></B>
  </apex:column>
 </apex:pageblocktable>

 
Now all that is left is to allow the user to save the entire row (record).
Paul.FoxPaul.Fox
Colin,

Did you ever figure out how to let users save the information after you go to edit mode?
I'm trying to do something very similar and all of the tutorials are based on one object per page, which doesn't help.

Thanks,
Paul