SQLの窓

2017年03月31日


Android Studio の .android .AndroidStudio2.x .gradle フォルダの場所を『ほぼ変更』する

変更した後、プロジェクトをロードすると、エラーが出たりしましたが、プロジェクト内のキャッシュが元のどこかを指してるようだったので、clean project(build) で対応できました。

前提条件

Windwos7 64ビットです。

検証環境は、Android Studio 2.3 ( Windows ) です。インストールファイルは、『android-studio-bundle-162.3764568-windows.exe Android SDK を含む(推奨)』です。

まずインストールフォルダを 『D:\Android Studio』にして、SDK フォルダを 『D:\sdk』で開始しています。

※ 過去バージョンのダウンロードはこちらです

結論から言うと

.AndroidStudio2.3 フォルダと、.gradle フォルダは消えてくれません。中身はそっくり D に移ったのですが、とてもバグっぽい挙動で勝手にフォルダを作成してしまうようです。

▼ こんな記録もありますし
Android Studio creates empty system directory in the default location after idea.system.path is set to a new location

.android フォルダは、インストール時に使うようで、それらしいファイルが残ってましたので、何かあった時の為に残していますが、詳しい検証・調査は行っていません。



.android フォルダは、エミュレータフォルダが作成される場所なので、それは完全に移動されています。

.android フォルダ

これはたぶん一般的なもので、ANDROID_SDK_HOME=D:\sdkhome という環境変数を作成して移動しました。D:\sdkhome は事前に作成して実行すると、設定する前に作成したエミュレータは AVD マネージャから見えなくなりました。元々のファイル郡は、.android\avd の中にありましたが、トラブルは嫌なので新規で作成しました。



※ エミュレータが作成されるので、ここが容量をとても喰うと思います。

.AndroidStudio2.3 フォルダ

これを実行するとこんなダイアログが出ました。



Android Studio がバージョンアップ時にいつも表示するアレです。


ここの中身を移動したい場合は、Android Studio\bin\idea.properties の中の設定を変更します
#
# *DO NOT* modify this file directly. If there is a value that you would like to override,
# please add it to your user specific configuration file.
#
# See http://tools.android.com/tech-docs/configuration
#
# Use ${idea.home.path} macro to specify location relative to IDE installation home.
# Use ${xxx} where xxx is any Java property (including defined in previous lines of this file) to refer to its value.
# Note for Windows users: please make sure you're using forward slashes (e.g. c:/idea/system).

#---------------------------------------------------------------------
# Uncomment this option if you want to customize path to IDE config folder. Make sure you're using forward slashes.
#---------------------------------------------------------------------
# idea.config.path=${user.home}/.AndroidStudio/config
idea.config.path=D:/sdkhome/idea/.AndroidStudio2.3/config

#---------------------------------------------------------------------
# Uncomment this option if you want to customize path to IDE system folder. Make sure you're using forward slashes.
#---------------------------------------------------------------------
# idea.system.path=${user.home}/.AndroidStudio/system
idea.system.path=D:/sdkhome/idea/.AndroidStudio2.3/system


idea.config.path と idea.system.path を直接変更しています。何も指定しないと、user.home は USERPROFILE 環境変数の値になるようです(${xxx} where xxx is any Java property)。で、その場所に、studio64.exe.vmoptions ファイルの中にある、-Didea.paths.selector=AndroidStudio2.3 と言う設定を使っていました。
#
# *DO NOT* modify this file directly. If there is a value that you would like to override,
# please add it to your user specific configuration file.
#
# See http://tools.android.com/tech-docs/configuration
#
-Xms256m
-Xmx1280m
-XX:ReservedCodeCacheSize=240m
-XX:+UseConcMarkSweepGC
-XX:SoftRefLRUPolicyMSPerMB=50
-da
-Djna.nosys=true
-Djna.boot.library.path=

