Apex Code Development You need to sign in to do that
Don't have an account?
Rajat Mahajan Edit record one by one in a pageblock table (not making use of repeat tag)
Hi All,
I have been trying to develop the following functionality in a pageblocktable (not using the repeat tag)
What i need is :
1. Whenever i click on a particular record, that record should get converted to all input fields leaving the rest of the records in a non editable mode.
2. I can change all values for that particular record and click the save button next to it that will rerender the page with new values.
However, i have failed to do so,
could you please help out ?
Following is my code :
page ===========================================================================
<apex:page controller="EditAccount">
<script type="text/javascript">
function HideShow(rId,Id,mode)
{
var rowId = rId;
var accountId = Id;
var editrowId = 'edit:'+ Id;
if(mode == 'n')
{
document.getElementById(rowId).style.display = 'none';
document.getElementById(editrowId).style.display = 'block';
}
else if(mode == 'e')
{
var rrowId = 'detail:'+ Id;
document.getElementById(rrowId).style.display = 'block';
document.getElementById(rowId).style.display = 'none';
}
}
</script>
<apex:form >
<apex:outputPanel id="opnl">
<apex:pageBlock >
<div style="width:100%">
<apex:pageblockTable value="{!account}" var="a" id="table1" columns="2" style="width:150%">
<div id="detail:{!a.id}" style="width:61%;display:block;" ondblclick="HideShow(this.id,'{!a.id}','n');">
<apex:column headervalue=" First Name" colspan="1" rowspan="1" width="100" >
<apex:outputField id="firstname" value="{!a.name}" />
</apex:column>
<apex:column headervalue=" Last Name" colspan="1" rowspan="1" width="100">
<apex:outputField id="lastname" value="{!a.phone}" />
</apex:column>
</div>
</apex:pageblockTable>
<apex:pageblockTable value="{!account}" var="a" id="table2" columns="4" style="width:150%">
<div id="edit:{!a.id}" style="width:35%;display:none;" >
<apex:column headervalue=" First Name" colspan="1" rowspan="1" width="100" >
<apex:inputfield id="firstname" value="{!a.name}" />
</apex:column>
<apex:column headervalue=" Last Name" colspan="1" rowspan="1" width="100">
<apex:inputfield id="lastname" value="{!a.phone}" />
</apex:column>
<apex:column >
<apex:commandButton id="savebutton" value="Save" onclick="HideShow('edit','{!a.id}','e');savedata('{!a.id}');"/>
<apex:commandButton onclick="HideShow('edit','{!a.id}','e');" id="cancelButton" value="Cancel"/>
</apex:column>
</div>
</apex:pageblockTable>
</div>
</apex:pageBlock>
</apex:outputPanel>
<input id="xyz" type="hidden" onclick="ppppp();" />
<apex:actionFunction id="saveaccount" name="savedata" action="{!doSave}" reRender="opnl" />
<apex:param name="accountsave" assignTo="{!propviewdata}" value=""/>
</apex:form>
</apex:page>
======================================================================================
class =================================================================================
public class EditAccount
{
public List<Account> acc;
public void doSave()
{
for(account ac : acc)
{
update ac;
}
}
public List<Account> getAccount()
{
return (List<Account>) acc;
}//End getAccount
public void setAccount(List<Account> Acc)
{
this.acc = Acc;
}
public EditAccount()
{
acc = [select id,Name, Phone,BillingCity,CreatedDate from Account limit 1000];
}//End Constructor
}
Warm Regards
Rajat
Hi,
Try the below code sample as reference:
<apex:page controller="EditAccount">
<script>
function hide(id,name)
{
var s=id;
var p=id+'_'+name;
document.getElementById(s).style.display="none";
document.getElementById(p).style.display="block";
return false;
}
function cancel(id,name)
{
var s=id;
var p=id+'_'+name;
document.getElementById(s).style.display="block";
document.getElementById(p).style.display="none";
return false;
}
function update(id,name)
{
var p=id+'_'+name;
var hre = document.getElementsByTagName(p);
var fname1= document.getElementById(id+'_f').value;
var lname1= document.getElementById(id+'_l').value;
var e1= document.getElementById(id+'_e').value;
var mobile= document.getElementById(id+'_m').value;
var dateofbirth= document.getElementById(id+'_b').value;
var datetime= document.getElementById(id+'_dt').value;
var dob1;
var db11;
alert(fname1+lname1+e1+mobile+dateofbirth+datetime);
if(fname1.length ==0)
{
alert('Please enter the First Name');
fname1.focus();
return false;
}
if(lname1.length ==0)
{
alert('Please enter the Last Name');
fname1.focus();
return false;
}
if(e1.length ==0)
{
alert('Please enter the Email');
fname1.focus();
return false;
}
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(!e1.match(emailExp))
{
alert('Please enter a valid Email id');
//e1.focus();
return false;
}
var exp=/^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
/* if(!exp.test(mobile))
{
alert(" Mobile Number can't be empty and must be of 10 to 14 digits");
//mobile.focus();
return false;
}
if(dateofbirth.length==0)
{
alert(" Please enter the date of birth \ndd/mm/yy format");
return false;
}
else
{
db11=0;
var pp=/^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/;
if(!pp .test(dateofbirth))
{
alert('please Enter the date in proper format \ndd/mm/yy format');
return false;
}
else
{
dob1=checkdate(dateofbirth);
if(dob1==1)
{
return false;
}
}
}
if(datetime.length==0)
{
alert('Please enter the date and time');
//return false;
}
else
{
var format=/^\d{1,2}\/\d{1,2}\/\d{4}\s\d{1,2}\:\d{1,2}\?([aApP][mM]?)?$/;
if(!format.test(datetime))
{
alert('please enter the Date and Time in proper format\ndd/mm/yy format');
// return false;
}
else
{
//return false;
}
}
*/
// alert(dob1);
calling(id,fname1,lname1,e1,mobile,dob1);
}
function checkdate(date1)
{
var arrDt = date1.split('/');
var i=0;
if(arrDt[0]<1 || arrDt[0]>=31)
{
alert('please enter the valid date');
i=1;
}
if(arrDt[1]<1 || arrDt[1]>12)
{
alert('please enter the valid month');
i=1;
}
if(arrDt[2]<1600 || arrDt[2]>4000)
{
alert('please enter the valid year');
i=1;
}
if(arrDt[1].length==1)
{
arrDt[1]='0'+arrDt[1];
}
if(arrDt[0].length==1)
{
arrDt[0]='0'+arrDt[0];
}
if(i==1)
{
return 1;
}
else
{
return (arrDt[2]+'-'+arrDt[1]+'-'+arrDt[0]);
}
}
</script>
<apex:form id="f" >
<apex:outputPanel id="op" >
<apex:pageBlock id="out" >
<div style="border: 1px solid rgb(100, 200, 200); width: 900px;" >
<table border="0" BGCOLOR="#CEF6F5" >
<tr>
<Th Style=" width:45px; text-Align:left; bgcolor:rgb(0, 255, 255)" >Action</th>
<th> </th>
<th Style=" width:80px; text-Align:left;" > <apex:commandLink action="{!sorting}" reRender="out" >Name</apex:commandLink></th>
<th> </th>
<th Style=" width:80px; text-Align:Left;" ></th>
<th> </th>
<th Style=" width:145px; text-Align:left;" ></th>
<th> </th>
<th Style=" width:95px; text-Align:Left;" >Mobile Number</th>
<th> </th>
<th Style=" width:180px; text-Align:Left;" >Date of Birth</th>
<th> </th>
<th Style=" width:180px; text-Align:Left;" ></th>
</tr>
</table>
</div>
<apex:repeat value="{!ct}" var="rd" >
<div id="{!rd.id}" style="border: 1px solid rgb(100, 200, 200); width: 900px;" >
<table border="0">
<tr>
<td Style=" width:45px; text-Align:left; ">
<apex:commandLink onclick=" return hide('{!rd.id}','{!rd.name}')" style="text-Align:left;" >Edit</apex:commandLink>|<apex:commandLink action="{!del}" reRender="op" ><apex:param name="id" value="{!rd.id}"/>Del</apex:commandLink>
</td>
<td> </td>
<TD Style="width:80px; text-Align:left;" >{!rd.name}</td>
<td> </td>
<td Style=" width:80px; text-Align:left;" ></td>
<td> </td>
<td Style=" width:150px; text-Align:left;" ></td>
<td> </td>
<td Style=" width:95px; text-Align:left;" >{!rd.Phone}</td>
<td> </td>
<td Style="width:170px; text-Align:left;" ></td>
<td> </td>
<td Style=" width:180px; text-Align:left;" ></td>
</tr>
</table>
</div>
<div id="{!rd.id}_{!rd.name}" name="{!rd.id}_{!rd.name}" style = "display:none; border: 1px solid rgb(100, 200, 200); width: 900px;" >
<table border="0">
<tr>
<td Style=" width:45px; text-Align:left;">
<apex:commandLink action="{!del}" reRender="out" onclick=" return update('{!rd.id}','{!rd.name}')" ><apex:param name="id" value="{!rd.id}"/> Update</apex:commandLink>
<br/><apex:commandLink onclick=" return cancel('{!rd.id}','{!rd.name}')" >Cancel</apex:commandLink>
</td>
<td> </td>
<TD Style=" width:80px; text-Align:left;"><INPUT type="text" NAME="ftext" size="9" value="{!rd.name}" id="{!rd.id}_f" /></td>
<td> </td>
<td Style=" width:80px; text-Align:left;"></td>
<td> </td>
<td Style=" width:140px; text-Align:left;"></td>
<td> </td>
<td Style=" width:95px; text-Align:left;"></td>
<td> </td>
<td Style=" width:170px; text-Align:left;"></td>
<td> </td>
<td Style=" width:180px; text-Align:left;"></td>
</tr>
</table>
</div>
</apex:repeat>
<apex:actionFunction name="calling" action="{!edit}" reRender="op" >
<apex:param name="id11" value="" assignTo="{!id1}"/>
<apex:param name="first" value="" assignTo="{!name}"/>
<apex:param name="emailid" value="" assignTo="{!email}"/>
<apex:param name="mobilenumber1" value="" assignTo="{!mobile}"/>
<apex:actionFunction id="aaa" name="pp"><apex:param name="id2" value="{rd.id}"/></apex:actionFunction>
</apex:actionFunction>
</apex:pageBlock>
</apex:outputPanel>
</apex:form>
</apex:page>
================= Apex Controller==========================
public class EditAccount{
public string id1{set;get;}
public string fname{set;get;}
public string lname{set;get;}
public string email{set;get;}
public string mobile{set;get;}
public integer flag{get;set;}
public list<Account> ct{get;set;}
public EditAccount()
{
flag=0;
display();
}
public void display()
{
ct=[SELECT name,Phone from account];
// sorting();
}
public void del()
{
string id1=ApexPages.currentPage().getParameters().get('id');
contact ct1=new contact(id=id1);
delete ct1;
display();
}
public void edit()
{
contact ct1=new contact(id=id1);
ct1.firstname=fname;
ct1.lastname=lname;
ct1.email=email;
// ct1.MobilePhone=mobile;
// ct1.Birthdate=date.valueof(birthdate1);
update ct1;
display();
}
public void sorting()
{
list<string> s=new list<string>();
list<account> ct1=new list<account>();
map<string,account> msort=new map<string,account>();
system.debug('ct value'+ct);
if(ct.size()>0)
{
for(account ca : ct)
{
s.add(ca.name);
msort.put( ca.name,ca);
}
s.sort();
if(flag==0)
{
flag=1;
for(string p1:s)
{
ct1.add(msort.get(p1));
}
}
else
{
flag=0;
for(integer i=s.size()-1;i>0;i--)
{
string p=s.get(i);
ct1.add(msort.get(p));
}
}
system.debug('ccccccccccc'+ct1);
ct=new list<account>(ct1);
// display();
}
}
}
Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.
Hi,
As requested, i was looking for a code which does not make use of the repeat tag and also does not contain list in a table,
Could you please see the code i had given before and help me with changes in that ?
Thanks
Rajat