なんちゃってプログラマのぼやき

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

エクセルファイルなど、ファイルをダウンロードさせた後にページ遷移や再読み込みを行うことがありました。

PHPの処理だけでは、ダウンロードの際にheaderを使用しているため、
ひとつの処理のなかでページ遷移を行うことができません。

javascript(今回はjQueryで記述)と
Cookie を利用することでファイルダウンロード後に処理を行うことができます。

処理の順番としては、
�@クッキーの発行（ダウンロードフラグをたてる）
�Aファイルダウンロード
�Bダウンロードフラグがある場合、クッキー情報を削除してページ遷移

サンプルコードは以下。

PHPでクッキーを発行する

setcookie ("downloaded","yes","","/");

// ファイルダウンロード処理

HTML

<form>
<input type="submit" value="ダウンロード" />
</form>

javascript
※jquery.js, jquery.cookie.js を使用していることが前提。

// aタグで行う場合は、clickイベントで同様のことを行う
$("form").submit(function() {
setInterval(function () {
if ($.cookie("downloaded")) {
$.removeCookie("downloaded", { path: "/" });
window.location.href = '遷移先パス';
}
}, 1000);
});

１．ボタンを押すと、HTMLの値をJavascriptで取得
２．Javascriptで値を変更
３．Javascriptで変更した値をHTMLで取得

という処理を書いていきます。

基本的に、
document.getElementById("id名").innerHTML =
で、id名の付いたタグのテキストを書き換えることができます。
下記の例でも同じことを書いています。下の書き方の方が、スッキリ見やすいです。


HTML

<div id="result">変更前</div>
<div id="btn">ボタン</div>

Javascript

<script>
// HTMLの要素を取得
var btn = document.getElementsById( "btn" );
var result = document.etElementsById( "result" );

// ボタンをクリックするとresultに値を格納
btn.addEventListener('click',function(){
result.innerHTML = "変更後";
});

</script>

javascriptで要素を複数取得する場合、
以下のリンクの方法をとれば複数のIDから取得できます。

→【jQuery】同じIDを持つ複数の要素を選択する

ただ、「IDはユニークであるもの」というのが一般的に推奨されているため、
複数の要素を指定してjavascriptで使う際、特別な理由がなければクラスを指定する方が良いみたいです。

クラス属性を指定して要素を取得するには、
getElementsByClassName()を使います。
取得した要素は配列形式になるため、何らかの処理を行う際には、要素番号の指定が必要です。

HTML

<ul>
<li class="example">要素1</li>
<li class="example">要素2</li>
<li class="example">要素3</li>
<li class="example">要素4</li>
</ul>

Javascript

// exampleクラスの要素を取得
var elements = document.getElementsByClassName( "example" ) ;

// 要素1を指定する場合
// elements[0]

ちなみに、jQueryで書くと、以下のようになります。

var elements = $( ".example" ) ;