会員情報登録フォームがなんとなく完成に近づいてきました
しかし、郵便番号の横にある「あのボタン」がありません！
というわけで、今回はYiiでのjavascriptの組み込み方、呼び出し方を勉強します
郵便番号から住所を補完するjavascript
郵便番号から住所を補完するJavaScriptはたくさんあるようだが、今回はコレを採用
JavaScriptで郵便番号を住所に変換（DB不要、Google日本語入力APIからJSONPで取得） - GAddress Finder
gaddress-finder.jsをダウンロードして/htdocs/ec_site/js/フォルダにおさめる
使い方は、GAddressFinder.set()の第１引数に郵便番号フィールドのID、第２引数に住所フィールドの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()が実行される。これだと引数も自由に渡せる
<?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も読み込んでくれています。
次は、...
まだ決めてないですｗｗ