-Djna.debug_load=true
-Djna.debug_load.jna=true
-Dsun.io.useCanonCaches=false
-Djava.net.preferIPv4Stack=true
-Didea.paths.selector=AndroidStudio2.3
-Didea.platform.prefix=AndroidStudio
-Didea.jre.check=true


これは、単純に文字列を結合するようです。-Didea.paths.selector=D:/sdkhome/idea/.AndroidStudio2.3 としたら、C:\Users\lightbox\.D:/sdkhome/idea/.AndroidStudio2.3 というパスでエラーが出ました。

idea.config.path と idea.system.path を指定した上で、-Didea.paths.selector=D:/sdkhome/idea/.AndroidStudio2.3 ならば、エラーは起こらずに .AndroidStudio2.3 フォルダは作成されません。が、これはたまたまエラー処理がスルーされただけなので、しないほうがいいでしょう。

面倒なので、idea.config.path と idea.system.path の指定のみにする事にしました。

.gradle フォルダ

これは、Android Studio の設定で指定します。



ただ、これも勝手に C:\Users\ユーザ名\.gradle\daemon\3.3 という空のフォルダを作成しちゃってますので注意して下さい。

参考にした記事

Changing IDE default directories used for config, plugins, and caches storage



タグ:Android Studio
posted by lightbox at 2017-03-31 18:53 | Comment(0) | 2017 Android Studio | このブログの読者になる | 更新情報をチェックする

2017年03月16日


IE11 で VBScript を使う場合の注意事項 ( 古い社内アプリ移行時必見 )

2015/07/31
この記事書いてから一年以上経過しましたが、問題なくシステムは動作しています。ただ、最近は『互換表示設定』によって自動的にうまく行く方向ですが、いくつかバリエーションがあるので、それは記事最後に記述します

追記(2017/03/16)
VBScript の スクリプト要素の置く位置で、VBScript をデフォルトにできるのは、<meta http-equiv="x-ua-compatible" content="IE=8"> までです(かつ互換表示設定で動いています)。IE=9、IE=10 ではデフォルトにできないです。IE9 以降のテクノロジを使うには、いっその事、VBScript 関連のオブジェクト処理を JavaScript で書くか、実行単位で language="VBScript" を書くかの選択になると思います。(ウチでは当分 IE8 で運用予定ですが)

※ さらに、自分の環境では開発者ツール開いてると何故かデフォルトにできないのが現状です
【2014年03月07日】
XP から Windows7 への移行がいずれ余儀なくされます。今、実際に移行作業中なのですが、元々は10年前に作成していたので、ここに書いて無い事以外にも注意事項がたくさんあります( 極端なのは document.all だったり、css の単位無し定義だったり )
しかし、IE11 はなにもしなければ、VBScript が動かなくなるので、Excel と連携するようなアプリが壊滅してしまいます。その際のテコ入れ時に知っておいたほうが幸せになれる内容です。 まず、以下のコードは JavaScript が IE のデフォルトのスクリプトなので、IE8 でもエラーになります。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<input type="button" value="実行" onclick='call alert("OK")'>
</body>
</html>

これは基本的な事ではありますが、IE のデフォルトのスクリプトを変更する方法がある事を知る為の事実の前振りでもあります。

最初は、この INPUT だけを IE11 でVBSCript 扱いするには以下のように記述します。
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<input type="button" value="実行" onclick='call alert("OK")' language="VBScript">
</body>
</html>

これは通常の Microsoft のドキュメントでも書かれていますが、これではデフォルトにはなりません。そこで、以下のようにして VBScript を IE のデフォルトスクリプトに変更します
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script language="VBScript"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<input type="button" value="実行" onclick='call alert("OK")'>
<input type="button" value="実行" onclick='alert("OK");'>
</body>
</html>

※ 11 行目はセミコロンがあるのでエラーになります


