「このタスクを完了するボタンをAjaxにしてみよう」

本項はスキルチェックの対象外です。あくまでも見識を広げるために取り組んでください。
Ajaxとは
正式名称は「 Asynchronous JavaScript + XML (非同期なJavaScriptとXML)」になります。
簡単に説明すると、今まではサーバーと通信する際に、ページの情報を全て読み込む必要がありました。
ただ、Ajaxを使用することで、いちいちページ情報を取得することなく、サーバーと通信することができます。
(サーバーと通信するとは、次のページを読み込んだり、DBからデータを取得したり追加したりすることも含みます。)

下記の記事が比較的分かりやすいかと思います。

いまさら聞けない、“Ajax”とは何なのか?
今回作成したいもの
https://youtu.be/1krT7QINyS4

JQueryのダウンロード
Ajaxを使用するためには、JQueryを使用するのが良いです。
JQueryはJavaScriptのライブラリの1つですが、詳細は割愛します。

JQueryを使用するためには、まずソースコードをダウンロードする必要があります。
下記、公式サイトのダウンロードページに行きましょう。
JQuery

「Download the compressed, production jQuery ○.○.○」をクリックしてダウンロードしてください。
○.○.○にはバージョンが入ります。
本当は、バージョンを気にした方が良いのですが、今回はとりあえず最新版をダウンロードしておきます。

ダウンロードが完了したら、解凍してください。
解凍すると、jquery-3.2.1.min.jsのようなファイルができます。(数字はバージョンによって異なります。)
こちらをCakePHPのapp/webroot/js内に保存します。

Tasks/index.ctpの修正
Ajaxを使用するにあたり、app/View/Tasks/index.ctpを修正します。
HTMLヘルパーのlinkを使用すると、画面移動してしまうため、ただのdivタグに変更します。
(+を追加、-を削除してください。)

<?php // app/View/Tasks/index.ctp ?>
<?php // 省略 ?>
- <?php echo $this->Html->link(- 'このタスクを完了する', '/Tasks/done/' . $task['Task']['id'], array(- 'class' => 'button right'- )); ?>
+ <div data-task-id="<?php echo $row['Task']['id']; ?>">
+ このタスクを完了する
+ </div>

 

divタグにはクラス名として、button、right、unfinishedをつけておきます。
またHTMLのdata属性を使用します。
これは、JSを使用する際に、値の受け渡しなどで使用します。
このdata属性を使用して、完了したいタスクのidをJQueryに渡します。

また、今のままだとCSSがくずれてしまうので、CSSファイルにも追記します。

/* app/webroot/css/tasks.css */
/* 省略 */
.unfinished { 
text-decoration: underline; 
font-weight: bold; 
color: #003d4c; 
display: initial; 
cursor: pointer;
}

 

これで、見た目上は元々のビューと同じになりました。

JS(JQuery)ファイルの作成
それでは、JQueryを使用してAjax処理を記述していきます。

JQueryやJSはサーバーサイドカリキュラムでは扱っていないので、大まかな処理の流れのみ記載します。
気になる方は個人で、もしくはフロントエンドカリキュラムまで進んで勉強しましょう。

まずは、app/webroot/js/以下に、task_done.jsという名前のファイルを作成します。
ここが、JSファイルを保存する場所です。

// app/webroot/js/task_done.js$(function() { $('.unfinished').on('click', function() { var $task_id = $(this).attr('data-task-id'); var $parent = $(this).parent(); $.ajax({ url: '/cakephp-tasks/tasks/done/' + $task_id, type: 'GET' }).done(function(data) { $($parent).fadeOut(1000); }).fail(function(data) { alert('エラーです。'); }); });});

この処理の流れは、下記になります。

クラス名がunfinishedの領域がクリックされた場合に処理を開始する。
その要素のdata-post-idから値を取得する($post_id)。
その要素の親要素を取得する(完了したタスクを消すために取得)。
Ajaxの準備をします。
通信するURLは’/cakephp-tasks/tasks/done/’ + $task_idです。これは、今までのタスクを完了する時のURLと同じです。
doneは成功した後の処理を記載します。成功したら1秒かけてフェードアウトさせます。
failは通信失敗した場合の処理を記載します。失敗したらエラーメッセージを表示する。
JSファイルの読み込み
さて、JQueryのファイルをダウンロードし、JSファイルを用意しましたが、まだ読み込む宣言をしていません。
今回は、Tasks/indexで飲み使用するので、下記のように宣言します。

<?php echo $this->Html->script( 'jquery-3.2.1.min', array('inline' => false )); ?><?php echo $this->Html->script( 'task_done', array('inline' => false )); ?><?php echo $this->Html->link('新規タスク', '/Tasks/create'); ?><h3><?php echo count($tasks_data); ?>件のタスクが未完了です</h3><?php foreach ($tasks_data as $row): ?> <?php echo $this->element('task', array('task' => $row)); ?><?php endforeach; ?>
CSSと同じような感じですね。
'inline' => falseのオプションは今は気にしなくて良いです。
jquery-3.2.1.minはダウンロードしたJQueryのファイル名になりますので、違うバージョンをダウンロードした方は気をつけてください。

実際に試してみよう
さて、ここまでのファイルを作成して、Vagrant環境にアップすれば今までとは違う感じになるはずです。
試してみてください。

なお、わざとエラーを起こしたい場合は、task_done.js内のurl: ~~~を適当な文字にすればサーバーとの通信が失敗します。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami