Delete Row with confirm dialogbox

Question

In JavaScript function all the alert showing and id is getting but for controller method is show's " DML statement found null SObject at position 0" Exception.

Controller

       public class ContactListViewController{

    Public List<Contact> conList{get;set;}
    Public String text{get;set;}
    public String delRecordId{get;set;}

    public ContactListViewController(){
        conList = new List<Contact>();
        conList = [SELECT id,FirstName,LastName,Email,Phone From Contact];    
    }

    public pageReference ShowRecord(){   

        String QueryString= 'SELECT id,FirstName,LastName,Email,Phone From Contact Where FirstName Like \''+text+'%\''; 
        conList = Database.query(QueryString);
        return null;
    }

    public void DelRecord(){
        System.debug('-->del'+delRecordId);
        Database.delete(delRecordId);

    }
}

VisualForce Page

          <apex:page controller="ContactListViewController">
            <apex:form >

      <apex:actionstatus id="counterStatus">
        <apex:facet name="start">
            <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb; height:100%;opacity:0.65;width:100%;">
                <div class="waitingHolder" style="top: 100px; width: 91px;">
                <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                <span class="waitingDescription">Loading...</span>
                </div>
            </div>
        </apex:facet>
    </apex:actionstatus>

    <script>
        function deleteRow(recordId) {
            alert('hello'+recordId);
                var r = confirm("Are you Sure?");
                alert(r);
                if (r) {
                    alert('hi');
                    DelRecordAction(recordId);
                }
      }    
    </script>

     <apex:actionFunction name="DelRecordAction" action="{!DelRecord}" status="counterStatus">
                <apex:param assignTo="{!delRecordId}" name="prm" value="" />
            </apex:actionFunction>
      <apex:pageBlock id="pb">              
              <apex:pageblockTable value="{!conList}" var="con">
                  <apex:column headerValue="Action">
                      <apex:outputLink value="/{!con.id}/e" target="_blank"> 
                          Edit
                      </apex:outputLink> |
                      <a href="" onclick="deleteRow('{!con.id}')">Del</a>
                  </apex:column>
                  <apex:column headerValue="First Name" value="{!con.FirstName}"/>
                  <apex:column headerValue="Last Name" value="{!con.LastName}"/>
                  <apex:column headerValue="Email" value="{!con.Email}"/>
                  <apex:column headerValue="Phone" value="{!con.Phone}"/>              
              </apex:pageblockTable>
      </apex:pageBlock>
  </apex:form>
</apex:page>

Answer 1

You have forgot to add reRender="pb" in action function.

 <apex:actionFunction name="DelRecordAction" action="{!DelRecord}" status="counterStatus" reRender="pb">
            <apex:param assignTo="{!delRecordId}" name="prm" value="" />
 </apex:actionFunction>

Answer 2

Here is the answer for your question

You should be using an html tag to call an java-script. You tried using both command-link and action function together that made your page to render twice.

controller :

public class cntr191934 {
    public String delRecordId{get;set;}    
    public list<contact> conList{ get { return [select FirstName,LastName,Email,Phone from contact ] ;  }}
    public void DelRecord(){
        System.debug('-->del'+delRecordId);
        Database.delete(delRecordId);
    }
}

Visualforce :

<apex:page controller="cntr191934" >
<apex:form >
    <apex:actionFunction name="DelRecordAction" action="{!DelRecord}" reRender="section">
        <apex:param assignTo="{!delRecordId}" name="prm" value="" />
    </apex:actionFunction>

    <script>
    function deleteRow(recordId) {            
        var r = confirm("Are you Sure?");
        if (r) {
            alert('Record Id to delete '+recordId);
            DelRecordAction(recordId);
        }
    }    
    </script>

    <apex:pageBlock id="section">
        <apex:pageblockTable value="{!conList}" var="con">
            <apex:column headerValue="Action">
                <a onclick="deleteRow('{!con.id}')">Del</a>
            </apex:column>
            <apex:column headerValue="First Name" value="{!con.FirstName}"/>
            <apex:column headerValue="Last Name" value="{!con.LastName}"/>
            <apex:column headerValue="Email" value="{!con.Email}"/>
            <apex:column headerValue="Phone" value="{!con.Phone}"/>              
        </apex:pageblockTable>
    </apex:pageBlock>        
</apex:form>    

Answer 3

First when you pass parameter in controller you must need to use rerender attribute.

<apex:actionFunction name="DelRecordAction" action="{!DelRecord}" rerender="form">
      <apex:param assignTo="{!delRecordId}" name="prm" value="" />
</apex:actionFunction>

<apex:pageblockTable value="{!conList}" var="con">
      <apex:column headerValue="Action">
          <apex:commandLink value="Del" onclick="deleteRow('{!con.id}');" rerender="none"/>

The second thing is you are just passing Id where Delete support sObject so you need to change that

Database.delete(new sObject(Id = delRecordId)); //changesObject with your object name