jQuery UI DatePickerの選択イベント

jQuery UI Datepicker で日付を選択した時に何かをしたい。そんなときは select イベントを使います。

以下の例では、選択された日付を表示しています。

jQuery(document).ready(function() {
    $( "#datepicker" ).datepicker({
        inline: true,
        onSelect: function (date) {
            alert(date);
        }
    });
});

...

<div id="datepicker"></div>

jqGrid のデータをCSV形式で出力する方法について再考

こちらにjqGridのデータをCSV出力するサンプルを作りました。

簡単に処理を説明すると、選択したデータを配列としてサーバーへポストして、サーバー上でCSVに変換してクライアントへ出力するだけなんですが、ちょっと問題があります。

jqGrid のセルをフォーマッター(formatter:function(){…}) でセルの値に応じて加工しているとその内容で渡してしまいます。具体的には、たとえば ID 列にリンクを付けるために、フォーマッターで cellvalue を ‘<a href=”xxxx”>id</a>’ というようにリンクつけているような場合、このフォーマッターで処理した値がサーバーにわたりCSV出力されます。

これに対処するため、DBの内容を表示している場合なら、jqGrid にレコードのID値を hidden 列かもしくは加工せず保持しておいて、サーバーへポストするデータとしてはレコードIDのみを渡し、サーバー側でそのレコードIDを使ってクエリしたデータをCSV出力すれば、jqGrid で選択したデータがCSV出力されることになり、こちらの方法の方が良いかなぁと思います。

少し時間がとれたらそちらのサンプルも作成してみます。

以上、備忘録です。

 

javascript でサブウィンドウを開いて音声ファイルを再生

javascript で音声ファイルを再生するために、サブウィンドウを開いて再生するHTMLを動的に生成する方法です。

JavaScript:
---------------
function clickToPlay(wav) {
	if (wav == "")
		return;

	var subwin = window.open("", "Subwin", "width=300, height=50");
	subwin.document.clear();
	subwin.document.write("<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><body>");
	subwin.document.write("");
	subwin.document.write("<form><button type="button" onclick="window.close()">閉じる</button></form>");
	subwin.document.write("</body></html>");
	subwin.document.close();
}
16

HTML:
---------------
<button type="button" onclick="clickToPlay('sounds/foo.wav')"></button>";
<button type="button" onclick="clickToPlay('sounds/bar.wav')"></button>";

Windows 上で Internet Explorer で実行すると以下のように表示されます。
soundplay

実際の動作はこちらで確認できます。

Javascript での日付計算

javascript での日付計算のサンプルを備忘録

function addDay(dt, day) {
    var dateOffset = (24 * 60 * 60 * 1000) * day;
    var dtNew = new Date();
    dtNew.setTime(dt.getTime() + dateOffset);
    return dtNew;
}

$(function() {
    // 明日がボタンがクリック
    $("#tomorrow").click(function() {
        var today = new Date();
        // 今日に1日足す
        var tomorrow = addDay(today, 1);
... 省略 ...

    });
});

jQuery エレメントの存在を確認する方法

ドキュメント中にあるエレメントが存在していたら、その値を取得する処理を jQuery で行うためには $(“#xxxx”).length メソッドを利用します。

// 削除チェックボックスが存在するか?
if ($("#bedeleted").length) {
    // 削除ボタンがチェックされているか?
    if ($("#bedeleted").attr('checked')) {
        ret = window.confirm("xx を削除します。よろしいですか?");
        if (ret) {
        } else {
        }
    }
}

--- 省略 ---
<?php echo '<input type="checkbox" class="checkbox" id="bedeleted" name="bedeleted" > <label>削除する</label>'; ?>

参考: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_test_whether_an_element_exists.3F