つまり、ページの最初に認識されるスクリプト要素が VBScript であれば、デフォルトが VBScript に変更されます。但し、X-UA-Compatible と両方書く場合は、X-UA-Compatible のほうが先でなければなりません。以下のコードは、IE8 のドキュメントモードに変更されずに、IE11 となり、そもそも VBScript が動作しません。
<html>
<head>
<script language="VBScript"></script>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<input type="button" value="実行" onclick='call alert("OK")'>
<input type="button" value="実行" onclick='alert("OK");'>
</body>
</html>



META 要素による、X-UA-Compatible の設定は、それより前に IE の判断の邪魔になるようなものがあると、設定しない動作になるので、X-UA-Compatible はできるだけ先頭にする必要があります。これは、VBScript 以外の対応においてもきちんと対応すべき重要な仕様です。

※ これに関して、Microsoft の開発者ツール(F12)のドキュメントに説明があります
【HTML1115】
一般に、"META" タグが "Script" または "Style" 宣言の後に置かれ、それによりページのドキュメント モードが修正されたことを表します。

X-UA-Compatible META タグをヘッダー内のできるだけ前の位置に移動します。"<title>" と charset の値の直後に配置することをお勧めします。
さらに、Quirks モード( 互換モード / IE6 の時代の過去の互換なので、正確には IE5 ) は、IE5 と指定すると設定されるようです。
<meta http-equiv="X-UA-Compatible" content="IE=5">

『互換表示設定』について



IEの、右上の歯車アイコンで開くメニューの中に、『互換表示設定』という項目がありますが、これは意図的にある条件にあてはまるページを IE8 より前のIE 互換で表示するものですが、その条件が大きく分けて2通りあります。

1) 登録したサイト
2) イントラネット

これによって自動的に古い IE とコンパチブルになるようになっていて、しかもこれで運用したほうがサーバーに渡されるユーザーエージェント文字が完全であるという事を最近確かめました。

そして、HTML の書かれ方によって、コンパチブルになるIE のバージョンが2段階になる事も今回確認しました。
( 他のパターンは未確認です )

1) <!DOCTYPE html> が書かれていると IE7 互換になる
2) 何も無い <html> 始まりだと、IE5(Quirks モード) 互換になる

いずれにしても、VBScript は昔どおり動作しますので、イントラネットで運用されていた旧システムは何もしなくてもほぼ動く事になっています。( 一年前は違ったはずですが・・・ )

関連する記事

IE11 でVBScript が動作しないので、x-ua-compatible を使用して Excel(Excel.Application) の処理を検証




posted by lightbox at 2017-03-16 15:23 | IE | このブログの読者になる | 更新情報をチェックする

2017年03月13日


jQuery UI の Datepicker Widget のオプション


デモページ

デモページでは、いろいろなオプションを設定した Datepicker のフィールドの動きを確認できます。これらのフィールドは、デフォルトのオプションとして以下のようなものを設定済みです。
var datepicker_option = {
	dateFormat: 'yy/mm/dd',
	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
	monthNames:  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	showMonthAfterYear: true,
	yearSuffix: '年',
	changeYear: true,
	showAnim: 'fadeIn',
	yearRange: "c-70:c"
}

このオプションは、日本語としてカレンダーを利用する為に最低限必要なものです。


※ ▼ コンボボックスの幅を以下で最適化しています
.ui-datepicker-month, .ui-datepicker-year {
	width: 70px!important;
}
yearRange: "c-70:c" のオプションは、c が現在の年を示す相対範囲指定です。デモページでは、2) cは当年 c-3:c+3 にあたります。そして、1) dateRangeなし は、そのオプションを削除したもので、その場合は "c-10:c+10" を指定したのと同じ事になります。 ▼ "c-3:c+3" ▼ jQuery を使用して、JSON オブジェクトのクローンを作成
	var datepicker_option1 = $.extend(true, {}, datepicker_option);
	delete datepicker_option1.yearRange;

	$("#date_picker1_fld").datepicker( datepicker_option1 );
