問題
タブ操作に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
コメント