Ajaxでページングとか親ウィンドウとポップアップとか


・親ページからポップアップを呼び出して検索、
・ポップアップ上で検索結果をページング
・検索結果から選択したものを親ページに反映

ソースのテーマは市区町村検索にしてみた。

親画面からの呼び出しは省略。
ポップアップのjsはこんな感じかな。prototype.js使用。

var doc = document;

var xmlAry = new Array();
var rows = "";
var limit = 10;
var paging = 0;
var start = 0;

//dom analytics
function resulton() {
    var prefectureCd = "14";
    var keyword = "横浜市";
    var xmlObj = new Spry.Data.XMLDataSet('prefectureCd=' + prefectureCd + '&keyword=' + keyword , '/results/data' , {useCache:false});
    var obj = new Object;
    xmlObj.loadData();
    obj.onPostLoad = function(ds, type) {
        if(xmlObj.getDataWasLoaded()) {
            xmlAry = xmlObj.getData();
            rows = xmlAry.length;
            if(rows < limit){
                //次ボタン消去
                $("nextOff").show();
                $("nextOn").hide();
            }
            $("rowNum").innerHTML = rows;
            $("rowsNum").innerHTML = rows;
            //tableタグ作成
            var table = doc.createElement("table");
            table.setAttribute("id","resultTable");
            //<div id="searchResultArea">の子要素としてtableを追加
            doc.getElementById("searchResultArea").appendChild(table);
            //tbodyタグ作成
            var tbody = doc.createElement("tbody");
            table.appendChild(tbody);
            if( rows < limit){
                var b = rows;
            }else{
                var b = limit;
            }
            for(i=0;i < b;i++){
                var tr = doc.createElement("tr");
                //都道府県名を表示するtdタグ
                var tdprefName = doc.createElement("td");
                tdprefName.style.width = "15%";
                //都道府県コードを表示するtdタグ
                var tdprefCd = doc.createElement("td");
                tdprefCd.style.display = "none"; //非表示タグとする
                //市区郡名を表示するtdタグ
                var tdareaName = doc.createElement("td");
                tdareaName.style.width = "18%";
                //市区郡コードを表示するtdタグ
                var tdareaCd = doc.createElement("td");
                tdareaCd.style.display = "none"; //非表示タグとする
                //選択ボタンを表示するtdタグ
                var selectbtn = doc.createElement("td");
                //trノードの末尾に順番にオブジェクトを追加していく
                tr.appendChild(tdprefName);            //都道府県名
                tr.appendChild(tdprefCd);            //都道府県コード
                tr.appendChild(tdareaName);            //市区郡名
                tr.appendChild(tdareaCd);            //市区郡コード
                tr.appendChild(selectbtn);            //選択ボタン
                //tbodyノードの末尾にtrを追加
                tbody.appendChild(tr);
            }
            resultCnt(paging);
            //remove
            xmlObj.removeObserver(obj);
        }
    }
    xmlObj.addObserver(obj);
}

function resultCnt(paging){
    var pagingTotal = Math.ceil(rows/limit)-1;
    var start = paging*limit;
    if(pagingTotal != paging){
        var lmt = start+limit;
    }else{
        var lmt = rows;
    }
    var counter = 0;
    for(i=start;i<lmt;i++){
        var a = $("resultTable").firstChild.childNodes[counter++];

        a.childNodes[4].setAttribute("id","prefectureName"+i);    //都道府県
        a.childNodes[5].setAttribute("id","prefectureCd"+i);    //都道府県コード
        a.childNodes[6].setAttribute("id","areaName"+i);        //市区郡名
        a.childNodes[7].setAttribute("id","areaCd"+i);            //市区郡コード
        a.childNodes[8].setAttribute("class","selectBtn");        //選択ボタン

        a.childNodes[4].innerHTML = xmlAry[i]['prefectureName'];
        a.childNodes[5].innerHTML = xmlAry[i]['prefectureCd'];
        a.childNodes[6].innerHTML = xmlAry[i]['areaName'];
        a.childNodes[7].innerHTML = xmlAry[i]['areaCd'];
        a.childNodes[8].innerHTML = '<a href="javascript:selected(' + i + ');"><img src="「選択する」ボタン.gif" width="67" height="20" alt="選択する"/>';

    }
    $("startNum").innerHTML = start+1;
    $("lastNum").innerHTML = lmt;

    change(pagingTotal,a);

    //【読み込み中・・・】の表示を消去
    $("nowloading").hide();
}

