Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

concrete5 のブロックで ajax を実装してみた

More than 1 year has passed since last update.

concrete5(ホームページ作成・運用ソフト、CMS)のカスタマイズ方法です。今回はブロック(concrete5でのコンテンツの単位)で ajax 処理を行ってみました。

今回は、QUICKNEM で使っている、NEM(XEM)と日本円の為替レートをajaxで表示するブロックを例に取り上げます。



ブロックの controller.php で ajax 用のエンドポイントを作る


// action_XXXで、リクエストを受けるURLを設定する。
public function action_getprice(){
    $data = $this->getPrice();
    // jsonデータを返す

// データベースからデータを取ってくる処理
// データは連想配列で返す
protected function getPrice() {
    $db = Database::getActiveConnection();
    $price = $db->fetchAssoc("SELECT vwap, inserted FROM ounziwCryptoPrice ORDER BY inserted DESC", array());
    return $price;

ブロックの view.js で ajax を実行する

concrete5では jQuery が同梱されているので、jQueryでデータ取得します。(vue.js等を使う場合は、js読み込みの設定が必要になります。)

        url: $('span.xemratio').data('url'),
        dataType: 'json',
        type: 'post',
        success: function(response) {
    return false;

ちなみに view.phpは下記のようにしています。

<?php defined('C5_EXECUTE') or die("Access Denied.");?>
    1XEM = <span data-url="<?php echo $view->action('getprice')?>" class="xemratio"></span> 円(レート取得日時: <span class="xemdate"></span>)


■ホームページを営業マンにするウェブサービス「マイ見積」や、AIに負けない書籍紹介サイト「ブックレコメンド」などを公開している。 ■ 著書 ● WordPressユーザーのためのPHP入門 はじめから、ていねいに。 ● 徹底攻略 PHP5技術者認定[上級]試験問題集
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away