RoudcubeプラグインでAjaxする « LANCARD.LAB｜ランカードコムのスタッフブログ

RoudcubeプラグインでAjaxする

2013/04/26
uchida

RoudcubeプラグインでAjaxする方法を紹介します。

サーバ側：

rc = rcmail::get_instance();

$this->add_texts('localization/');
$this->register_task('ajax_sample');

if($this->rc->task == 'ajax_sample'){
$this->register_action('index', array($this, 'action'));
$this->register_action('get_data', array($this, 'action'));
}else{
$this->add_button(array(
'command' => 'ajax_sample',
'label' => 'ajax_sample.title'
), 'taskbar');
}
}

public function action(){
//画面表示
if($this->rc->action === 'index'){

$this->include_script('ajax_sample.js');
$this->rc->output->send('ajax_sample.ajax_sample');

//ajax
}else if($this->rc->action === 'get_data'){

error_log(get_input_value('data', RCUBE_INPUT_POST));
$this->rc->output->command('plugin.get_data', array('data' => 'test'));

}
}

}

クライアント側：

var get_data_call_back = function(response){
console.log(response.data);
}

if (window.rcmail) {
rcmail.addEventListener('init', function() {
rcmail.addEventListener('plugin.get_data', get_data_call_back);
rcmail.enable_command('get_data', true);
});
}

rcube_webmail.prototype.get_data = function()
{
rcmail.http_post('get_data',{"data":'test'});
}

①コールバックの登録
　　クライアント側のrcmail.addEventListener(‘plugin.get_data’, get_data_call_back);の
　　第一引数と
　　サーバ側の$this->rc->output->command(‘plugin.get_data’, array(‘data’ => ‘test’));の
　　第一引数を
　　一致させる必要があります。

　　この際に’plugin.’という文字を前につける必要があります。
　　なぜなら/roundcuberoot/program/include/rcube_json_output.phpの
　　141行目が次のようになっています。

    public function command()
    {
        $cmd = func_get_args();

        if (strpos($cmd[0], 'plugin.') === 0)
          $this->callbacks[] = $cmd;
        else
          $this->commands[] = $cmd;
    }

　　ここでcallbacksに登録されないため

　　/roundcuberoot/program/js/app.src.jsの6041行目

    // execute callback functions of plugins
    if (response.callbacks && response.callbacks.length) {
      for (var i=0; i < response.callbacks.length; i++)
        this.triggerEvent(response.callbacks[i][0], response.callbacks[i][1]);
    }

　　この部分のコールバックとして実行されません。

②ポストするデータ
　　rcmail.http_post('get_data',{"data":'test'});の第二引数で指定します。

③サーバから返すデータ
　　$this->rc->output->command('plugin.get_data', array('data' => 'test'));の第二引数で指定します。