[ JQuery ] [ Ajaxでテスト01 ] [ Ajaxでテスト02 ]

Ajaxでテスト04

  • 2013-11-27,2013-12-03

　Ajaxでテスト03の内容をjQuery UIの機能でダイアログ表示してみます。

※ jquery.jsを利用する設定がスクリプトのサンプルに記載されていませんが、省略してあり、実際は必要です。



サンプル

郵便番号から住所を検索する部分は、前回のPHPコードをそのまま使います。
ダイアログ表示した時の、複数のボタンは今回は特に必要では無いのですが、ボタンを押したことにより作業を選んで実行出来る事が分かるという意味で表示しています。


実行結果

Open Dialog



この部分のソース 

<link rel="stylesheet" href="./jquery/css/redmond/jquery-ui-1.10.3.custom.css">
<script src="./jquery/js/jquery-1.9.1.js"></script>
<script src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
 
<style type="text/css">
<!--
 
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
 
 
-->
</style>
 
<script>
  $(function() {
    html_meisai(); 
 
    $("*[id^=id1-]").keyup(function() {
      // alert(this.id);
      id12 = this.id.split('-');
      code = $("#"+this.id).val();
      if (code.length==7 || code.length==0 ) {
        if (code != '') {
          kekka = search_code(code);
          // alert("Row:"+id12[0]+" / Code:"+code+" / Result:"+kekka);
          fld = kekka.split("\t");
          $("#id2-"+id12[1]).val(fld[6]+fld[7]+fld[8]);
          $("#id3-"+id12[1]).val(fld[3]+fld[4]+fld[5]);
        } else {
          $("#id2-"+id12[1]).val("");
          $("#id3-"+id12[1]).val("");
        }
      }
    });
 
    // Link to open the dialog
    $( "#dialog-link" ).click(function( event ) {
      // $("#meisai").html("<p>表示内容をここで設定</p>");
      //html_meisai();  // 開く度に書き直すとイベントが無効になる 
      $("#meisai" ).dialog( "open" );
      event.preventDefault();
    });
 
    $( "#meisai" ).dialog({
        autoOpen: false,
        width: 620,
        hide: "explode",
        title: "zipcode・・・郵便番号による住所検索",
        buttons: [
          {
            text: "OK",
            click: function() {
              $( this ).dialog( "close" );
              alert("OK");
            }
          },
          {
            text: "OK2",
            click: function() {
              $( this ).dialog( "close" );
              alert("OK2");
            }
          },
          {
            text: "OK3",
            click: function() {
              $( this ).dialog( "close" );
              alert("OK3");
            }
          },
          {
            text: "Cancel",
            click: function() {
              $( this ).dialog( "close" );
            }
          }
        ]
    });
 
 
  });
 
 
 
 
  // ---------------------------------------------
  function html_meisai() {
    html = "<table>\n";
    html += "<tr>";
    html += "<th>行</th>";
    html += "<th>コード</th>";
    html += "<th>住所</th>";
    html += "<th>よみ</th>";
    html += "</tr>";
    for (i=0; i<10; i++) {
      html += "<tr>";
 
      html += "<td class='r0'>"+(i+1)+"</td>";  // 行
      html += inp_text("id1-"+i,"7","r1");      // コード
      html += inp_text("id2-"+i,"30","r2");     // 住所
      html += inp_text("id3-"+i,"30","r3");     // よみ
      html += "</tr>\n";
    }
    html += "</table>\n";
 
   $("#meisai").html(html);
  }
 
  // ---------------------------------------------
  function inp_text(id, size, classN) {
     t = '<td class="'+classN+'"><input type="text" id="'+id
            +'" size="'+size+'" class="'+classN+'"></td>';
 
     return t;
  }
 
  // ---------------------------------------------
  function search_code(code) {
    var csv = $.ajax({
      url: "sample_data/testcsv005.php?code="+code,
      async: false
    }).responseText;
 
    return csv;
  }
 
 
</script>
<p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
  <div id="meisai"></div>