※ デモで複数のオプション作成の為、$.extend を使用しています

altField, altFormat, appentText, autoSize

altField と altFormat は、alternate(代わりの) フィールドの定義です。altField で右横にあるフィールドを id で参照します。altFormat では、そのフィールドで表示するフォーマットを指定します(ここでは日本語を使用しています。)

さらに、appentText で、DatePicker フィールドの後ろにテキストを追加し、autoSize で jQuery UI にDatePicker フィールドの幅を調整させます。
	var datepicker_option3 = $.extend(true, {}, datepicker_option);
	datepicker_option3.altField  = "#date_picker3_fld_alt";
	datepicker_option3.altFormat  = "yy年mm月dd日";
	datepicker_option3.appendText  = " altFormat で日本語表現 ";
	datepicker_option3.autoSize = true;

	$("#date_picker3_fld").datepicker( datepicker_option3 );

※ 二番目のフィールドは固定で 120px を指定しており、3番目のフィールドが autoSize です。

ボタンでカレンダーを表示させる

通常では、フィールドにカーソルが移動するとカレンダーが表示されますが、それでは他の画面部分が隠されてしまって、エンドユーザが操作しづらい場合があります。そういう場合にボタンを追加してその操作を行う方法です。ここでは、その目的のために showOn = "button" と buttonText = "開く" を指定しています。(showOn では、both というオプションがありますが、それでは意味が無いので button のみの動作、また、buttonText では無く buttonImage で画像ボタンにする事もできます)

月を変更可

★重要 : 表示したい月表現を monthNamesShort = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"] のように設定する必要がありました

誕生日の指定等、連続していない年月の指定の為、月をコンボボックスに変更します。



※ ▼ コンボボックスの幅を以下で最適化しています
.ui-datepicker-month, .ui-datepicker-year {
	width: 70px!important;
}
※ 月を変更可にした場合、これをしておかないと、年と月が入りきらずに二段になってしまいます。 前後の月を表示して選択可能にする これは、現実のカレンダーのように、表示できる場合は前月の最後と次月の最初を表示して選択できるようにするものです。そのために showOtherMonths = true と selectOtherMonths = true を両方設定しています。 jQuery.ajax による送信処理
	// *************************************
	// 送信 <input type="submit">
	// *************************************
	$("#frm").submit( function(event){
		// 本来の送信処理はキャンセル
		event.preventDefault();

		// 入力部分をプロテクト
		$("fieldset").eq(0).prop("disabled", true);

		// エラーメッセージエリアをクリア
		$(".error").next().text( "" );

		// 結果の表示エリアを全てクリア
		$("#result").html( "" );


		// 新規送信用オブジェクト
		var formData = new FormData();

		formData.append("datepicker1", $("#date_picker1_fld").val() );
		formData.append("datepicker2", $("#date_picker2_fld").val() );
		formData.append("datepicker3", $("#date_picker3_fld").val() );
		formData.append("datepicker3_alt", $("#date_picker3_fld_alt").val() );
		formData.append("datepicker4", $("#date_picker4_fld").val() );
		formData.append("datepicker5", $("#date_picker5_fld").val() );
		formData.append("datepicker6", $("#date_picker6_fld").val() );

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,  // jQuery がデータを処理しないよう指定
			contentType: false   // jQuery が contentType を設定しないよう指定
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );
			options.info("送信処理が完了しました");

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
			options.info("送信処理を失敗しました");
		})
		.always(function() {

			// 入力部分のプロテクトを解除
			$("fieldset").eq(0).prop("disabled", false);
		})
		;


	} );



タグ:datepicker jquery
posted by lightbox at 2017-03-13 14:27 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2017年03月10日


FormData を使用して、jQuery で配列として PHP に送る

必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る では、select 要素を使用しましたが、jQuery の ajax と FormData を使用すれば、もっと単純に送る事ができます。

