AJAXでファイルをダウンロードする

javascript

環境 HTML5に対応したブラウザやり方汎用的にfunctionを作ってみた。 function downloadFile(ajaxUrl, ajaxData, fileName) { $.ajax({ type: "post", url: ajaxUrl, data: ajaxData, xhrFields: { responseType: 'blob' } }).done(function (response, _t…

2018-05-28

Datatables小ネタ集

Datatables javascript

Datatablesとは DataTables | Table plug-in for jQuery 行選択イベント行選択時のイベントを捕まえる方法は二通りある。 select/deselectイベントユーザーによる選択でもコードによる選択でも発火する。タイミングは選択された「後」。 singleモードだと…

2018-05-08

AJAX処理を順番に実行する

javascript

やりたいこと複数のAJAX処理を一つずつ順番に、前の処理が終わるのを待って実行したい。環境 jQuery 1.8 以降やり方 jQueryのDeferredオブジェクトを利用してAJAX実行Queueを作成する。途中でエラーが発生した際にそのまま続行するQueueと以降の処理をキ…

2018-03-17

動的に追加される要素にイベントハンドラーをアタッチしたい

javascript

例えばテーブルの各行にクリックイベントをアタッチしたいとき、それがAJAXで非同期にデータをロードするテーブルならばロードのたびにアタッチし直さなければならないし、ユーザーが自由に行追加できるテーブルならばその都度追加行にアタッチしなければな…

2018-03-15

フォームの二重投稿を防止する

javascript

submitと同時にボタンをdisabledにする。やり方ページロードイベント中に以下を追加。 $('form').on('submit', function() { // 全てのボタンをdisabledにする $('button, input[type="submit"]').prop("disabled", true); }).on('click', '[type=submit]'…

2018-03-14

ファイルダウンロードの終了をブラウザ側で検知したい

javascript

やり方 Cookieを使う。 $('form').on('submit', function() { const currentToken = getCookie("DOWNLOAD_TOKEN"); const downloadTimer = window.setInterval(function () { const newToken = getCookie("DOWNLOAD_TOKEN"); if (newToken != currentToken) …

2018-03-13

WebフォームでEnterキーを押したときにフォーカスを移動させたい

javascript

いやTabキー押せよ、って思うけど仕方ない。やり方 $('form').on('keydown', 'input, button, select', function(e) { if (e.keyCode == 13) { if ($(this).attr("type") == 'submit') return; var form = $(this).closest('form'); var focusable = form.f…

2018-03-13

ブラウザの戻るボタンを禁止したい

javascript

本当はそんなことしたくない。なお、あくまで戻るボタンを封じるだけなので履歴を使うと戻れる。環境 HTML5に対応したブラウザやり方ページロードイベント中に以下のコードを追加。 history.pushState(null, null); $(window).on('popstate', function(e…