ReRendering tables in Visualforce

Question

I have two account tables (well, one input table, and one list table). I am trying to add/edit accounts, with the following behaviour:

1. Clicking "Add Account" both the Account input area, and the Account List are re-rendered (not the page).
2. Clicking "Save" only saves the changes to the Accounts List (not the Account entry).
3. I need to be able to remove the entries on the table by selecting the Remove link

Currently there is no re-rendering, and i'm not sure how to remove the account entries...

Any help would be appreciated!

Thanks, Mike

UPDATE...

1. This has been rectified, although I can only enter one account, selecting the add button after this does not add another account.

2. Issue solved, form fields were in the wrong place.

3. Works great, thanks @ratan...

Have updated code

The VF:

<apex:page docType="html-5.0" controller="addAccountModalController">

<c:overlay />

<apex:form id="inputForm">
<table>
    <tr>
        <td><apex:inputField id="accountName" styleClass="form-control" value="{!addAccount.name}" required="true" html-placeholder="Account Name"/></td>
        <td><apex:inputField id="primaryEmail" type="email" styleClass="form-control" value="{!addAccount.Primary_Email__c}" html-placeholder="Email Address"/></td>
    </tr>
</table>

<apex:commandButton reRender="accountsList,inputForm" onclick="addAccount();" status="overlayStatus" value="Add Account" title="Add Account"/>
<apex:actionFunction name="addAccount" action="{!addAccount}" reRender="accountsList"/>
</apex:form>

<apex:form >
<apex:outputPanel id="accountsList">
<table id="accountsTable">
    <thead>
        <tr>
            <td>Name</td>
            <td>Primary Email</td>
            <td>Action</td>
        </tr>
    </thead>
    <apex:repeat value="{!allAccounts}" var="acc">
        <tr>
            <td><apex:inputField value="{!acc.name}" styleClass="form-control"/></td>
            <td><apex:inputField value="{!acc.Primary_Email__c}" styleClass="form-control"/></td>
            <td>
                <apex:commandlink action="{!delAccount}" value="Remove" rerender="accountsList" status="overlayStatus" > 
                    <apex:param name="accId" value="{!acc.Id}" assignTo="{!selectedAccId}" />
                </apex:commandlink>
            </td>
        </tr>
    </apex:repeat>
</table>
</apex:outputPanel>

<apex:commandButton action="{!save}" rerender="accountsList" status="overlay" value="Save"/>
</apex:form>

</apex:page>

The Class:

public class addAccountModalController {

public Account addAccount {get;set;}
public Id selectedAccId {get;set;}
public List <Account> allAccounts {get;set;}

    Public addAccountModalController(){

        addAccount = new account(
        //recordType.id = '01290000001GbSj', 
        //recordType.Name = 'Entity'
        );
        allAccounts = [SELECT id,Name,Primary_Email__c,recordType.id,recordType.Name,createdDate FROM Account ORDER by createdDate DESC LIMIT 5];
    }

public PageReference addAccount() {
    try {
        insert(addAccount);
        allAccounts = [SELECT id,Name,Primary_Email__c,recordType.id,recordType.Name,createdDate FROM Account ORDER by createdDate DESC LIMIT 5];
    } catch(System.Exception e) {
        ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error creating Account.'));
    }
    return null;
}

public PageReference save() {
    try {
        update allAccounts;
        allAccounts = [SELECT id,Name,Primary_Email__c,recordType.id,recordType.Name,createdDate FROM Account ORDER by createdDate DESC LIMIT 5];
    } catch(System.Exception e) {
        ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error creating record.'));
    }
    return null;
}

public pageReference delAccount() {
    try {
        delete new Account(Id = selectedAccId);
        allAccounts = [SELECT id,Name,Primary_Email__c,recordType.id,recordType.Name,createdDate FROM Account ORDER by createdDate DESC LIMIT 5];
    } catch(System.Exception e) {
        ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error creating record.'));
    }
    return null;
}


}

Answer 1

I suggest create a apex:commandlink with apex:param for remove link

now when on click of this link call a controller method and using param pass current row's accountId to any controller variable.

now in called method(using remove link) and using id delete that record

and again query and assign to list with new records

example

<apex:commandbutton action="{!delrecord}" value="Remove" rerender="accountsList"> 
    <apex:param name="accId" value="{!acc.Id}" assignTo="{!selectedAccId}" />
</apex:commandbutton>

in controller take id type variable i.e. selectedAccId

public Id selectedAccId {get;set;}

public void delrecord()
{
   delete new Account(Id = selectedAccId);
   allAccounts = [SELECT id,Name,Primary_Email__c,
                         recordType.id,recordType.Name,createdDate 
                   FROM Account ORDER by createdDate DESC LIMIT 5];
}