送信用データ作成部分は結局4行です
		// 新規送信用オブジェクト
		var formData = new FormData();

		// 送信フィールド作成
		$("#row1_fld option").each( function(){
			formData.append("ybp[]", $(this).val());
		});

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,
			contentType: false
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );
			options.info("処理が完了しました");

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
			options.info("アップロードに失敗しました");
		})
		.always(function() {

		})
		;


デモページ



ソースコードセットダウンロード

メインソースコード(view_main.php)
<?php
// *************************************
// 表示コントロール
// *************************************
$GLOBALS['title'] = "jQuery Ajax POST : 配列";
$GLOBALS['comment'] = 'ようこそ jQuery + Bootstrap(css) + mmenu + FormData + PHP';

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<title><?= $GLOBALS['title'] ?></title>

<?php require_once('std/libs.php') ?>

<link rel="stylesheet" href="std/mmenu.css">
<link rel="stylesheet" href="std/basic.css">

<style>
/* タイトル部分 */
.fields {
	width: 90px;
	font-size: 12px;
	/* vertical-align: middle!important; */
}

legend {
	font-size: 18px;
	padding-left: 6px;
}

</style>

<script>
<?php require_once('std/js.php') ?>
// -------------------------------------
// 画面とメッセージ
// -------------------------------------
var options = {
	row1 : { title : "複数データ<br>(Yahoo!テレビ番組表地域コード)", pcss : { width: "400px" }, attr: { size : 6 } },
	row_last : { title :"メッセージ" },
	error : function(message){
		$("#row_last").next().text( message );
		toastr.error(message);
	},
	info : function(message){
		$("#row_last").next().text( message );
		toastr.success(message);
	}
};

$(function(){

	$("#wrapper").css({"visibility":"visible", "margin-bottom": "0px"}); 
	// -------------------------------------
	// 固定テンプレート
	// -------------------------------------
	// 1) options による行とフィールドの設定
	// 2) Bootstrap 用 form-control クラスの追加
	$(".fields").each(function(){
		if ( options[ $(this).prop("id") ] ) {
			$(this).html( options[ $(this).prop("id") ].title );
			// 個別 css
			if ( options[ $(this).prop("id") ].css ) {
				$(this).next().find("input,select,textarea").css( options[ $(this).prop("id") ].css );
			}
			// 入力チェック用属性
			if ( options[ $(this).prop("id") ].attr ) {
				$(this).next().find("input,select,textarea").attr( options[ $(this).prop("id") ].attr );
			}
			// pc のみの css
			if ( options[ $(this).prop("id") ].pcss ) {
				if ( !$.isMobile ) {
					$(this).next().find("input,select,textarea").css( options[ $(this).prop("id") ].pcss );
				}
			}

		}
		$(this).next().find("input,select,textarea").addClass("form-control");
	});

	// 初期フォーカス
	setTimeout( function(){$('#row1_fld').focus();}, 100 );
	// -------------------------------------

	// *************************************
	// 送信ボタン
	// *************************************
	$("#frm").submit( function(event){
		// 本来の送信処理はキャンセル
		event.preventDefault();

		$("#post_check").modal();

	} );


	// **************************************
	// Bootstrap OK ボタン
	// **************************************
	$("#data_post").on("click", function(){

		// エラーメッセージエリアをクリア
		$(".error").next().text( "" );

		// 結果の表示エリアを全てクリア
		$("#result").html( "" );

		// **************************************
		// サーバへ送信
		// **************************************

		// 新規送信用オブジェクト
		var formData = new FormData();

		// 送信フィールド作成
		$("#row1_fld option").each( function(){
			formData.append("ybp[]", $(this).val());
		});

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,
			contentType: false
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );
			options.info("処理が完了しました");

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
			options.info("アップロードに失敗しました");
		})
		.always(function() {

		})
		;

	});

	// -------------------------------------
	// 固定テンプレート
	// -------------------------------------
	$("#mmenu_left").mmenu({
		navbar: {
			title: "メニュー"
		},
		offCanvas: {
			position  : "left",
			zposition : "next"
		}
	});
	// -------------------------------------


});

