Submit AJAX form and update database then show all database results

Question

Is what i am trying to do is on this page it will display all items from the database that currently exist. Then at the top of this list will be a small form that will allow someone to add an item to the list. After someone submits the data and posts the form I want the list below to automatically populate with the updated data. I am having a really hard time trying to figure this out.

function clay_mod_blacklist_form($form, &$form_state) {
drupal_add_css(drupal_get_path('module', 'clay_mod') . '/css/clay_mod.min.css');
drupal_add_js(drupal_get_path('module', 'clay_mod') . '/js/jquery.maskedinput.js');
drupal_add_js(drupal_get_path('module', 'clay_mod') . '/js/clay_mod.js');


$form['company'] = array(
    '#type' => 'textfield',
    '#title' => t('Company Name'),
    '#required' => TRUE
);
$form['name'] = array(
    '#type' => 'textfield',
    '#title' => t('Contact Name'),
    '#required' => TRUE
);
$form['phone'] = array(
    '#type' => 'textfield',
    '#title' => t('Phone'),
    '#required' => TRUE
);
$form['email'] = array(
    '#type' => 'textfield',
    '#title' => t('Email'),
    '#required' => TRUE
);
$form['submit_button'] = array(
    '#type' => 'button',
    '#submit' => array('clay_mod_blacklist_form_submit'),
    '#ajax' => array(
        'callback' => 'clay_mod_blacklist_form_ajax',
        'wrapper' => 'box',
        'method' => 'after'
    ),
    '#value' => t('Add To Blacklist'),
    '#id' => 'ajax-save-form-values'
);

$form['results'] = array(
    '#type' => 'container',
    '#prefix' => '<div class="customShit" id="box">',
    '#suffix' => '</div>'
);

if(isset($form_state['values'])) {
    $form['results'][] = $form_state['values']['results'];
}
// This is where I was display info from database before the form was submitted
//    if(!empty($form_state['values']['results'])) {
//        $form['results'] = $form_state['values']['results'];
//    } else {
//        $rows = db_select('blacklist', 't')
//            ->fields('t')
//            ->execute()
//            ->fetchAll();
//        foreach($rows as $k => $v) {
//            $form['results'][$k]['#markup'] = "<div    class=\"vvvvvvvvv\">x{$v->name}y</div>";
//        }
//    }



return $form;
}
function clay_mod_blacklist_form_ajax($form, $form_state) {
    return $form['results'];
}
function clay_mod_blacklist_form_submit($form, $form_state) {
   ddl('ajax submit');
   $form_state['rebuild'] = TRUE;
   clay_mod_blacklist_form_save($form, $form_state);

}
function  clay_mod_blacklist_form_save(&$form, &$form_state) {
$companyName = $form_state['values']['company'];
$name = $form_state['values']['name'];
$phone = $form_state['values']['phone'];
$email = $form_state['values']['email'];
$query = db_insert('blacklist')
    ->fields(array(
        'company_name' => $companyName,
        'name' => $name,
        'phone' => $phone,
        'email' => $email,
    ))->execute();
}

Answer 1

Add a wrapper around the entire form, and return the entire form from your ajax callback. Then just build the rows reguarly in your form definition - The newly added rows will be shown since all the data is pulled from the database when the from is generated.

function clay_mod_blacklist_form($form, &$form_state) {
  $form['#prefix'] = '<div id="clay_mod_blacklist_form_wrapper">;
  $form['#suffix'] = '</div>';

  // Add the rest of your form definition here

  $form['submit_button'] = array(
    '#type' => 'button',
    '#submit' => array('clay_mod_blacklist_form_submit'),
    '#ajax' => array(
      'callback' => 'clay_mod_blacklist_form_ajax',
      'wrapper' => 'clay_mod_blacklist_form_wrapper',
      'method' => 'after'
    ),
    '#value' => t('Add To Blacklist'),
  );

  $rows = db_select('blacklist', 't')
    ->fields('t')
    ->execute()
    ->fetchAll();
  foreach($rows as $k => $v) {
    $form['results'][$k]['#markup'] = "<div    class=\"vvvvvvvvv\">x{$v->name}y</div>";
}

function clay_mod_blacklist_form_ajax(&$form, &$form_state)
{
  return $form;
}