function change(pagingTotal,a){
    if(paging == 0) {
        /* 最初のページ */
        //2ページの場合,次ボタン表示
        if(pagingTotal == 1) {
            $("nextOn").show();
            $("nextOff").hide();
            //2ページ目表示で隠れた要素を再表示
            var c = rows-paging*limit;
            var a = $("resultTable").firstChild.childNodes;
            for(i=0;i<limit ;i++){
                $(a[i]).show();
            }
        }
        //前ボタン消去
        $("prevOff").show();
        $("prevOn").hide();
    }else if(paging >0 && paging < pagingTotal){
        /* 数ページ存在する中の途中のページ */
        //前ボタン表示
        $("prevOn").show();
        $("prevOff").hide();
        //次ボタン表示
        $("nextOn").show();
        $("nextOff").hide();
        var c = rows-paging*limit;
        var a = $("resultTable").firstChild.childNodes;
        for(i=0;i<limit;i++){
            $(a[i]).show();
        }
    }else if(paging == pagingTotal){
        /* 最終ページ */
        //前ボタン表示
        $("prevOn").show();
        $("prevOff").hide();
        //次ボタン消去
        $("nextOff").show();
        $("nextOn").hide();
        var c = rows-paging*limit;
        var a = $("resultTable").firstChild.childNodes;
        for(i=c;i<limit;i++){
            $(a[i]).hide();
        }
    }
}

function selected(id){
    if(!window.opener || window.opener.closed){
        //親ウィンドウが存在しない
        window.close();
    }else{
        try {
            //window.openerで親ウィンドウのオブジェクトを操作
            //親ウインドの市区町村検索の結果表示領域を非表示から表示に
            window.opener.document.getElementById('winSelect').style.display='block';
            //選択した市区町村の各情報を取得する
            var prefNm = document.getElementById('prefectureName'+id).innerHTML;    //選択した都道府県名
            var prefCd = document.getElementById('prefectureCd'+id).innerHTML;        //選択した都道府県コード
            var areaNm = document.getElementById('areaName'+id).innerHTML;            //選択した市区郡名
            var areaCd = document.getElementById('areaCd'+id).innerHTML;            //選択した市区郡コード
            //選択結果を親ウインドの指定箇所に設定する
            window.opener.document.getElementById('popPrefectureNameId').value    = removeNewline(prefNm);    //都道府県名
            window.opener.document.getElementById('popPrefectureCdId').value    = removeNewline(prefCd);    //都道府県コード
            window.opener.document.getElementById('popAreaNameId').value        = removeNewline(areaNm);    //市区郡名
            window.opener.document.getElementById('popAreaCdId').value            = removeNewline(areaCd);    //市区郡コード

            //ポップアップ選択フラグを[1]に
            window.opener.document.getElementById('popUpFlgId').value = "1";
            window.opener.document.getElementById('winSelect').innerHTML = '<span>'+prefNm+'<span>'+areaNm+'</span>';
            //コンボボックスの検索結果を非表示にする
            window.opener.document.getElementById('comboSelect').style.display='none';
        } catch (e) {
            alert("エラーが発生しました。n誠に恐れ入りますが、n元の入力画面の市区町村選択機能をご利用ください。");
        } finally {
            //必ずウインドを閉じる
            window.close();
        }
    }
};

function goBack() {
    document.backForm.submit();
}

//改行を削除
function removeNewline (text) {
   text = text.replace(/rn/g, "");
   text = text.replace(/n/g, "");
   return text;
}

ポップアップのhtml側はこんな感じ

<body onLoad="resulton()">
<div id="contents">
  <p id="searchResult">市区町村を検索-検索結果-</p>
  <p><span id="rowNum"></span>件の市区町村が該当します</p>
  <p>「選択」で親ウィンドウに選択結果が表示されます。</p>
  <div id="nowloading">
      <p>検索結果を表示中です・・・</p>
      <p><img src="ローディング.gif" /></p>
  </div>
  <div id="searchResultArea"></div>
  <table id="resultsBtnArea" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td id="prevBtn">
            <img id="prevOff" src="「前へ」デッドボタン.gif" width="70" height="21" alt="前へ"/>
            <a href="javascript:resultCnt(paging-=1);" id="prevOn" style="display:none;"><img src="/wi/img/gy1_toroku/btn-prevOn_001.gif" width="70" height="21" alt="前へ"/></a>
        </td>
        <td class="NumArea"><span id="rowsNum"></span>件中<span id="startNum"></span>~<span id="lastNum"></span>件表示</td>

        <td id="nextBtn">
            <img id="nextOff" src="「次へ」デッドボタン.gif" width="70" height="21" alt="次へ" style="display:none;"/>
            <a href="javascript:resultCnt(paging+=1);" id="nextOn"><img src="「次へ」ボタン" width="70" height="21" alt="次へ"/></a>
        </td>
     </tr>
  </table>
</div>
<ul id="pageBack">
  <li>
     <a href="javascript:goBack();">検索に戻る</a>
  </li>
</ul>

<form action="" method="post" name="backForm">
  <input type="hidden" name="prefectureCd" value="14"/>
  <input type="hidden" name="areaName" value="横浜市港北区"/>
  <input type="hidden" name="targetNo" value=""/>
</form>

</body>

かなり端折ったけど、大体こんなイメージで動くかな。
createElementでtableが作れないってところでハマったけど、
調べたらIE6の仕様だった。tbody作ったら解決。

Posted in Web-tips by prolography at 5月 13th, 2009 .
Tags: , , ,
海外現地オプショナルツアーなら【VELTRA(ベルトラ)】
ケンコーコム