ど素人から毛を生やす。<延>

javascript

動的に増やしたhtml要素を操作するjQueryに関するメモ書き

Web > javascript 2018年3月23日(最終更新:1年前)

どもです。

jsで動的に増やしたhtml要素を操作するjQueryに関して、今更感漂うメモ書き。
何かあったら都度増えます。たぶん。

.click()は効かない。.on()を使う。

追加された要素は、.click()、.change()などの古いトリガーの書き方ではトリガーにならない。

ただし、map()などはトリガーではないので、そのまま使える。混同しないこと。


参考サイト:[Qiita]jQuery 便利なonを使おう(on click)

data()はhtmlを書き換えられない

なんでさ。

ネイティブの.datasetか、.attr()を使うべし。旧ブラウザを踏まえたら.attr()が無難か。結局.attr()が万能。


参考サイト:[Qiita]data属性を動的に変更する場合の注意点... 続きを読む »

ステップ操作のトリガー扱いにブラウザ差異があるのでinput[type=number]を使う際は注意。

Web > javascript 2018年3月2日(最終更新:1年前)

どもです。
最近フォーム回りとSQLの話しかしてない気がする。

input[type=number]のフォーム操作について。

入力の数値に変更があった場合は再計算、という簡単なソースを作成したのですが、
Chromeでは正常に動いたのにFireFoxでは上手くいかず。

この原因が、トリガーにonBlurを使用したことでした。
どうやらChromeでは入力欄の上下矢印(ステップ)の操作はフォーカスが当たった扱いになるのですが、FireFoxではそうならないようです。

今回は矢印で操作したいので、onChangeに変更。

うーん、ブラウザ差異は発覚しにくいから厄介だ。(-_-メ)

onChange、発火したりしなかったりするよ!?(追記)

検証結果:
FF→発火する
Chrome→発火したりしなかったりする(3回に1回くらい発火する)
edge→発火しない
IE11→発火しない... 続きを読む »

古いjQueryでform制御したらsubmitできない、または「s[y] is not a function」になったとき。

Web > javascript 2018年2月6日(最終更新:1年前)

どもです。
jQueryでフォームを制御していたら、submitできない事案が。
コンソールに「TypeError: s[y] is not a function」というエラーが発生しています。

このエラー自体は「関数でないものを、関数呼び出ししようとした際に発生するエラー」らしいです。
詳細はMDNへのリンクを貼っておきます。

結論から言えば、今回の原因は2つ。

ひとつは、使用していたjQueryが古かったことに起因します。なんと1.8.3。このご時世に1系です。... 続きを読む »

keyup / keydown の使い分け

Web > javascript 2017年9月29日(最終更新:1年前)

どもです。
この頃、入力フォーム周りで色々やることが多いので備忘。

jQueryでキーを押したときの動作といえば、
keydown / keypress / keyup
この3つ。

内、keypressはブラウザ差異があるので、使用の際は注意。
今回は、keyup / keydown のみ考える。

keydown ... 続きを読む »

jQueryのajaxでphpを実行して、配列を返り値にして再びjsで処理したい

Web > javascript 2017年8月18日(最終更新:4月前)

どもです。

今回の課題は、jQueryからphpを実行して、返り値に配列を受け取って再びjsで処理 です。
ajaxは不慣れなので、基本から踏まえましょう。

①基本形

jQuery1.8で新しい書き方になっていて、現在旧仕様は非推奨。
僕が今回携わった環境は古ぅいところなので旧仕様でしたが、新規で書くなら上。

パラメータについては、以下のサイト様を参照。見た感じ、ここが新仕様かつ分かり易い。
jQuery:一般的なAjax通信を実装するには?($.ajax)- Build Insider

②phpから値を受け取って処理したい

ajaxは他のjsの流れと切り離されるため、$.ajax({})の外に後続処理を記述してしまうと
そちらが先に実行されてしまう。
返り値を使用したい処理は、必ずdone(success)に記述すること。... 続きを読む »

input type="file"でアップロードされたファイル名を取得(IE9以下も)

Web > javascript 2017年7月13日(最終更新:2年前)

どもです。

jsにて、input type="file" でアップロードされたファイル名を参照する必要がありました。

解決です。

と思いきや、

これではIE9以下では値が取得できないとのこと。

調べてみたところ、.fileにはFileAPIというものを使用しており、IEは10以上からしか対応していないと。

vistaのサポートも終わったしIE9以下とか捨てていーじゃん(゜-゜)
とか思う気持ちはありますが、仕方ないので対応しましょう。

まんま参考サイト様の受け売りなのですが、
input type="file"の.valueを取得すると、一般的なブラウザではファイルパスかファイル名になるそうです。

IEの場合はファイルパスなので、/で区切って配列化し、末尾のファイル名だけを取得します。
これでおk。... 続きを読む »

onblurからのalertで再focusしたらバグる問題

Web > javascript 2017年6月6日(最終更新:2月前)

どもです。
まこと久々のjs関係の更新です。

テキストボックスをonblurで入力チェック、
望んだものでなければalert(もしくはconfirm)を呼び、再びfocusで入力し直させる。

一般サイトだと時代遅れのブツではありますが、
裏側ならまだ現役のalert()。
こういったことは、やりたくなることがあると思います。

が、

他の動作であれば正常に動くのですが、focusに限ってはこれバグるようです。

しかも、ブラウザによってバグの内容が異なり、
firefoxならフォーカスが移動してくれない程度で済むのですが、
chromeだと閉じても閉じても延々とalertが発動し続けるという悪夢が。

で、どうしてこんな現象が起きるのか。

alert()はフォーカスの操作を行うことまでは確定。alert()を閉じる動作が非同期なのではないでしょうか。... 続きを読む »

複数のカテゴリから残り1つのカテゴリを絞り込み、選ばれたカテゴリからページを取得する

Web > javascript 2016年4月20日(最終更新:3年前)

どもです。

今回のお題はこんな感じ。

カテゴリ①②の両方を持つpostのカテゴリ③だけが表示される→選択されたカテゴリ名.htmlを取得して表示!

…この図でわかるのだろうかw
説明しますと、

複数の種類のカテゴリと(カテゴリ①~③)、
複数のカテゴリを持つ記事(post)を用意

カテゴリ①や②を選択すると、そのカテゴリを含むpostを探し、
そのpostが所持している特定のカテゴリ(カテゴリ③)を取得する

取得したカテゴリ③だけを表示し、取得できなかったものは非表示にする

更に、選択されたカテゴリ名を繋げてURLを作り、ページを取得する

といった仕様と手順です。
URLの取得、ページ取得の処理を変更すれば、様々なものに応用できると思います。... 続きを読む »

GoogleChrome、IEでwindow.openの幅・高さの設定が反映されなかったら

Web > javascript 2016年4月7日(最終更新:3年前)

どもです。

jsでポップアップウィンドウを開くwindow.openについて、
些細な躓きを見つけましたのでご報告をば。

window.openでwidthを設定しているのに、GoogleChromeだと設定が反映されない

といったご相談を受けました。
他のブラウザは良くて、chromeだけというのが引っかかりますが…。
試してみたところ、同じソースでFireFoxはOK、IEはダメでした。

で、調べてみると、

<button onClick="window.open('*.html', '*', 'width=500,height=500,scrollbars=yes')">OK</button>
<button
... 続きを読む »