Objective

Create a module and a new block that will call an ajax function to show some info dynamically

Summary

• Step 1: create your module
• Step 2: call hooks 'block_info' and 'block_view' for a new block
• Step 3: create function for block content
• Step 4: create javascript file with the ajax call inside your module
• Step 5: add hook menu for ajax call
• Step 6: create function for ajax callback
• Step 7: css styles

Step 1: create custom module

• Create '.module' and '.info' files inside your Drupal installation. Can be in 'drupal/sites/all/modules/example' or 'drupal/sites/default/modules/example'

example.info

;$Id$
name = Example module
description = Example module for a block with an ajax call
package = Example modules
core = 7.x
files[] = example.module
;dependencies[] = autoload
;php = 5.3
version = "7.x-1.0"

Step 2: call hooks 'block_info' and 'block_view' for a new block

example.module

function example_block_info() {
 
    $blocks['example_name_block'] = array(
            'info' => t('This will be the block title'),
            'status' => 1,
            'cache' => DRUPAL_NO_CACHE // this will exclude the block from Drupal cache
    );
 
    return $blocks;
}
 
/**
 * This hook generates the contents of the blocks themselves.
 */
function example_block_view($delta = '') {
 
    switch ($delta) {
        case 'example_name_block': // note the same name from the block_info
            $block['subject'] = '';
            $block['content'] = example_block_content(); // this function will print the block content
 
            // call javascript file
            drupal_add_js(drupal_get_path('module', 'example') . '/js/example.js');
 
            // call css file
            drupal_add_css(drupal_get_path('module', 'example') . '/css/example.css');
    }
    return $block;
}

Step 3: create function for block content

/**
 *  Output search block content
 * @return string
 */
function example_block_content() {
    global $base_url;
 
    // Keep the title value if we have the block in every page 
    $title = isset($_GET['title']) ? $_GET['title'] : "";
 
    $output ='       
            <div class="row form-search-example">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h2>Search form example</h2>
                    <form class="example-form" method="get">
                        <input type="text" id="title" name="title" autocomplete="off" value="'. $title .'"  placeholder="' . t('Type article title') .'">
                        <button type="submit" class="submit"><i class="fa fa-2x fa-search"></i> </button>
                    </form>
                </div>
            </div>
          <div id="form-ajax-results"></div>
    ';
    return $output;
}

Step 4: create javascript file with the ajax call inside your module

• Example: drupal/sites/default/modules/example/js/example.js
• We are going to autocomplete an article/page title when an user type something in the title field

(function($) {
Drupal.behaviors.example_search = {
  attach: function (context, settings) {
    //code starts
 
    $(".example-form").on("keyup", "#title", function () {
        var title = $(this).val();
        $.ajax({
            url: Drupal.settings.basePath + 'example/ajax/search',
            type: 'post',
            data: 'title=' + title,
            dataType: 'json',
            success: function (data) {
                if (data.success === true) {
                    $('#form-ajax-results').removeClass('hide-form-search');
                    $('#form-ajax-results').addClass('show-form-search');
                    $('#form-ajax-results').html(data.content);
                } else {
                    $('#form-ajax-results').addClass('hide-form-search');
                    $('#form-ajax-results').removeClass('show-form-search');
                }
            }
        });
    }); // end keyup   
 
    //code ends
  }
};
})(jQuery);

Step 5: add hook menu for ajax call

/**
 * Implements hook_menu().
 */
function example_menu() {
 
    $items['example/ajax/search'] = array(
        'page callback' => 'example_ajax_serach',
        'access arguments' => array('access content'),
        'type' => MENU_CALLBACK,
    );
 
    return $items;
}

Step 6: create function for ajax callback inside your module

/**
 * AJAX: search
 */
function example_ajax_search() {
    global $base_url;
 
    $title = $_POST['title'];
    $found = false;
    $output = null;
    if (strlen($title)>3) {
        // Query article and page content type
        $query = db_select('node', 'n')->fields('n', array('title','nid'));
        $db_or = db_or();
        $db_or->condition('n.type', 'article');
        $db_or->condition('n.type', 'page'); 
 
        $results = $query->condition($db_or)
        ->condition('n.title','%'.$title.'%','LIKE')
        ->orderBy('n.title', 'ASC')
        ->range(0,10)
        ->execute()
        ->fetchAll();
 
        if (!empty($results)) {
            $found = true;
            foreach ($results as $node) {
                // get the alias url 
                $url = drupal_get_path_alias("node/" . $node->nid);
                $output .= '
                    <div class="ajax-content-selector" data-title="'.$node->title.'">
                        <a href="'.$url.'" title="' . $node->title . '">' . $node->title . '</a>
                    </div>';
            }
        }
    } 
 
    echo json_encode(array('success' => $found, 'content' => $output));
 
    module_invoke_all('exit');
    exit;
}

Step 7: add css file

• Example: drupal/sites/default/modules/example/css/example.css

.show-form-search {
    background-color: #fff;
    border: 1px solid #d4d4d4;
    color: #000;
    display: block;
    margin: -32px 0 10px 240px;
    padding: 5px 20px 2px;
    position: absolute;
    text-align: left;
    width: 433px;
    z-index: 99999;
}
 
.hide-form-search {
    display:none;
}