2012年5月28日月曜日

[cakephp][jQuery] radioボタンを選択する時は"["と"]"をエスケープする。


1
2
3
4
<input class="category" type="radio" name="category" value="1" />携帯
<input class="category" type="radio" name="category" value="2" />スマートフォン
<div id="category_select">
</div>

こういうラジオボタンで下の  id="category_select" のdivブロックを下記のjavascriptで
表示したり非表示にしたりしているのは良くある話ですが。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$(document).ready(function(){
 
    function displayVals() {
        var singleValues = $('input[name="category"]:checked').val()
        if(singleValues == 2){
            $("#category_select").css("display","block");
        }else{
            $("#category_select").css("display","none");
        }
    }
 
    $('input[name="category"]:radio').change(displayVals);
    displayVals();
});
</script>

cakephpでデータをやり取りすると少し困ってしまう。

普通のヘルパーを使って

1
2
3
4
5
6
7
8
9
<?php
echo $form->input('category', array(
  'type'=>'radio',
  'legend' => false,
  'label'=> true,
  'class'=>'category',
  'options'=>array('1'=>'携帯', '2'=>'スマートフォン'),
));
?>
このようにViewを書くとname部分が"data[Mobile][category]"になってしまい

1
2
3
4
5
6
7
<div class="input radio">
<input type="hidden" name="data[Mobile][category]" id="MobileCategory_" value="" />
<input type="radio" name="data[Mobile][category]" id="MobileCategory1" class="category" value="1"  />
<label for="MobileCategory1">携帯</label>
<input type="radio" name="data[Mobile][category]" id="MobileCategory2" class="category" value="2"  />
<label for="MobileCategory2">スマートフォン</label>
</div>

こんなコードが出力される。

javascriptのSelectors部分がダブルクォーテーションで囲まれているから
input[name="category"] を input[name="data[Mobile][category]"] こう書き換えると

良いように思うが、これでは上手く行かない。理由は上手く説明できないので割愛するが
下記のように"["と"]"をエスケープしてやらなくてはいけない。

input[name="data\[Mobile\]\[category\]"]

だから正しいjavascript文は

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
$(document).ready(function(){
 
    function displayVals() {
        var singleValues = $('input[name="data\[Mobile\]\[category\]"]:checked').val()
        var defined = 0;
        if(singleValues == 2){
            $("#category_select").css("display","block");
        }else{
            $("#category_select").css("display","none");
        }
    }
 
    $('input[name="data\[Mobile\]\[category\]"]:radio').change(displayVals);
    $(window).load(function () { displayVals();});
});
</script>

こうなる。

投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