drupal ajax form

Question

What I want to do is: I want to render a form on a page with a view. This view has a list of 'notes' (=CT Note). When you fill in the form, the note is stored, the form is cleared, and the new note is added to the list. All without page refreshes.

I create a module new_note, and addes this function:

    function new_note_form($nodeid = NULL) {
        ctools_include('ajax');
        //  drupal_add_js(drupal_get_path('module', 'custom_forms') . '/js/note_form.js');
        //dpm($nodeid);
        module_load_include('inc', 'node', 'node.pages');
        $form = node_add('note');
        $form['field_note_reference']['und']['#value'] = '2';
        $form['field_note_reference']['und']['#validated'] = 'TRUE';
        $form['field_note_reference']['#attributes']['class'][] = "hidden";
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => 'Submit',
            '#executes_submit_callback' => FALSE,
            '#ajax' => array(
                'callback' => 'ajax_note',
                'wrapper' => 'status',
            ),
        );
     $output= drupal_render($form);
        dpm($form);
        print $output;
    }

function ajax_note(&$form, &$form_state) {
    return 'test';
}

I use this function in a display suite block field, which is rendered above the note list. So far so good.

The only problem is, that when I submit the form, the ajax is not called, and the normal submit is done.

Can anyone help me out

@ Edit.

After what clive suggested I changed the code, and got the ajax working.

function new_notes_form($nodeid = NULL) {
    global $user;

    $node = (object) array(
                'uid' => $user->uid,
                'name' => (isset($user->name) ? $user->name : ''),
                'type' => 'note',
                'language' => LANGUAGE_NONE,
    );
    $form_state = array();
    $form_state['build_info']['args'] = array($node);
    form_load_include($form_state, 'inc', 'node', 'node.pages');
    $form = drupal_build_form('note_node_form', $form_state);
    $form['field_note_reference']['und']['#value'] = '2';
    $form['field_note_reference']['#attributes']['class'][] = "hidden";
    $form['submit'] = array(
        '#type' => 'button',
        '#value' => 'Submit',
        '#limit_validation_errors' => array(),
        '#ajax' => array(
            'callback' => 'ajax_note_replace',
            'wrapper' => 'status',
        ),
    );
    return $form;
}

function ajax_note_replace(&$form, &$form_state) {
    dpm("test");
    dpm($form);
    $output = '<h1>' . t('Hello World') . '</h1>';
    // $node = node_load('6');
    // $output .= drupal_render(node_view($node, $style = 'teaser', $options = array()));

    ctools_include('ajax');
    $commands = array();
    $commands[] = ajax_command_prepend(".view-content", $output);
    print ajax_render($commands); // this function exits.
    exit;
}

@Clive, can you help me out with the rest ? I want to save the node on callback (if valid?). In the ajax callback my node-id is null because it is not stored yet? how can I validate and save the node, otherwise set the not valid form items to red as normal.

Answer 1

It's likely to be because you're sidestepping Drupal's proper methods for creating forms so the AJAX preprocessing won't be performed. If you have a look at drupal_get_form() (the function used pretty much exclusively to prepare a form in Drupal) you'll see it in turn calls drupal_build_form() which is what you need to do:

function new_note_form($form, &$form_state, $nodeid = NULL) {
  $form_state['build_info']['args'] = array('note');
  $form = drupal_build_form('node_add', $form_state);

  $form['submit'] = array(
    '#type' => 'button',
    '#value' => 'Submit',
    '#limit_validation_errors' => array(),
    '#ajax' => array(
        'callback' => 'advanced_form_callback',
        'wrapper' => 'status',
    ),
  );

  return $form;
}

echo render(drupal_get_form('new_note_form'));

I've changed the element from type submit to button because I find it works much better when you want to do some ajax processing, removed #executes_submit_callback , and added #limit_validation_errors which will stop the form from otherwise validating (I think that's what you were trying to do by setting #validated to TRUE but I might be wrong).

Hope that helps, it's untested but should give you a good place to start.