ActionFunction not rendering to create a Javascript Function

Question

Create a dynamic search custom using the ActionFunction for rendering the JS function to post the values to controller. The search is not working.

Here is my code:

Controller:

public class Applicantcontroller {
   private String soql {get;set;}
   public List<Applicant__c> Applicants {get; set;}
   public Applicantcontroller() {
    soql = 'Select Id,Name,Existing_Employee__c,ApplicantStreet__c,ApplicantCounty__c,ApplicantState__r.Name,ApplicantZip_Code__c from Applicant__c where Name!=null';
    runQuery();
  }
   // runs the actual query
  public void runQuery() {

    try {
     Applicants  = Database.query(soql);
    } catch (Exception e) {
      ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Ooops!'));
    }
  }
  public PageReference runSearch() {
    String applicantName = Apexpages.currentPage().getParameters().get('applicantName');
    String applicantcounty = Apexpages.currentPage().getParameters().get('applicantcounty');
    String applicantstate = Apexpages.currentPage().getParameters().get('applicantstate');
    String applicantzipcode = Apexpages.currentPage().getParameters().get('applicantzipcode');

  soql = 'Select Id,Name,Existing_Employee__c,ApplicantStreet__c,ApplicantCounty__c,ApplicantState__r.Name,ApplicantZip_Code__c from Applicant__c where Name!=null';
    if (!applicantName.equals(''))
      soql += ' and Name LIKE \''+String.escapeSingleQuotes(applicantName)+'%\'';
    if (!applicantcounty.equals(''))
      soql += ' and ApplicantCounty__c LIKE \''+String.escapeSingleQuotes(applicantcounty)+'%\'';  
    if (!applicantstate.equals(''))
      soql += ' and ApplicantState__r.Name LIKE \''+String.escapeSingleQuotes(applicantstate)+'%\'';  
     if (!applicantzipcode.equals(''))
      soql += ' and ApplicantZip_Code__c LIKE \''+String.escapeSingleQuotes(applicantzipcode)+'%\'';
    // run the query again
      runQuery();
      return null;
     }
   }

Page:

<apex:page controller="Applicantcontroller" sidebar="false">
  <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"/>
  <apex:includeScript value="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"/>
  <apex:includescript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"/>
  <apex:stylesheet value="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"/>
  <apex:stylesheet value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
   <script type="text/javascript">
      function doSearch() {
        searchapplicant(
          document.getElementById("applicantName").value,
          document.getElementById("applicantcounty").value,
          document.getElementById("applicantstate").value,
          document.getElementById("applicantzipcode").value
          );
      }
   </Script>
<apex:form >
<apex:pageblock >
<apex:outputpanel > 
  <apex:actionFunction name="searchapplicant" action="{!runSearch}" rerender="example">
          <apex:param name="applicantName" value="" />
          <apex:param name="applicantcounty" value="" />
          <apex:param name="applicantstate" value="" />
          <apex:param name="applicantzipcode" value="" />
      </apex:actionFunction> 
    <div class = "panel panel-primary">
                <div class = "panel-heading">
                     <h3 class = "panel-title">Applicant Search Filter Criteria</h3>
                </div>
           </div>          
            <form class="form-search">
              <div class="row">
                <div class="col-xs-6 form-group">
                    <label for="inputdefault">Applicant Name</label>
                    <input class="form-control" id="applicantName" type="text" onkeyup="doSearch();"/>
                </div>
                <div class="col-xs-6 form-group">
                    <label for="inputdefault"> County</label>
                    <input class="form-control" id="applicantcounty" type="text" onkeyup="doSearch();" />
                </div>
                <div class="col-xs-6 form-group">
                    <label for="inputdefault"> State</label>
                    <input class="form-control" id="applicantstate" type="text" onkeyup="doSearch();"/>
                </div>
                <div class="col-xs-6 form-group">
                    <label for="inputdefault"> ZipCode</label>
                    <input class="form-control" id="applicantzipcode" type="text" onkeyup="doSearch();" />
                </div>
                <div class="container" align="center">
                <button type="button" class="btn btn-primary">Add Contacts to Event</button>
                <button type="button" class="btn btn-danger">Clear</button>
                </div>
              </div>
            </form>
       </apex:outputPanel>
 <apex:outputpanel >
