
Categorías:
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
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; }