問題 × 解決策

セレクトボックスでAjaxを起動させる方法

問題

セレクトボックスでAjaxを起動させるには？

解決策

  • 今月の値を「Ym」形式で取得し、今月から任意の数の未来の月をセレクトボックスのoptionタグで生成します。
  • アクティブになったタブの値（年月の値）を「Ajax」のパラメータで、カレンダー表示用の外部ファイルへPOSTで渡し、その年月の値に応じた内容に切り替えます。

 

セレクトボックス操作とAjax処理を連動してカレンダーを表示

セレクトボックスでAjaxを起動させて、カレンダーを表示する記述例をご紹介します。

今回は以下の以下の3つの記事を応用していますので、ぜひこちらもご覧ください。

DEMOはこちら

  • ※セレクトボックスを選択する度に表示されるカレンダーが切り替わります。

HTML

AJAXで外部ファイルから読み込んだデータを表示させるための空の要素を用意します。
セレクトボックスは独自属性をjavascriptを介して設定したいため、javascriptで後ほど生成します。

<div class="ajax-box">
<div class="inner-box"></div>
</div>

CSS

AJAXの処理が完了するまで、ロード中であることを示すため、ローディング画像を表示させるためのcss設定を行います。

.ajax-box .inner-box .loading-box{
	display: block;
	height: 130px;
	background-image: url("ajax-loader.gif");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100px auto;
}
.ajax-box select.calselect{
	margin-bottom: 15px;
}

今月から5ヶ月分のセレクトボックスを生成する

今月から5ヶ月分のセレクトボックスを生成する記述例は以下になります。

$('.ajax-box').prepend('<form action="" method="post"><select name="calselect" class="calselect"></select></form>');
var current_date = new Date();
var current_y = current_date.getFullYear();
var current_m = current_date.getMonth();
var d = 1;
var dp_d = ("00" + d).slice(-2);
for( var i = 0; i <= 4; i++ ){
    var tabMonth = new Date(current_y, current_m + i);
    var dp_y = tabMonth.getFullYear();
    var dp_m = ("00" + (tabMonth.getMonth()+1)).slice(-2);
    var dp_ymd = dp_y + dp_m + dp_d;
    var dp_ym_label = dp_y + '年' + dp_m + '月';
    $('.ajax-box select.calselect').append('<option value="'+dp_ymd+'">'+dp_ym_label+'</option>');
}
  • まず「prepend」でselectタグを生成します。
  • 「new Date()」から年を「getFullYear()」、月を「getMonth()」で取得します。
  • 日は1を設定し、「(“00” + 日の値).slice(-2)」で0埋めしておきます。
  • for文で変数iを0から4まで5回、繰り返します。
  • 【繰り返し処理内】「new Date(current_y, current_m + i)」で今月から月の値に変数iをプラスして、再び年、月の値を取り出します。
  • 【繰り返し処理内】取り出した月の値を0埋めして、文字列として年、月、日（先ほどの1日としての値）を連結させます。
  • 【繰り返し処理内】そして「append」でoptionタグを生成します。
    生成する際に、先ほど連結させた値を独自属性「date」として設定します。

ポイント!

「new Date(current_y, current_m + 任意の数値)」で来月、再来月等の値を取得することができます。

セレクトボックス操作でAjax処理を行い、指定した月のカレンダーを表示する記述例

セレクトボックス操作でAjax処理を行い、指定した月のカレンダーを表示する記述例は以下になります。

function tabajax( date, actionkey ){
    jQuery.ajax({
        type: 'post',
        dataType:'text',
        cache: false,
        data: {
            'action': actionkey,
            'date': date
        },
        url: "calendar.php"
    }).done(function(data) {
        $('.ajax-box .inner-box').html(data);
        if(document.location.href.indexOf('?') > -1) {
            var url = document.location.href.substring(window.location.href.lastIndexOf('/') + 1).split('?');
            var url = url[0]+"?date="+date;
        }else{
            var url = document.location.href.substring(window.location.href.lastIndexOf('/') + 1).split('?');
            var url = url[0]+"?date="+date;
        }
        history.pushState(null,null,url);
    }).error(function(XMLHttpRequest, textStatus, errorThrown) {
        alert('error!!!');
        console.log("XMLHttpRequest : " + XMLHttpRequest.status);
        console.log("textStatus     : " + textStatus);
        console.log("errorThrown    : " + errorThrown.message);
    });
} // tabajax
// 初期読み込み時
$('.ajax-box .inner-box').html('<div class="loading-box"></div>');
if(location.search.match(/date=(.*?)(&|$)/)){
    var date = location.search.match(/date=(.*?)(&|$)/)[1];
}else{
    var date = $('.ajax-box select.calselect > option').eq(0).attr('value');
}
$('.ajax-box select.calselect > option').selected = false;
$('.ajax-box select.calselect > option').each( function(){
    if( $(this).attr('date') == date ){
        $(this).selected = true;
    }
});
var actionkey = "calendar";
tabajax( date, actionkey ); // AJAXの実行
// タブのクリック時
$('.ajax-box select.calselect').change(function(event) {
    //aリンクの動作を停止
    event.preventDefault();
    $('.ajax-box .inner-box').html('<div class="loading-box"></div>');
    var date = $(this).val();
    tabajax( date, actionkey ); // AJAXの実行
});

