問題 × 解決策

タブ操作にAjaxを利用するには

問題

タブ操作にAjaxを利用するには?

解決策

  • タブの操作に連動して「Ajax」を実行します。
  • アクティブになったタブの値を「Ajax」のパラメータで、外部ファイルへPOSTで渡し、その値に応じた内容に切り替えます。

 

タブ操作とAjax処理を連動

タブ操作でAjaxを活用し、そして選択されたタブに応じてURLを操作する記述例をご紹介します。

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

DEMOはこちら

  • タブを切り替える度にすぐ下のテキストが切り替わります。

HTML

AJAX処理を行うためのタブと、AJAXで外部ファイルから読み込んだデータを表示させるための空の要素を用意します。
タブには、AJAXの処理時のキーで使う用に独自属性「tab」を持たせます。

<div class="ajax-box">
	<ul class="tab-list clearfix">
		<li class="a" tab="a"><a href="#">A</a></li>
		<li class="b" tab="b"><a href="#">B</a></li>
		<li class="c" tab="c"><a href="#">C</a></li>
		<li class="d" tab="d"><a href="#">D</a></li>
		<li class="e" tab="e"><a href="#">E</a></li>
	</ul>
	<div class="inner-box"></div>
</div>

CSS

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

.tab-list{
	margin-bottom: 15px;
	letter-spacing: -.4em;
}
.tab-list > li{
	display: inline-block;
	vertical-align: middle;
	width: 18%;
	margin: 0 1%;
	letter-spacing: normal;
}
.tab-list > li:first-child{
	margin-left: 0;
}
.tab-list > li:last-child{
	margin-right: 0;
}
.tab-list > li a{
	display: block;
	padding: 10px;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	background-color: #F15A24;
	border: 1px solid #F15A24;
}
.tab-list > li a:hover,
.tab-list > li.on a{
	color: #F15A24;
	background-color: #ffffff;
}
.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処理を連動させる記述例

タブ操作とAjax処理を連動させる記述例は以下になります。

if($('.ajax-box').length){
	// AJAX用関数
	function tabajax( tab, actionkey ){
		jQuery.ajax({
			type: 'post',
			dataType:'text',
			cache: false,
			data: {
				'action': actionkey,
				'tab':tab
			},
			url: "tab.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]+"?tab="+tab;
			}else{
				var url = document.location.href.substring(window.location.href.lastIndexOf('/') + 1).split('?');
				var url = url[0]+"?tab="+tab;
			}
			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(/tab=(.*?)(&|$)/)){
		var tab = location.search.match(/tab=(.*?)(&|$)/)[1];
	}else{
		var tab = $('.ajax-box .tab-list > li').eq(0).attr('tab');
	}
	$('.ajax-box .tab-list > li').removeClass('on');
	$('.ajax-box .tab-list > li').each( function(){
		if( $(this).attr('tab') == tab ){
			$(this).addClass('on');
		}
	});
	var actionkey = "tabswitch";
	tabajax( tab, actionkey ); // AJAXの実行
	// タブのクリック時
	$('.ajax-box .tab-list > li a').click(function(event) {
		//aリンクの動作を停止
		event.preventDefault();
		$('.ajax-box .tab-list > li').removeClass('on');
		$(this).closest('li').addClass('on');
		$('.ajax-box .inner-box').html('<div class="loading-box"></div>');
		var tab = $(this).closest('li').attr("tab");
		tabajax( tab, actionkey ); // AJAXの実行
	});
}

ポイント!

  • AJAX処理をユーザー定義関数に収めて、引数としてタブのキーとアクションキーを設定します。
  • ページの読み込み時とタブのクリック時に先ほどのAJAX処理を詰め込んだユーザー定義関数を実行します。

外部ファイルの記述例

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

tab.php

<?php
function tabswitch(){
	if(!empty($_POST['tab'])):
	$tab = $_POST['tab'];
	endif;
	echo "現在選択されているタブは「".$tab."」です。";
} //tabswitch
if(!empty($_POST['action'])):
$actions = $_POST['action'];
$actions();
endif;
?>

ポイント!

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

参照

【$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/ajax/ajax

【JavaScriptでURLを操作するメモ – Qiita】
https://qiita.com/PianoScoreJP/items/fa66f357419fece0e531

コメント

コメントを残す

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

3 × 1 =

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

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