js系 | 1歩前進 - Webシステム備忘録

2021-11-012021-10-29

[CakePHP]ダウンロード後にページをリロードしたい

データをダウンロード処理したときにフラグを立てるなど色々処理をしている。
ダウンロード後にリダイレクトかリロードをしたいと思った。

ダウンロードの処理でheaderを使っているのでリダイレクトのLocationが使えない。

そこでJSで別ウインドを開いて、そこにダウンロード処理を渡す。
その処理の後にページをリロードする処理をしてあげるとOK。

$(function(){
	// ダウンロードボタン
	$('#order_export_btn').on('click', function() {
		window.open('<?= $this->Url->build(["controller" => "Hoge","action" => "download"], ['fullBase' => true]); ?>');// URLを開く
		setTimeout(reload, 1000);// 1秒後にリロード実行
	});
});

// ページリロードの処理
var reload = function(){
	location.reload(true);
};

$(function(){

// ダウンロードボタン

$('#order_export_btn').on('click', function() {

window.open('<?= $this->Url->build(["controller" => "Hoge","action" => "download"], ['fullBase' => true]); ?>');// URLを開く

setTimeout(reload, 1000);// 1秒後にリロード実行

});

// ページリロードの処理

var reload = function(){

location.reload(true);

};

リダイレクトしたい場合はreloadのところをhrefにするとOK

// リダイレクトの処理
var reload = function(){
	location.href = "https://zero-one-x.com/";
};

// リダイレクトの処理

var reload = function(){

location.href = "https://zero-one-x.com/";

};

2021-10-292021-10-29

郵便番号入力で住所を抽出してくれるJS

AjaxZip3の処理を変更した話
大変便利なライブラリ
https://github.com/ajaxzip3/ajaxzip3.github.io

下記のようにinputのonKeyUpを使った場合
意図しない動きをすることがあった。

<input type="text" id="zip_code1" name="zip_code1"
	onKeyUp="AjaxZip3.zip2addr(this, 'zip_code2', 'address1', 'address1');"
	maxlength="3">

<input type="text" id="zip_code2" name="zip_code2"
	onKeyUp="AjaxZip3.zip2addr('zip_code1', this, 'address1', 'address1');"
	maxlength="4">

<input type="text" id="zip_code1" name="zip_code1"

onKeyUp="AjaxZip3.zip2addr(this, 'zip_code2', 'address1', 'address1');"

maxlength="3">

<input type="text" id="zip_code2" name="zip_code2"

onKeyUp="AjaxZip3.zip2addr('zip_code1', this, 'address1', 'address1');"

maxlength="4">

郵便番号を前半、後半の二つに分けている。
前半3桁。後半4桁です。

前半3桁、後半4桁入力すると住所欄に住所が入力される。
というのは正常な動き。

これを下記の条件にすると動きが変わる

「全角入力モードにした状態で前半3桁に7桁の郵便番号を入力するとonkeyupが作動し住所が入力される。」

入力確定前にonkeyupが動作しています。
inputはmaxlengthで3にしているので3桁しか入力されない。

onKeyUpはやめてjQueryで制御することにする。

$("#zip_code1,#zip_code2").on("keyup", function(){
	if($("#zip_code1").val() != "" && $("#zip_code2").val() != ""){
		AjaxZip3.zip2addr("zip_code1", "zip_code2",'address1','address1', '', '', false);
	}
});

$("#zip_code1,#zip_code2").on("keyup", function(){

if($("#zip_code1").val() != "" && $("#zip_code2").val() != ""){

AjaxZip3.zip2addr("zip_code1", "zip_code2",'address1','address1', '', '', false);

}

});

これで確定後の値で動作になるので意図した動きになりました。

2018-08-22

JSのslideDownやslideToggleがうまく動かないとき

slideDownやslideToggleがうまく動かないとき

スライドするところがshow()を使ったときみたいにパッと表示される場合

表示する要素がblockでなければなりません。

inlineだとパッと表示されます。

これの解決に2時間ほどかかりました・・・

はぁ。

2018-07-13

JavaScriptで日付の取得

JSでの日付の取得など備忘録

var now = new Date();// 現在の日時を取得

1	var now = new Date();// 現在の日時を取得

結果：Date 2018-07-14T08:00:35.771Z

このままだと使いづらいので下記のように個別で取得します。

var y = now.getFullYear();// 年を取得
var m = now.getMonth() + 1;// 月を取得(1月は0になるため+1する)
var d = now.getDate();// 日を取得
var h = now.getHours();// 時間を取得
var mi = now.getMinutes();// 分を取得
var s = now.getSeconds();// 秒を取得

var y = now.getFullYear();// 年を取得

var m = now.getMonth() + 1;// 月を取得(1月は0になるため+1する)

var d = now.getDate();// 日を取得

var h = now.getHours();// 時間を取得

var mi = now.getMinutes();// 分を取得

var s = now.getSeconds();// 秒を取得

ifなどで判定する場合はちょっと注意
数値型なので+すると足し算をしてしまうので、文字列に変換(toString())してから結合させる

if(y.toString()+m.toString()+d.toString() === "20180714"){
	// 処理をゴニョゴニョ
}

if(y.toString()+m.toString()+d.toString() === "20180714"){

// 処理をゴニョゴニョ

}

2018-06-152018-06-15

[JQuery]data属性の取り扱い

HTML5からdataという独自属性が使えるようになりました。
data-* とdata-の後に好きな名前と値を設定が出来ます。

(例)

<div data-no="1" data-val="mokuji">目次</div>
<div data-no="2" data-val="mokuteki">目的について</div>

1 2	<div data-no="1" data-val="mokuji">目次</div> <div data-no="2" data-val="mokuteki">目的について</div>

その独自属性をjqueryで取得する方法。

data()を使って内容を取得する。
取得したデータは連想配列として取得します。

$(this).data();

1	$(this).data();

結果

{"no":"1", "val":"mokuji"}

1	{"no":"1", "val":"mokuji"}

個別に指定でひとつだけ取得も可

$(this).data("no");

1	$(this).data("no");

結果

{"no":"1"}

1	{"no":"1"}

独自に値が設定できるので便利かも～

2018-02-062018-06-15

[JQuery]動的に生成したHTMLでclickなどを実行

動的に生成したHTMLに対してclickなどのイベントを実行させる。

JSなどで動的に生成したHTMLには下記のような書き方では実行できません。

$(“.btn”).on(“click”, function(){
　　alert(“OK”);
});

上記JSがセットされたときに動的に生成したHTMLが見つからない場合
正常に動いてくれないのです。

そういう場合は下記のように記述します。

$(document).on("click", ".btn", function(){
	alert("OK");
});

$(document).on("click", ".btn", function(){

alert("OK");

});

onの第2引数に追加します。

よく忘れるので備忘録的な…

2017-12-05

非同期通信$.ajaxの今と昔

非同期通信で色々調べていたら出てきたやつ

$.ajax({
	url:"http://xxxx/a.php",
	type:"GET",
	dataType:"json",
	success: function(data){
		console.log("OK");
	},
	error: function(XMLHttpRequest, textStatus, errorThrown) {
		console.log("ERROR");
	},
	complate: function(data){
		consolo.log("END");
	}
});

$.ajax({

url:"http://xxxx/a.php",

type:"GET",

dataType:"json",

success: function(data){

console.log("OK");

error: function(XMLHttpRequest, textStatus, errorThrown) {

console.log("ERROR");

complate: function(data){

consolo.log("END");

}

});

上記これはjQueryのバージョンが1.5以前の古いタイプ

新しいタイプは下記

$.ajax({
	url:"http://xxxx/b.php",
	type:"GET",
	dataType:"json",
})
.done(function(data){
	console.log("OK");
})
.fail(function(jqXHR, textStatus, errorThrown){
	console.log("ERROR");
})
.always(function(){
	console.log("END");
});

$.ajax({

url:"http://xxxx/b.php",

type:"GET",

dataType:"json",

})

.done(function(data){

console.log("OK");

})

.fail(function(jqXHR, textStatus, errorThrown){

console.log("ERROR");

})

.always(function(){

console.log("END");

});

メモメモ

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31