ポイント!

  • AJAX処理をユーザー定義関数に収めて、引数としてoptionタグのキー（日付の値）とアクションキーを設定します。
  • ページの読み込み時とセレクトボックスの選択時に先ほどのAJAX処理を詰め込んだユーザー定義関数を実行します。

外部ファイルの記述例

外部ファイルの記述例は以下になります。

calendar.php

<?php
function calendar(){
	date_default_timezone_set('Asia/Tokyo');
	include(dirname(__FILE__)."/../pahooCalendar.php");
	//pahooCalendarクラス
	$pcl = new pahooCalendar();
	$pcl->setLanguage('jp');
	if(!empty($_POST['date'])):
	$date = $_POST['date'] ;
	else:
	$date = date();
	endif;
	// 年月を取得する
	$ym_now = date( "Ym", strtotime($date) );
	$ym_label = date( "Y年m月", strtotime($date) );
	$y = substr($ym_now, 0, 4);
	$m = substr($ym_now, 4, 2);
	?>
	<h3 class="title-level03"><?php echo $ym_label; ?></h3>
	<table class="type03 section-sss small sp-t100p">
		<thead>
	<tr>
		<th scope="col"><span class="not">日</span></th>
		<th scope="col"><span class="not">月</span></th>
		<th scope="col"><span class="not">火</span></th>
		<th scope="col"><span class="not">水</span></th>
		<th scope="col"><span class="not">木</span></th>
		<th scope="col"><span class="not">金</span></th>
		<th scope="col"><span class="not">土</span></th>
	</tr>
		</thead>
		<tbody>
	<tr>
	<?php
	// 1日の曜日を取得
	$wd1 = date("w", mktime(0, 0, 0, $m, 1, $y));
	// その数だけ空白を表示
	for ($i = 1; $i <= $wd1; $i++) {
		echo "<td>　</td>";
	}
	// 1日から月末日までの表示
	$d = 1;
	while (checkdate($m, $d, $y)) {
		$date_d = sprintf('%02d', $d);
		$cal_text = $d;
		if($pcl->isHoliday($y,$m,$date_d)){
			echo '<td class="close holiday">'.$cal_text.'</td>';
			if(date("w", strtotime(date($y.$m.$date_d))) == 6){
				echo "</tr>";
				// 次の週がある場合は新たな行を準備
				if (checkdate($m, $d + 1, $y)) {
					echo "<tr>";
				}
			}
		}elseif(date("w", strtotime(date($y.$m.$date_d))) == 6){
			// 今日が土曜日の場合、週（行）を終了
			echo '<td class="sat">'.$cal_text.'</td>';
			echo "</tr>";
			// 次の週がある場合は新たな行を準備
			if (checkdate($m, $d + 1, $y)) {
				echo "<tr>";
			}
		}elseif(date("w", strtotime(date($y.$m.$date_d))) == 0){
			// 今日が日曜日の場合
			echo '<td class="sun">'.$cal_text.'</td>';
		}else{
			echo '<td>'.$cal_text.'</td>';
		}
		$d++;
	}
	// 最後の週の土曜日まで移動
	$wdx = date("w", mktime(0, 0, 0, $m + 1, 0, $y));
	for ($i = 1; $i < 7 - $wdx; $i++) {
		echo '<td><span class="not">&nbsp;</span></td>';
	}
	?>
	</tr>
		</tbody>
	</table>
<?php
} //calendar
if(!empty($_POST['action'])):
$actions = $_POST['action'];
$actions();
endif;
?>

ポイント!

  • 「$_POST[‘date’]」でoptionタグのキーの値を取得し、それを元に処理を行います。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

fifteen − 6 =

この記事のカテゴリを含む記事一覧

人気記事（月間）

「問題 × 解決策」
月別アーカイブ一覧

問題 × 解決策

カテゴリ一覧

「問題 × 解決策」
月別アーカイブ一覧