Visualforce page is not refreshing after deleting a row from table

Question

SCRIPT:
function dodelete(id,deleted) {
    /*alert("UserId");*/
    $("input[id$='hdUserId']").val(id);
    $("input[id$='hdnDeleted']").val(deleted);
    //alert(id);
    //alert(deleted);
    setParams(id,deleted);
    //setInterval(50000);
    alert('Record deleted successfully!');
}
PAGE:
</tr>
<apex:repeat value="{!staffInfo.StaffAccepted}" var="u" id="staffaccepted" rendered="{!staffInfo.StaffAccepted.size <> 0 && staffInfo.StaffAccepted.size <> null}">
   <tr>
      <td>{!u.FullName}</td>
      <td>{!u.Email}</td>
      <td>{!$Label[u.Role]}</td>
      <td>{!$Label[u.RegType]}</td>
      <td>
         <a href="#" class="Reset" onclick="doResetPassword('{!u.contact}');return false;">{!$Label.PG_ApprovalProcess_Reset}</a>/
         <apex:outputPanel rendered="{!IF(u.valide, true, false)}">
            <apex:form style="margin:0px;">
               <apex:commandLink onclick="dodelete('{!u.contact}',true);" >  Delete</apex:commandLink>
               <!--<apex:actionSupport event="onclick" action="{!dodelete}" rerender="tabref"/>-->                                                                            
            </apex:form>
         </apex:outputPanel>
      </td>
   </tr>
</apex:repeat>
<apex:form >
   <apex:actionFunction action="{!dodelete}" name="setParams" rerender="dummy">
      <apex:param name="param1" assignTo="{!UsId}" value="" />
      <apex:param name="param2" assignTo="{!userDeleted}" value="" />
   </apex:actionFunction>
</apex:form>

Controller:

public void dodelete()
{
System.debug('PG_ApprovalController.doAction() called: Id: ' + UsId + ' and approved: ' + userDeleted);
/*Contact contact = [select Id, PG_ContactApprovalState__c from Contact where Id = :this.UsId];
PG_ContactApprovalStatus__c cas = [select Id, PG_ApprovalStatus__c from PG_ContactApprovalStatus__c where Id = :contact.PG_ContactApprovalState__c];
system.debug('PG_ContactApprovalStatus__c found, Id : ' + cas.Id + ', status : ' + cas.PG_ApprovalStatus__c);
if(userDeleted) 
{
    cas.PG_ApprovalStatus__c = PG_Enums.APPROVAL_STATUS_TYPE.Deleted.name();
    update cas;
    system.debug('Deleted');
} */
Contact contact = [select Id, PG_ContactApprovalState__c from Contact where Id =:this.UsId];
PG_ContactApprovalStatus__c cas = [select Id, PG_ApprovalStatus__c from PG_ContactApprovalStatus__c where Id = :contact.PG_ContactApprovalState__c];
system.debug('PG_ContactApprovalStatus__c found, Id : ' + cas.Id + ', status : ' + cas.PG_ApprovalStatus__c);
if(userDeleted) 
{
    cas.PG_ApprovalStatus__c = PG_Enums.APPROVAL_STATUS_TYPE.Deleted.name();
    update cas;            
    system.debug('Deleted');
    PageReference nextPage = new PageReference('/apex/PG_PharmacyOverview');
    nextPage.setRedirect(true);
}
    //update cas;
    system.debug('Entered ###########>>>>>>>>>>:'+p);
}

I want to refresh the page after deleting the user from table, Note:- If i delete the LINE "alert('Record deleted successfully!');" from script page refresh is not working, even the delete function also not working.

Answer 1

You need to refresh the table when the action function is processed, you can do that with rerender attribute.

add rerender attribute to the action function, which the id of the component to be refreshed:

<apex:actionFunction action="{!dodelete}" name="setParams" rerender="contactTablePanel">
    <apex:param name="param1" assignTo="{!UsId}" value="" />
    <apex:param name="param2" assignTo="{!userDeleted}" value="" />
</apex:actionFunction>

encapsulate the table inside panel and assign a Id or add id to any desired component to be refreshed from apex:actionfunction-

<apex:outputPanel id="contactTablePanel">
    <table>
        ....
    </table>
</outputPanel>