Edited at

初めてPHPのフレームワーク(Yii)を使ってみる その5

More than 3 years have passed since last update.

会員情報登録フォームがなんとなく完成に近づいてきました

しかし、郵便番号の横にある「あのボタン」がありません!

というわけで、今回はYiiでのjavascriptの組み込み方、呼び出し方を勉強します



郵便番号から住所を補完するjavascript

郵便番号から住所を補完するJavaScriptはたくさんあるようだが、今回はコレを採用

JavaScriptで郵便番号を住所に変換(DB不要、Google日本語入力APIからJSONPで取得) - GAddress Finder

gaddress-finder.jsをダウンロードして/htdocs/ec_site/js/フォルダにおさめる

使い方は、GAddressFinder.set()の第1引数に郵便番号フィールドのID、第2引数に住所フィールドのIDを入れるだけ

しかし、引数を渡さないといけないせいで、<?php echo CHtml::button('住所入力', array('title'=>'住所入力', 'onclick'=>'adressFinder.set("zip","address");')); ?>がうまくエスケープできない。バックスラッシュでエスケープできないかとか、色々試してみたが、なんだかうまくいかない。

行き詰まっていたところ、とある方からアドバイスをいただき、すんなりと解決した


Yiiにjavascriptを組み込む

こちらが大変参考になった

Yii JavaScriptソース、ファイルの組み込みについて

How to use JavaScript with CHtml button() on a Yii page

javascriptを呼び出すところは、viewかcontrollerがいいらしい

今回はフォームで使うのでもちろん_form.phpで呼び出す

CClientScript::POS_HEADと指定することで、ファイル内のどこに書いても、<head> </head>内で呼び出してくれる

後半の直書きしているスクリプトはJQueryで、IDがaddressFinder1のボタンをクリックした時にGAddressFinder()が実行される。これだと引数も自由に渡せる


/userProfile/_form.php

<?php

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/js/gaddress-finder.js', CClientScript::POS_HEAD);
Yii::app()->clientScript->registerScript('register_gaddress_finder', "
$('#addressFinder1').click(function () {
GAddressFinder.set('UserProfile_zipcode', 'UserProfile_address');
});
$('#addressFinder2').click(function () {
GAddressFinder.set('UserProfile_deliverable_zipcode', 'UserProfile_deliverable_address');
});
"
, CClientScript::POS_READY); // ここをPOS_READYにしないと動かないので注意
?>

...

<div class="row">
<?php echo $form->labelEx($model,'zipcode'); ?>
<?php echo $form->textField($model,'zipcode',array('size'=>10,'maxlength'=>10)); ?>
<?php echo $form->error($model,'zipcode'); ?>
<?php echo CHtml::button('住所入力', array('title'=>'住所入力', 'id'=>'addressFinder1')); ?>
</div>

...

<div class="row">
<?php echo $form->labelEx($model,'deliverable_zipcode'); ?>
<?php echo $form->textField($model,'deliverable_zipcode',array('size'=>10,'maxlength'=>10)); ?>
<?php echo $form->error($model,'deliverable_zipcode'); ?>
<?php echo CHtml::button('住所入力', array('title'=>'住所入力', 'id'=>'adsressFinder2')); ?>
</div>

...



これで、郵便番号を入力して横のボタンをポチッとするだけで、あ~ら簡単、住所が入力されました。

ページのHMLを確認すると、ちゃんとjQueryも読み込んでくれています。

次は、...

まだ決めてないですww