1. /
  2. jQuery

jQuery

IE で Option の jQuery.toggle() が動作しない

あるタイミングで、Optionの中身を非表示にしたいと言う事ある。
jQueryでそれを書こうとすると

$([selector]).toggle(false);
$([selector]).css('display', 'none');

のどちらかで非表示にできるはずですが、IEでは表示になりません。

なので、Option を コピーして擬似的にtoggleを実装します。

$(function() {
    $('body').append('<select id="copy" style="display:none;"></select>');
    $('select[name=list]').eq(0).children().clone().prependTo('#copy');

    $('input[type=radio][name=switch]').change(function() {
        switchEventTime($('input[type=radio][name=switch]:checked'));
    });

    switchEventTime($('input[type=radio][name=switch]:checked'));
    function switchEventTime(_this) {
        if (!_this) {
            return false;
        }

        var val = $(_this).val();
        if (val == '1') {
            var cur = $('select[name=list]').val();
            $('select[name=list]').children().remove();
            $('#copy').children().each(function () {
                var option = $(this);
                if (option.val() != '') {
                    return;
                } else {
                    $('select[name=list]').append(option.clone());
                }
            });
            $('select[name=list]').val(cur);
        } else {
            var cur = $('select[name=list]').val();
            $('select[name=list]').children().remove();
            $('#copy').children().each(function () {
                var option = $(this);
                $('select[name=list]').append(option.clone());
            });
            $('select[name=list]').val(cur);
        }
    }
});

jQueryでXHRを送信するときの覚書(getJSON版)

以前書いた、jQueryでXHRを送信するときの覚書のgetJSONバージョン

キャッシュが残る

{t: new Date().getTime()} の様に、タイムスタンプをパラメータに渡してキャッシュしないようにする。

$.getJSON('list.php', {t: new Date().getTime()},
    function(data) {
    for (i = 0; i < data.length; i++) {
        //console.log(i);
        ....
    }
});

同期通信したい

$.ajaxSetup({ async: false }); で、同期通信するようにする。
$.ajaxSetup({ async: true }); で、非同期通信するようにする。

$.ajaxSetup({ async: false });
$.getJSON('list.php', {t: new Date().getTime()},
    function(data) {
    for (i = 0; i < data.length; i++) {
        //console.log(i);
        ....
    }
});
$.ajaxSetup({ async: true });

jQueryでXHRを送信するときの覚書

jQueryを使えばどのブラウザでも、XHRを送信して非同期通信が簡単にできるようになりましたが、よく忘れるので覚書。

キャッシュが残る

$.ajax()でリクエストを送る際、通常は一度リクエストを送るとレスポンスがキャッシュされてサーバーサイドのプログラムを修正しても変更されない、と言った事が有ります。

開発中はキャッシュさせない方が良いので、その場合はXHRを送信する前にリクエストヘッダにIf-Modified-Sinceを設定して、サーバーサイドから毎回レスポンスをもらうようにします。

$.ajax( {
    type : 'GET',
    url : 'list.php',
    dataType: 'json',
    data : {
        pref : $('#pref').val(),
        type : $('#type').val()
    },
    beforeSend : function( xhr ){
        xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
    },
    success : function(data) {
        $('#list').empty();
        options = new Array();
        
        $.each(data, function(i, v){
            options.push('<option value="' + i + '">' + v + '</option>');
        });
        $('#list').append(options.join());
    },
    error : function(msg) {
       ....
    },
    complete : function(msg) {
       ....
    }
});

If-Modified-Sinceについては、
If-Modified-Since | 鳩丸ぐろっさり (用語集).

同期通信したい

$.ajax()では同期通信もできます。
用途としては、ページロード時に動的にコンテンツを表示してそのコンテンツに対してスタイルを変更する等、コンテンツが取得されたあと何らかの処理する必要が有る場合に同期通信を使います。
同期通信はasyncをfalseにすることで可能になります。

$.ajax({
    url: 'news.php',
    async: false,
    success: function(data){
        $('#news').html(data);
    }
});

jQueryでtype=”file”のvalueをリセットする

type=”reset”だと全てリセットされてしまうので、type=”file”のvalueだけリセットしたい場合。

こんなHTMLだった場合
[HTML]


[/HTML]

通常だと

    $('#resetid').click(function(event){
        $("#photoid").val('');
    });

でリセット出来るはずですが、IEでリセットできない。。。

replaceで置き換えてやるのが正解のようです。

    $('#resetid').click(function(event){
        event.preventDefault();
        $("#photoid").replaceWith("<input type='file' name='photo1' value='' id='photoid'>");
    });

CakePHPでページの違う画面の内部リンクを有効にしたい場合

二通りやり方があって、一つは.htaccessでURLの#以降もCakePHPに制御させない方法と、javascriptで対応する方法。

今回はjavascript(jQuery)で対応してみました。

javascriptで実現する方法

遷移先のVIEWに下記を記述するだけです。

<script type="text/javascript">
$(document).ready(function () {
    if (location.hash) {
        y = $("*[name="+location.hash.slice(1)+"]").offset().top;
        scrollTo(0,y);
    }
})
</script>

location.hashで#xxパラメーターを取得して、それを使ってname属性でフィルターしたオブジェクトのoffsetを取得します。
あとは、そこまでスクロースする処理を行えば疑似的に内部リンクが有効になります。

.htaccessで実現する方法

.htaccessに下記を記述すると実現できるようです。(未検証)

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)(#*.*)$ index.php?url=$1$2 [QSA,L]
</IfModule>