Skip to content

Instantly share code, notes, and snippets.

@juampynr

juampynr/readme.txt

Last active Mar 10, 2020
Embed
What would you like to do?
JQuery + Drupal block example. Used to compare with an AngularJS + Drupal approach. Details at https://www.lullabot.com/blog/article/move-logic-front-end-angularjs
JQuery + Drupal block example.
Used to compare with an AngularJS + Drupal approach.
Details at https://www.lullabot.com/blog/article/move-logic-front-end-angularjs
<?php
/**
* @file
* AngularJS template to render a weather block.
*/
?>
<div>
<form id="weather_status_form">
<label for="city">City</label>
<input type="text" id="weather_city" name="city" /></br>
<label for="units">Units</label>
<input type="radio" id="units_metric" name="units" value="metric"/> Metric
<input type="radio" id="units_imperial" name="units" value="imperial"/> Imperial</br>
<button type="submit">Change</button>
</form>
<p id="weather_description"></p>
<p>Temperature: <span id="weather_temp"></span></p>
<p>Wind speed: <span id="weather_wind"></span></p>
</div>
name = My module
description = Implements a JQuery-driven weather block
core = 7.x
/**
* Renders the weather status for a city.
*/
(function ($) {
/**
* Process the form on submission.
*/
Drupal.behaviors.weatherStatus = {
attach: function (context, settings) {
$('#weather_status_form', context).once('jquery').submit(function (e) {
e.preventDefault();
processForm();
});
}
};
/**
* Process the form on page load.
*/
$(document).ready(function() {
$('#weather_city').val('Madrid'),
$('#units_metric').attr('checked', 'checked');
processForm();
});
/**
* Callback to process the form.
*/
function processForm() {
// Fetch the data from the public API through JSONP.
// See http://openweathermap.org/API#weather.
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather',
jsonp: 'callback',
dataType: 'jsonp',
cache: false,
data: {
q: $('#weather_city').val(),
units: $('#weather_status_form input[name="units"]:checked').val()
},
// work with the response
success: function (response) {
$('#weather_description').text(response.weather[0].description);
$('#weather_temp').text(response.main.temp);
$('#weather_wind').text(response.wind.speed);
},
});
}
})(jQuery);
<?php
/**
* @file
*
* Implements a JQuery-driven weather block.
*/
/**
* Implements hook_block_info().
*/
function weather_jquery_block_info() {
$blocks['weather_jquery'] = array(
'info' => t('Weather JQuery'),
);
return $blocks;
}
/**
* Implements hook_block_view().
*/
function weather_jquery_block_view($delta = '') {
$block = array();
switch ($delta) {
case 'weather_jquery':
$path = drupal_get_path('module', 'weather_jquery');
$block['subject'] = t('Weather status');
$block['content'] = array(
'#theme' => 'weather_jquery',
'#attached' => array(
'js' => array( $path . '/weather_jquery.js'),
),
);
break;
}
return $block;
}
/**
* Implements hook_theme().
*/
function weather_jquery_theme() {
return array(
'weather_jquery' => array(
'template' => 'weather-status',
'variables' => array(),
),
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.