kazpgmの日記

『プログラム自動作成@自動生成』作成の日記

TOOL更新_「64.日付項目をカレンダー選択できるようにする。」の祝日をAjaxにした。

TOOL更新_「64.日付項目をカレンダー選択できるようにする。」「http://d.hatena.ne.jp/kazpgm/20090403」の祝日をAjaxにした。
1.祝日をAjaxでサーバーから取得するようにした。見た目「/js/holidays.xml」なのであまり意味ないが、後で「休日テーブル」などを使いたいと思ったとき、簡単にハンドリングできる。という前準備みたいなもの。
・「jkl-calendar.js」を修正(この間作った「function isHoliday(prmDateStr)」をAjaxにした。http://kazpgm.ddo.jp/kaz01u/js/jkl-calendar_20090707u.js <−見る時は開かないで「保存」してください。開くと実行してしまいます。(修正BSDライセンス)
<= 7/16追加 start => 
「httpObject.open("GET","/kaz01u/js/holidays.xml",true);」の「/kaz01u/js/holidays.xml」は変更してください。kl-calendar_20090707u.js中のコメントを以下にした。

//  2009/07/07 - 植木 Ajaxで「holidays.xml」から祝日取得。かつ、font-family追加。
//               「holidays.xml」は置き場所に合わせて変更してください。

<= 7/16追加 end =>

// 祝日 20090707 start
// 祝日配列
var holidayAry = new Array();
// 後々、祝日テーブルから取れるようにするため、
// サーバからXML形式で祝日を取り込む。
loadXMLholidays();

function createXMLHttpRequest(cbFunc){
    var XMLhttpObject = null;
    try{
        XMLhttpObject = new XMLHttpRequest();
    }catch(e){
        try{
            XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                return null;
            }
        }
    }
    if(XMLhttpObject){
        XMLhttpObject.onreadystatechange = cbFunc;
    }
    return XMLhttpObject;
}

function loadXMLholidays() {
    httpObject = createXMLHttpRequest(handleResponse);
    if (httpObject){
        httpObject.open("GET","/kaz01u/js/holidays.xml",true);
        httpObject.send(null);
    }
}

function handleResponse(){
    if ((httpObject.readyState == 4) && 
        (httpObject.status == 200)){
        xmlData = httpObject.responseXML;
        dateListTags = xmlData.getElementsByTagName("date");
        dateLen = dateListTags.length; // 登録されているデータ数
        for(i=0; i<dateLen; i++){
            holidayAry[i] = dateListTags[i].firstChild.nodeValue;
        }
    }
}

// "yyyy/mm/dd"形式の日付文字列を渡す
// 祝日のときtrueを戻す。
function isHoliday(prmDateStr)
{
    // 祝日かどうかを戻す。
    for ( var i=0; i < holidayAry.length; i++ ) {
        if (prmDateStr == holidayAry[i]) {
            return true;
        }
    }
    return false;
}
// 祝日 20090707 end

・「holidays.xml」はこんな感じ

<?xml version="1.0" encoding="UTF-8" ?>
<holidaylist>
<date>2009/04/29</date>
<date>2009/05/03</date>
<date>2009/05/04</date>
<date>2009/05/05</date>
<date>2009/05/06</date>
<date>2009/07/20</date>
<date>2009/09/21</date>
<date>2009/09/22</date>
<date>2009/09/23</date>
<date>2009/10/12</date>
</holidaylist>

2.「jkl-calendar.js」はプルダウンリストがカレンダー表示エリアにあるとカレンダーがうまく表示されないので修正BSDライセンスの「jkl-calendar_20070204_SSL.js」に変更した。しかし表示がちょっと変。あとで理由を調べよう。(こちらのカレンダーは日曜から始まっている。この並びのほうが見慣れている。)
IE

Firefox

・変だといいながら本番サーバに載せているのはどうかとも思うが、チョコチョコしらべようかなと思うのでこのままにしておく。
  <=7/8 12:00 会社のデザイナーさんに聞いた。CSSに「font-family: MS UI Gothic;」を追加する。今はきれいに出ている。解決です。(カレンダー追加は5月27日から調査していて最終的に「jkl-calendar_20070204_SSL.js」をベースにしているが、途中、画面が変ということで使うのをやめようと思っていた。解決してよかった。)
  <=7/8 とおもったら、入力した日付が入ってない。ということでまだNG状態です。(IEはOK、FirefoxがNG)
  <=7/8 <form name="frm" id="frm" method="post" action="xxxx.xxxx">の「id="frm"」が抜けていた。入れたら動いた。
・完成。<=7/8 きれいに見れます。


追加)会社の人にAjax説明ページを教えてもらった。参考URL(http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html



09:00−01:30