How to display a newly created node (created using a form) in the view using ajax (without page reload)?

Question

I have created a "Share update" form using form API. Below the form, I am displaying a view "feeds" of all the published nodes of content type "updates". On submit, the form saves the data entered in the form as a node of content type "updates". It reloads the page and displays the recently saved node in the view below the form.

I want the node to appear in the view list without page reload. How to do that?

My form API code looks like this -

function add_update_page($form, &$form_state) {
  $form = array(
   '#prefix' => '<div id="update-div">',
   '#suffix' => '</div>',
   '#title' => t('Latest update:'),
   '#description' => t('Add status update'),
  );

  $form['update'] = array(
    '#title' => t('Share an update...'),
    '#type' => 'textarea',
    '#resizable' => '0',
    '#format' => 'update_feed_text',
    '#label' => t('Share an update...'),
  );

  $form['submit'] = array(
    '#id' => 'update-submit-button',
    '#type' => 'submit',
    '#default_value' => t('Share'),
  ); 
  return $form;
}

function add_update_page_submit($form, &$form_state) {
  $update = $form_state['values']['update'];
  $node = new stdClass();
  $node->type = 'updates';
  node_object_prepare($node);
  $node->status = 1;
  $node->uid = $GLOBALS['user']->uid; 
  $node->language = LANGUAGE_NONE;
  $node->created = time();
  $node->changed = $node->created;
  $node->title = 'Automatic status update';
  $node->body[$node->language][0]['value']   = $form_state['values']['update'];
  $node->body[$node->language][0]['summary'] = "";
  $node->body[$node->language][0]['format']  = 'filtered_html';
  node_save($node);
  drupal_set_message($form_state['values']['update']); 
  $form_state['redirect'] = '<front>';
}

I have looked up everywhere, but the proposed solutions are incomplete, making it harder to follow the logic.

Answer 1

As mentioned by wwwWRX you should use the #ajax property for your submit button and with in your function make a few changes. Before that you would want to remove your view from the block because we would be putting that here using code.

the submit button would become

$form['submit'] = array(
    '#id' => 'update-submit-button',
    '#type' => 'submit',
    '#default_value' => t('Share'),
    '#ajax' => array(
        'callback' => 'add_update_page_submit',
        'wrapper' => 'update-list',
        'method' => 'replace',
        'effect' => 'fade',
    ),
  ); 

Add one more element to your form of the type #markup like below

$form['update_list'] = array(
 '#prefix' => '<div id="update-list">',
   '#suffix' => '</div>',
  '#markup' => views_embed_view('views-machine-name','block_name', $arg);

);

you should replace views-machine-name with the actual machine name of the view and block_name with the name of the specific block in the view and $arg would be the argument passed to the view which can be left blank if you dont have one.

with in the function you need to make a few changes towards the end.

you need to get rid of $form_state['redirect'] = '<front>';

and add

return views_embed_view('views-machine-name','block_name', $arg);

That should do it.

Answer 2

I assume Drupal 7 (in D6 this would be an inconceivable nightmare)?

Basically you want to add the #ajax property to your submit button:

    '#ajax' => array(
        'callback' => 'ajax_example_autocheckboxes_callback',
        'wrapper' => 'checkboxes-div',
        'method' => 'replace',
        'effect' => 'fade',
    ),

You use the callback to throw in whatever content and the form and the content swap (or some other div and the content swap)

http://drupal.org/node/752056