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

readme.txt

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

weather-status.tpl.php

<?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>

weather_jquery.info

name = My module
description = Implements a JQuery-driven weather block
core = 7.x

weather_jquery.js

/**
 * 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);

weather_jquery.module

<?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(),
    ),
  );
}