not president's blog

脳直で書きます。自分が覚えたい事を書いているだけです。

フォームAPIの最終回

Ajaxを使用したプログレスバー

できませんでした。
バーは表示されるけど、時間経過でバーを延ばす表現がつかない。
でも次の章にいきたいので、一旦置いて次にいきます。

以下は途中まで実装したプログレスバー

プログレスバーの追加

1.Formの定義

<?php 
/**
 * Hook_menuの実装
 */
 function ajax_test_menu(){
     $items['ajax_test'] = array(
        'title' => 'Ajaxのテスト',
        'page callback' => 'drupal_get_form',
        'page arguments' => array('ajax_test_form'),
        'access arguments' => array('access content'),
     );
     $items['ajax_test/fade_js'] = array(
        'page callback' => 'ajax_test_fade_js',
        'type' => MENU_CALLBACK,
        'access arguments' => array('access content'),
     );
     $items['ajax_test/interval'] = array(
        'page callback' => 'ajax_test_interval_js',
        'type' => MENU_CALLBACK,
        'access arguments' => array('access content'),
     );
     return $items;
 }
 
 /**
  * フォーム定義
  */
  function ajax_test_form(){
      $form['target'] = array(
        '#type' => 'markup',
        '#prefix' => '<div id="target">',
        '#markup' => t('ボタンをクリックすると幸せな気分になれますが、それは幻想です'),
        '#suffix' => '</div>',
      );
      
      $form['submit'] = array(
        '#type' => 'submit',
        '#value' => t('クリックしてね!'),
        '#ajax' => array(
            'path' => 'ajax_test/fade_js',
            'wrapper' => 'target',
            'method' => 'replace',
            'effect' => 'fade',
            'progress' => array(
                'type' => 'bar',
                'message' => t('ちょっとまっててー'),
                'interval' => 2,
            ),
       ),
      );
      return $form;
  }
?>

これを表示して、Submitを押すと、
f:id:orenodrupal:20150505113212p:plain f:id:orenodrupal:20150505113221p:plain アニメアイコンが表示される。
次回からはフィルタシステムに入ります。