JavaScript Archive

jQueryを使って楽々AJAX。ということで、普通にPOSTをするだけなら素直にできるんだけど、1つのスクリプトに対して、複数のリンクから個別のパラメータをPOSTする方法に迷ったのでメモ。って、分かりにくい状況だな。

つまり、複数のレコードがあって、フラグの on/off を AJAX で切り替えたい時に、当然フラグの on/off は1つのスクリプトで行うけど、対象レコード自体は別々で、それを1つのページ上でやる方法ってこと（それでも分かりにくい）。

Continue reading

たとえば、hoge_1 / hoge_2 / hoge_3 .... hoge_n と特定の文字列「hoge」が必ず含まれている連番IDのボックスがあって、そいつらだけJavaScirptで操作したいなーという時の方法。

Continue reading

ブログやサイトにプログラムのコードを書いて説明したい場合に、エディタのようにコードをハイライト表示してあげると分かりやすくなるけど、ちまちまと色付けをするのは面倒くさい。そんな人にお手軽自動ハイライトJavaScirptをご紹介。

すでに相当有名になっているものだが、Googleが公開している「google-code-prettify」というもの。使い方は非常に簡単。続きを読むで、導入方法とサンプルを。

Continue reading

AJAXネタ。prototype.js と scriptaculous.js を使うとコンテンツの内容をフェードイン・フェードアウトしながら切り替えることができる。これを使えば、Flashを使用しなくても簡単にページ遷移なし・アニメーションでコンテンツを展開することが可能。

時間毎に内容が切り替わるというのがあったので、これを参考に、クリックすると切り替わるように変更してみた。

サンプルと、動作コードは続きを読むで。

Continue reading

フォーム画面の設計で、文字数制限のある項目を入力しやすいようにするにはどうすればーと、ぽかんとしながら考えていたら、はてなブックマークのコメント入力欄のように文字数をカウントしてあげれば良いんじゃないかという結論に。

そしてこれは後で思い出したのだけど、実は社内システムのフォーム画面ですでに実装されていたものだったりしたのだけど、一応備忘録ということでコードをメモ。

JavaScriptはあまり得意じゃないので、ここを参考にしながら。

Continue reading

document.getElementById() を使って色々とやろうと思ったらどうしてもエラーで動かない。なんで？！と思ったら、getElementById() の Id 部分を ID と大文字で記述していた…。大文字だと動かないのね。初めて知った。

フォームでよくあるトラブルで、ユーザが「送信」ボタンを二重に押してしまうのがある。それを防ぐための小技紹介。

• フォームの送信ボタンの二重押しを禁止する方法

資料請求フォームで、1人が10回ほど連続で送信ボタンをクリックしたために、同じメールが10通も来るのが月に1,2回あるという色々と問題があるサイトをなんとか直したい…。

<object>タグをJavaScriptで操作したいのだけれども、どうにもうまくいかない。まず、HTML上で<object>タグを記述し、別のHTMLファイルを読み込ませる。

<object data="01.html" type="text/html" id="media"></object>

これを、ボタンをクリックすると別のファイルを読み込ませるようにしたい。

function click_bt(){
  document.getElementById("media").data = "02.html";
}
<a onClick="click_bt()">別ファイル</a>

では駄目だった。<iframe>を使った方法なら、うまくいくのだけれども :( ある筋からの情報によると現状<object>タグは読み込みOnlyで、設定はできないとのこと X(

こうなると、<object>タグをJavaScriptで生成して操作するしかなくなるのだけれども、WindowsIEでうまく動いてくれない :( FirefoxとかMozilla系は問題ないんだけどな。

なにかいい方法があれば教えてください。

僕はPHPとPerlをメインで、少しマクロ・VB・Cとやっていて、JavaScriptは滅多に使わないので、今回の案件で少し苦労してしまった :(

作ったのは、よくあるセレクタの連動で、3つあるセレクタを、それぞれ連動させて <option>の値を変更するというもの。

options[i].value options[i].text options[i].selected この3つを使えば簡単だったけど…。ちゃんと覚えなきゃ駄目だなぁ。オブジェクトさえ覚えていれば苦労せずに作れるんだけど。

あと、デバッグをしていて、初めてInternetExplorerのありがたみを感じたよ :P