<table id="example" class="display select" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th><input type="checkbox" name="select_all" value="1" id="example-select-all"/></th>
         <th>Name</th>
         <th>Current Employee</th>
         <th> Street</th>
         <th> County</th>
         <th> State</th>
         <th>Zip Code</th>
         </tr>
   </thead>
   <tbody>
      <apex:repeat value="{!Applicants}" var="applicant">
      <tr>
         <th></th>
          <td><apex:outputText value="{!applicant.Name}"/></td>
          <td><apex:outputField value="{!applicant.Exisitng_Employee__c}"/></td>
          <td><apex:outputText value="{!applicant.RDContactsStreet__c}"/></td>
          <td><apex:outputText value="{!applicant.ApplicantCounty__c}"/></td>
          <td><apex:outputText value="{!applicant.ApplicantState__r.Name}"/></td>
          <td><apex:outputText value="{!applicant.ApplicantZip_Code__c}"/></td>
      </tr>
      </apex:repeat>
   </tbody>
</table>
</apex:outputpanel>
</apex:pageblock>
 </apex:form>
</apex:page>

Answer 1

The primary issue is that if a parameter isn't provided, it will be null, which will crash your if statements:

    if (!applicantName.equals('')) // System.NullPointerException can happen here.

Instead, use the safer String.isNotBlank:

    if(String.isNotBlank(applicantName)) // Safe from System.NullPointerException

Secondly, your query is initialized in two different places, which increases maintenance and increases the odds of an error. Instead, build the query in runQuery.

public void runQuery() {
    soql = 'Select Id,Name,Existing_Employee__c,ApplicantStreet__c,ApplicantCounty__c,ApplicantState__r.Name,ApplicantZip_Code__c from Applicant__c';
    String applicantName = Apexpages.currentPage().getParameters().get('applicantName');
    String applicantcounty = Apexpages.currentPage().getParameters().get('applicantcounty');
    String applicantstate = Apexpages.currentPage().getParameters().get('applicantstate');
    String applicantzipcode = Apexpages.currentPage().getParameters().get('applicantzipcode');
    String[] whereClause = new String[0];

    soql = 'Select Id,Name,Existing_Employee__c,ApplicantStreet__c,ApplicantCounty__c,ApplicantState__r.Name,ApplicantZip_Code__c from Applicant__c';
    if (String.isNotBlank(applicantName)) {
        whereClause.add('Name LIKE :applicantName');
        applicantName += '%';
    }
    if (String.isNotBlank(applicantCounty)) {
        whereClause.add('ApplicantCounty__c LIKE :applicantCounty');
        applicantCounty += '%';
    }
    if (String.isNotBlank(applicantstate)) {
        whereClause.add('ApplicantState__r.Name LIKE :applicantstate');
        applicantstate += '%';
    }
    if (String.isNotBlank(applicantzipcode)) {
        whereClause.add('ApplicantZip_Code__c LIKE :applicantzipcode');
        applicantzipcode += '%';
    }
    if(!whereClause.isEmpty()) {
        soql += ' WHERE '+String.join(whereClause,' AND ');
    }
    Applicants  = Database.query(soql);
}

---

Edit: I just noticed you're using a "table" element, and trying to re-render that element. You can't just reRender arbitrary elements, they must be Visualforce elements. You can fix this easily by wrapping your table in an "apex:outputText":

<apex:outputText id="example">
    <table class="display select" cellspacing="0" width="100%">
       <thead>
          <tr>
             <th><input type="checkbox" name="select_all" value="1" id="example-select-all"/></th>
             <th>Name</th>
             <th>Current Employee</th>
             <th> Street</th>
             <th> County</th>
             <th> State</th>
             <th>Zip Code</th>
             </tr>
       </thead>
       <tbody>
          <apex:repeat value="{!Applicants}" var="applicant">
          <tr>
             <th></th>
              <td><apex:outputText value="{!applicant.Name}"/></td>
              <td><apex:outputField value="{!applicant.Exisitng_Employee__c}"/></td>
              <td><apex:outputText value="{!applicant.RDContactsStreet__c}"/></td>
              <td><apex:outputText value="{!applicant.ApplicantCounty__c}"/></td>
              <td><apex:outputText value="{!applicant.ApplicantState__r.Name}"/></td>
              <td><apex:outputText value="{!applicant.ApplicantZip_Code__c}"/></td>
          </tr>
          </apex:repeat>
       </tbody>
    </table>
</apex:outputText>