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

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

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

More than 5 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

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