Using ajax in my entityform

Question

I have a content type called Area and another content type called apartment that has a reference to area.

I have an Investment form (using entityform module) in which users select which area; after that, users should be able to see apartments in that area in a select box. (This feature should be implemented wit ajax.)

I want to have some filters on areas and apartments like views module filters (for example apartment which are not sold). How should I implement these features?

and here's my node--invest.tpl.php:

<?php $language = $GLOBALS['language']; if ($language->language == $node->language): ?>
    <div class="panel">
        <div class="viewport">
            <div class="main match-height">
                <div class="col-con">
                    <div class="col-1-1">
                        <?php echo $custom_content['body'] ?>
                    </div>
                </div>

                <div class="col-con">
                    <?php foreach($custom_content['panels'] as $panel): ?>
                        <div class="col-1-2">
                            <div class="roadmap">
                                <h3><?php echo $panel['title']?></h3>
                                <ul>
                                    <?php foreach($panel['steps'] as $step): ?>
                                        <li><?php echo $step ?></li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="sidebar match-height">
                <h3><?php echo $custom_content['form_title'] ?></h3>
                <p><?php echo $custom_content['form_body'] ?></p>
                <div class="form">
                    <?php print drupal_render($entityform) ?>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>

And if you wonder what is $custom_content, this is the code that generates it.

function get_invest_page_data($node) {
    $invest = [];
    $invest['title'] = $node['title'];
    $invest['body'] = $node['body'][0]['value'];
    $invest['form_title'] = $node['field_form_title'][0]['value'];
    $invest['form_body'] = $node['field_form_body'][0]['value'];
    $invest['panels'] = [];

    if ( ! empty($node['field_step_panel'])) {
        $i = 0;
        foreach ($node['field_step_panel'] as $panel_key) {
            $panel = load_collection($panel_key['value']);
            $panels[$i] = [];
            $invest['panels'][$i]['title'] = $panel->field_invest_panel_title['und'][0]['value'];

            $steps_keys = $panel->field_invest_panel_step;


            $j = 0;
            foreach ($steps_keys['und'] as $step_key) {
                $step = load_collection($step_key['value']);
                $invest['panels'][$i]['steps'][$j] = $step->field_invest_panel_step_body['und'][0]['value'];
                $j++;
            }


            $i++;
        }
    }

    return $invest;
}

This code exists in template.php. The following line is used in theme_prepreprocess_node().

$node['custom_content'] = get_invest_page_data($node);

Answer 1

The ajax from a form is handled by the form function itself wich is edited in the mdule layer, not in the template layer. The custom module approach would be.

Find the id of the entity form, see this Tutorial

Once you have the id you can use the MY_MODULE_form_FORM_ID_alter to edit the form elements to use ajax. See this Tutorial for more info on ajax forms.

If you want the ajax callback to alter an external element/several wrappers you can use the ajax_command_* functions to change pretty much anything selectable by JS. Have the ajax callback return something like this. (you won't need to set the #ajax wrapper in this case).

More about the drupal's ajax_command_* functions

function AJAX_CALLBACK_CALLED_FROM_FIELD($form, &$form_state){
  $commands[] = ajax_command_html('JQUERY_SELECTOR', 'VALID_HTML'); // Or any other valid ajax command. 
  return array( 
    '#type' => 'ajax', 
    '#commands' => $commands
  ); 
}