</script>
</head>
<body>

<div id="wrapper">
<script>
$("#wrapper").css( {"visibility": "hidden", "margin-bottom" : "1000px" } );
</script>

	<div id="head">
		<?php require_once('std/view_hamburger.php') ?>
		<div id="title"><?= $GLOBALS['title'] ?></div>
	</div>

	<div id="body">
		<form id="frm" class="form-inline">

			<fieldset>
				<legend></legend>
				<table class="table table-condensed">
			
					<tr>
						<td class="fields" id="row1"></td>
						<td>
							<select name="row1_fld" id="row1_fld">
								<option value="43">和歌山</option>
								<option value="44">奈良</option>
								<option value="45">滋賀</option>
								<option value="41">京都</option>
								<option value="40">大阪</option>
								<option value="42">兵庫</option>
							</select>
						</td>
					</tr>

					<tr>
						<td class="fields" id="row2"></td>
						<td>
							<input id="action" type="submit" class="btn btn-primary btn-sm" value="送信">
						</td>
					</tr>

					<tr>
						<td class="fields error" id="row_last"></td>
						<td></td>
					</tr>

				</table>

			</fieldset>

			<fieldset>
				<legend>結果</legend>
				<table id="result" class="table table-condensed">


				</table>

			</fieldset>

		</form>
	</div>

	<div id="comment">
	<?= $GLOBALS['comment'] ?>
	</div>

	<div class="modal fade" id="post_check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">確認</h4>
				</div>

				<div class="modal-body">
				送信しますか?
				</div>

				<div class="modal-footer">
					<button id="data_post" type="button" class="btn btn-default" data-dismiss="modal">OK</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal">キャンセル</button>
				</div>

			</div>
		</div>
	</div>

</div>


<?php require_once('unit_menu.php') ?>


</body>
</html>

※ jQuery + Bootstrap(css) + mmenu + FormData + PHP の総合テンプレートです


post_action.php
<?php
// *************************************
// キャラクタセット
// *************************************
header( "Content-Type: application/json; charset=utf-8" );
// *************************************
// キャッシュ無効
// *************************************
session_cache_limiter('nocache');
session_start();


// *************************************
// 処理
// *************************************


// *************************************
// PHP の結果を result キーで
// JSON としてブラウザに返す
// *************************************
print json_encode($_POST , JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT );

?>

※ 処理の結果は、開発者ツールのコンソールで確認して下さい。








posted by lightbox at 2017-03-10 23:04 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2017年03月09日


必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る

送信直前に onsubmit="return check_form();" で追加して、PHP がページを再表示したら元の状態に戻るというデータの送信方法です。

jQuery は、最初に option 要素を作って、その属性を設定して最後に appendTo で select に追加して行きます。PHP 対象なので、name="target[]" となっていますが、ASP(いまだに運用してるので) だと name="target" で Request.Form("target")(n) とかで参照できます。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

function check_form() {

	if ( !confirm("送信しますか?") ) {

		return false;

	}

	$("#target option").each( function(){

		$("<option></option>")
			.prop("selected", true)
			.val( $(this).val() )
			.appendTo( $("#send_target") )

	});

	return true;

}
</script>
</head>
<body>

<form method="post" onsubmit="return check_form();">

<input id="send" name="send" type="submit" value="send">

<select multiple id="send_target" name="target[]" style='display:none'>
</select>
<select id="target" size="3">
<option value="A001">テキスト1</option>
<option value="A002">テキスト2</option>
<option value="B001">テキスト3</option>
</select>


</form>

<pre>
<?php

print_r($_POST)

?>
</pre>
</body>
</html>




posted by lightbox at 2017-03-09 21:00 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり