$.ajax({
url: '/xxx/example1.xxx',// ソースコードへのパス
cache: false,
dataType: "text",
processData : false,
contentType : false,
success: function(txt, type) {
// XSS対策
txt=txt.replace(/</g,'<');
txt=txt.replace(/>/g,'>');
var outElm = $('#xxx');// ソースコードの出力先
outElm.html(txt);
outElm.show();
},
error: function(xmlHttpRequest, textStatus, errorThrown){
console.log(xmlHttpRequest.responseText);
alert(textStatus);
}
});
<script>
function test1(){
var keyCode = window.event.keyCode;
console.log(keyCode);
if(keyCode == 13){
alert('Enterキーが押されました。');
}
}
</script>
<div onkeypress="test1()" style="width:200px;height:200px;background-color:#eaf0fb">
DIV要素にonkeypressを組み込んでも、イベントは発動しない。
</div>
<input type="text" value="" onkeypress="test1()" />
<aside>テキストボックスにフォーカスを当ててEnterを押してください。</aside>
ソースコード :check() メソッド
チェンジイベントデータからアップロードファイルのバリデーションを行う
<script src="jquery-1.11.1.min.js"></script>
<script src="UploadFileValidation.js"></script>
<script>
$( function() {
// アップロードファイルのバリデーションクラスを生成する。
var upFileValid = new UploadFileValidation();
//ファイルアップロードイベント
$('#file1').change(function(e) {
// アップロードファイルのバリデーション
var valid_res = upFileValid.check(e,['png','jpg','jpeg'],['image/png','image/jpeg']);
if(valid_res){
alert(valid_res);
return;
}
// ～ 省略 ～
});
</script>
<input id="file1" type="file" name="file1" multiple />
ソースコード :checkImage() メソッド
画像用 | チェンジイベントデータからアップロードファイルのバリデーションを行う
<script src="jquery-1.11.1.min.js"></script>
<script src="UploadFileValidation.js"></script>
<script>
$( function() {
// アップロードファイルのバリデーションクラスを生成する。
var upFileValid = new UploadFileValidation();
//ファイルアップロードイベント
$('#file1').change(function(e) {
// アップロードファイルのバリデーション
var valid_res = upFileValid.checkImage(e);
if(valid_res){
alert(valid_res);
return;
}
// ～ 省略 ～
});
</script>
<input id="file1" type="file" name="file1" multiple />
ソースコード :checkFileObjForImg() メソッド
画像用 | ファイルオブジェクトからアップロードファイルのバリデーションを行う
<script src="jquery-1.11.1.min.js"></script>
<script src="UploadFileValidation.js"></script>
<script>
$( function() {
// アップロードファイルのバリデーションクラスを生成する。
var upFileValid = new UploadFileValidation();
//ファイルアップロードイベント
$('#file1').change(function(e) {
var files = e.target.files;
var oFile = files[0];
// アップロードファイルのバリデーション
var valid_res = upFileValid.checkImage(oFile);
if(valid_res){
alert(valid_res);
return;
}
// ～ 省略 ～
});
</script>
<input id="file1" type="file" name="file1" multiple />
ソースコード :checkFileObject() メソッド
ファイルオブジェクトからアップロードファイルのバリデーションを行う
<script src="jquery-1.11.1.min.js"></script>
<script src="UploadFileValidation.js"></script>
<script>
$( function() {
// アップロードファイルのバリデーションクラスを生成する。
var upFileValid = new UploadFileValidation();
//ファイルアップロードイベント
$('#file1').change(function(e) {
var files = e.target.files;
var oFile = files[0];
// アップロードファイルのバリデーション
var valid_res = upFileValid.checkFileObject(oFile,['png','jpg','jpeg'],['image/png','image/jpeg']);
if(valid_res){
alert(valid_res);
return;
}
// ～ 省略 ～
});
</script>
<input id="file1" type="file" name="file1" multiple />
/**
* オブジェクトをソートする
* @date 2016-12-19
*/
$(function(){
data=[
{'id':1,'name':'yagi','value1':103},
{'id':2,'name':'kani','value1':104},
{'id':3,'name':'same','value1':102},
{'id':4,'name':'wasi','value1':100},
{'id':5,'name':'gori','value1':101},
{'id':6,'name':'roba','value1':105},
{'id':7,'name':'semi','value1':106},
{'id':8,'name':'tako','value1':107},
{'id':9,'name':'hebi','value1':1000},
{'id':10,'name':'kame','value1':108},
];
// データをソートする
data = sortData(data,'value1','asc');
console.log(data);
});
/**
* データをソートする
*
* @note
* データはObject型エンティティの配列である。
*
* @param data データ
* @param key エンティティのフィールド(プロパティ）
* @param order 並び順 asc:昇順, desc:降順
* @return ソート後のデータ
*/
function sortData(data,field,order='asc'){
if(order=='asc'){
data.sort(function(a,b){
if(a[field] < b[field]){
return -1;
}else if(a[field] > b[field]){
return 1;
}
return 0;
});
}
else if(order=='desc'){
data.sort(function(a,b){
if(a[field] < b[field]){
return 1;
}else if(a[field] > b[field]){
return -1;
}
return 0;
});
}
return data;
}
var data=[
{'id':1,'name':'yagi','value1':103},
{'id':2,'name':'kani','value1':104},
{'id':3,'name':'same','value1':102},
{'id':4,'name':'wasi','value1':100},
];
var tblHtml = createHtmlTable(data);
$('#res1').html(tblHtml);
/**
* エンティティリスト型のデータからHTMLテーブルを生成
* @param data エンティティリスト型のデータ
* @return string HTMLテーブルのHTMLソース
*/
function createHtmlTable(data){
if(data.length==0){
return "";
}
var html = "<table class='tbl2'>";
// 0件目のエンティティからtheadを作成
html += "<thead><tr>";
var ent0 = data[0];
for(var field in ent0){
html += "<th>" + field + "</th>";
}
html += "</tr></thead>";
// tbodyの部分を作成
for(var i in data){
var ent = data[i];
html += "<tr>";
for(var f in ent){
html += "<td>" + ent[f] + "</td>"
}
html += "</tr>";
}
html+= "</table>";
return html;
}
使い方
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-1.11.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="ExchangeTr.js"></script>
<script type="text/javascript">
var exchangeTr;
$(function(){
exchangeTr = new ExchangeTr({
'tbl_slt':'#tbl1',
});
});
function exchageTrRap(btnElm){
exchangeTr.showForm(btnElm);
}
</script>
------ any code ---------
<table id="tbl1" class="table">
<thead>
<tr><th>順番</th><th>コード</th><th>名前</th><th>入替</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>neko</td><td>猫</td><td><input type="button" value="入替" onclick="exchageTrRap(this)" /></td></tr>
<tr><td>2</td><td>yagi</td><td>山羊</td><td><input type="button" value="入替" onclick="exchageTrRap(this)" /></td></tr>
<tr><td>3</td><td>same</td><td>鮫</td><td><input type="button" value="入替" onclick="exchageTrRap(this)" /></td></tr>
<tr><td>4</td><td>wasi</td><td>鷲</td><td><input type="button" value="入替" onclick="exchageTrRap(this)" /></td></tr>
<tr><td>5</td><td>goki</td><td>御器</td><td><input type="button" value="入替" onclick="exchageTrRap(this)" /></td></tr>
</tbody>
</table>
入替後コールバック
行を入替後に実行するコールバックを指定することができる。
var exchangeTr;
$(function(){
exchangeTr = new ExchangeTr({
'tbl_slt':'#tbl1',
},afterCallBack);
});
function exchageTrRap(btnElm){
exchangeTr.showForm(btnElm);
}
// 入替後のコールバック関数
function afterCallBack(param){
console.log('from_row_index =' + param['from_row_index']);
console.log('to_row_index =' + param['to_row_index']);
}
<script>
var vals = [];
function chg_test(){
for(var i=0; i <$('#animals option').length; i++) {
if ($($('#animals option')[i]).prop('selected') ) {
if (!vals.includes(i)) {
vals.push(i);
}
} else {
if (vals.includes(i)) {
vals.splice(vals.indexOf(i), 1);
}
}
}
console.log(vals);
}
</script>
<select id="animals" size="4" multiple onchange="chg_test()" >
<option value="0">0 ヤンバルテナガコガネ</option>
<option value="1">1 ケナガネズミ</option>
<option value="2">2 ヤシガニ</option>
<option value="3">3 オオサンショウウオ</option>
<option value="4">4 タヌキ</option>
<option value="5">5 アカネコ</option>
<option value="6">6クロイヌ</option>
<option value="7">7 シマドジョウ</option>
</select>
/**
* Ajax送信データの実体参照エスケープ
*
* @note
* 対応している実態参照→ < > & &
*
* @param any data エスケープ対象 :文字列、オブジェクト、配列を指定可
* @returns エスケープ後
*/
function _escapeForAjax(data){
if (typeof data == 'string'){
if ( data.indexOf('&') != -1) {
data = data.replace(/</g,'<').replace(/>/g,'>').replace(/&/g,'&');
return encodeURIComponent(data);
}else{
return data;
}
}else if (typeof data == 'object'){
for(var i in data){
data[i] = _escapeForAjax(data[i]);
}
return data;
}else{
return data;
}
}
<div id="xxx">いろは</div>
<script>
$(function(){
var text = $('#xxx')[0].outerHTML;
console.log(text); // 出力→ <div id="xxx">いろは</div>
});
</script>