jQuery 特定の要素が存在するかどうかを判別
特定の要素が存在するかどうか「.length」と「.size()」を使った判別方法がある。
以下、ID「#sample」が存在するかどうかを判別するサンプルコード
＃.lengthを使った判別方法
存在する場合
$(function(){
if($('#sample').length){
//「＃sample」が存在する場合の処理
}
});
存在しない場合
$(function(){
if(!$('#sample').length){
//「＃sample」が存在しない場合の処理
}
});
＃.size()を使った判別方法
存在する場合
$(function(){
if($('#sample').size()){
//「＃sample」が存在する場合の処理
}
});
存在しない場合
$(function(){
if(!$('#sample').size()){
//「＃sample」が存在しない場合の処理
}
});
jQueryプラグイン Tablesorter＃テーブルの行を並び替える
jQueryプラグイン「Tablesorter」を使えば、簡単にソート機能が追加できる。
GitHub - christianbach/tablesorter: Flexible client-side table sortingからjquery.tablesorter.min.jsファイルをダウンロードして、jsディレクトリに設置する。
htmlファイル内
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
ソートの状況によって、th要素には以下のクラスが付与される
- 並び替え可能なヘッダーのth要素にはheaderクラスが付与される
- 昇順に並び替えると、その列のth要素にはheaderSortDownクラスが付与される
- 降順に並び替えると、その列のth要素にはheaderSortUpクラスが付与される
＃サンプルコード
jsファイル
$(function(){
//テーブルソート
$('#prefTable').tablesorter({
// 1行間隔で行の背景色を変更する
// tr要素のクラスにevenとodd が交互に付与される
widgets:['zebra'],
// ソート初期条件[(列番号 一番左の列が0),(昇順:0 降順:1)]で指定
sortList:0,1,
// 指定列のソート無効化
// 列番号で列を指定して、sorter:falseで無効化
headers:{
3:{sorter:false}
}
});
});
htmlファイル
<html> <head> <title>Laravel</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapi.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script> <script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script> <script type="text/javascript" src="/js/form.js"></script> <style> <!-- #prefTable th,#prefTable td{ padding: 3px 18px; } #prefTable th{ text-align: left; } #prefTable tr.odd td { background-color:#f0f0f6; } #prefTable th.header { background: url('/images/bg.gif') right center no-repeat; } #prefTable th.headerSortUp { background: url('/images/asc.gif') right center no-repeat; } #prefTable th.headerSortDown { background: url('/images/desc.gif') right center no-repeat; } --> </style> </head> <body> <table id="prefTable"> <thead> <tr> <th>#</th> <th>都道府県</th> <th>フリガナ</th> <th>ふりがな</th> <th>ローマ字</th> </tr> </thead> <tbody> <tr> <td>08</td> <td>茨城県</td> <td>イバラキケン</td> <td>いばらきけん</td> <td>ibaraki</td> </tr> <tr> <td>09</td> <td>栃木県</td> <td>トチギケン</td> <td>とちぎけん</td> <td>tochigi</td> </tr> <tr> <td>10</td> <td>群馬県</td> <td>グンマケン</td> <td>ぐんまけん</td> <td>gunma</td> </tr> </table> </body> </html>
Ajax ファイルのアップロードと削除
環境：Laravel5、JQuery
jsファイル
$(function(){
//ファイルのアップロード
$('#files').on("change",function(){
// ファイル情報を取得
var files = this.files;
// FormDataオブジェクトを用意
var fd = new FormData();
// ファイルの個数を取得
var filesLength = files.length;
// ファイル情報を追加
for (var i = 0; i < filesLength; i++) {
fd.append("files[]", files[i]);
}
$.ajax({
//GET,POST,PUT,DELETEなど
type: 'POST',
url: '/form/upload',
data: fd,
dataType:'json',
processData: false,
contentType: false,
//laravelトークン対策
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
}).done(function(data,textStatus,jqXHR){
for(i=0;i<data.length;i++){
$('#file_list').append('<p id="file'+i+'"><span>'+data[i]+'</span><input type="hidden" name="attchmnt[]" value="'+data[i]+'"> <input type="button" value="削除"></p>');
delfile(i);
}
$('#files').remove();
alert('ファイルをアップロードしました。');
}).fail(function(jqXHR,textStatus,errorThrown){
//失敗時処理
alert('ファイルのアップロードに失敗しました。');
}).always(function(jqXHR,textStatus){
//共通処理
});
});
//ファイルの削除
function delfile(i){
$(document).on(
"click",
"#file"+i,
function(){
var filename=$('#file'+i+' span').text();
$.ajax({
type:"POST",
url:"/form/delfile",
data:{
'delfile':filename
},
//laravelトークン対策
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
}).done(function(data,textStatus,jqXHR){
$('#file'+i).remove();
if(!$('#file_list p').length){
$('form').append('<input type="file" name="files" id="files" multiple="multiple">');
}
alert('ファイルを削除しました。');
}).fail(function(jqXHR,textStatus,errorThrown){
//失敗時処理
alert('ファイルの削除に失敗しました。');
}).always(function(jqXHR,textStatus){
//共通処理
});
}
);
}
});
htmlファイル
<html> <head> <title>Laravel</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapi.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script> <script type="text/javascript" src="/js/form.js"></script> <style> </style> </head> <body> <h1>ファイルアップロード</h1> <div id="file_list"> </div> <form action="" method="POST" enctype="multipart/form-data"> <input type="file" name="files" id="files" multiple="multiple"> </form> </body> </html>
PHPデバッグ環境の構築（Xdebug）
１．以下のURLにアクセスする
Xdebug: Downloads
２．PHPのバージョン、PC環境に応じてダウンロードするファイルを選択する
例）PHP 7.0 VC14 TS (32 bit)
３．<XAMPPディレクトリ>\php\extにダウンロードしたファイルをコピーする
４．<XAMPPディレクトリ>\php\php.iniを開いて以下のコードを追加する
zend_extension = "C:\pleiades\xampp\php\ext\php_xdebug.dll"
xdebug.profiler_enable = 1
xdebug.remote_enable = 1
５．XAMPPのApacheを再起動し、phpinfo()でXdebugが追加になっていることを確認
----以下、Eclipseでの設定
６．Eclipseの［ウィンドウ］-［設定］-［PHP］-［PHP実行可能ファイル］
実行ファイルを選択して［編集］-［デバッガー］をXdebugにする
７．プロジェクトを右クリックして、［デバッグ］-［デバッグの構成］
［PHPWebアプリケーション］を右クリックして新規追加
８．［サーバー］タブの［構成］をクリックして［ベースURL］をhttp://localhost:(ポート番号)/にする
９．［ウィンドウ］-［設定］-［一般］-［Webブラウザ］で「外部Webブラウザを使用」にする
例）Chrome
※使用したい外部Webブラウザがリストにない場合は、「新規」ボタンから作成する
１０．［デバッグ］ボタンを押して実行（XAMPPも起動しておく）
Eclipseプラグイン MakeGood導入手順
１．Eclipseの［ヘルプ］-［新規ソフトウェアのインストール］
２．「作業対象」に「http://eclipse.piece-framework.com/」と入力
３．関連するプラグイン(Make Good、Piece Framework、テスト)にチェックを入れて「次へ」
４．以下、ライセンス同意して、Eclipseを再起動
５．Eclipseの［ウィンドウ］-［設定］-［PHP実行可能ファイル］を設定する
６．Eclipseの［ウィンドウ］-［設定］-［デバッグ］を設定する
７．PHPプロジェクトを右クリックしてMakegoodの設定を行う
・PHPUnitを選択する
・プリロードスクリプトを設定する(例：/laravel/bootstrap/autoload.php)
※Laravelの場合、phpunit.xmlのbootstrapに記載されているバスを選択するとよい
＃参考サイト
PHPの開発環境を構築する（その4）： PHPUnit＋MakeGoodを使う | 悠雀堂
PHPUnitをEclipseから実行できるプラグイン「MakeGood」が便利です | アライドアーキテクツ エンジニアブログ
XAMPPバージョンアップ方法
１．以下のサイトにアクセスする
XAMPP | SourceForge.net
２．PC環境、PHP環境に合わせてexeファイルをダウンロード、インストールする
例）/XAMPP Windows/7.0.9/xampp-win32-7.0.9-2-VC14-installer.exe
３．以下に保存する（保存先は任意）
例）C:\xampp
４．Apacheのhttd.confを追加・変更する（ポート番号など必要があれば）
例）81番ポート、ドキュメントルート/xampp/public_html
※デフォルトで設定してある80番ポートの設定は変更しなくてよい
Listen 81
<VirtualHost *:81>
DocumentRoot "/xampp/public_html"
</VirtualHost>
<Directory "/xampp/public_html">
Options All
AllowOverride All
Require all granted
</Directory>
５．XAMPPのApacheを実行、画面表示されることを確認する
例）http://localhost:81/
Laravel＃ユーザ認証後のリダイレクトURLの設定変更
環境：Laravel5.0
C:\pleiades\xampp\blog\vendor\laravel\framework\src\Illuminate\Foundation\Auth\
AuthenticatesAndRegistersUsers.phpのpostLogin、redirectPath、getLogoutをC:\pleiades\xampp\blog\app\Http\Controllers\Auth\AuthController.phpにオーバーライドする。
［設定例］
public function postLogin(Request $request)
{
$this->validate($request, [
'email' => 'required|email', 'password' => 'required',
]);
$credentials = $request->only('email', 'password');
if ($this->auth->attempt($credentials, $request->has('remember')))
{
return redirect()->intended($this->redirectPath());
}
return redirect($this->loginPath())
->withInput($request->only('email', 'remember'))
->withErrors([
'email' => $this->getFailedLoginMessage(),
]);
}
public function redirectPath()
{
if (property_exists($this, 'redirectPath'))
{
return $this->redirectPath;
}
return property_exists($this, 'redirectTo') ? $this->redirectTo : '/form/userlist'; //認証後のリダイレクト先のURL
}
public function getLogout(){
$this->auth->logout();
return redirect('/auth/login'); //ログアウト後のリダイレクト先URL
}
