ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

Javascript

jQuery UI でダイアログ表示

別の記事でも書いたけど、個人で開発しているWebアプリでは、だいたいjQuery UIを使用してる。 今回はその中でもよく利用しているdialogの使い方をまとめておく。 dialog機能を使うと、割と簡単にエラーダイアログやフォーム表示用のサブウィンドウを作成す…

jQuery UI.Layout Plugin を使って単一ページUIを作る

Google App Engineを使うようになって、リクエスト時間の節約のために 重いページ(HTML)のロードは最初の1回だけにして、以降はページ遷移なしで AjaxでJSONのやりとりをしてビューを変更するような方法をとることが多くなった。 UIについても毎回デザイン…

地図上で場所を選択すると選択した地点の座標をフォームのhiddenフィールドに入力するプラグイン

jQueryプラグインの作成方法を学びつつ、色々作ってみる。 今回は、HTMLのフォームで場所の情報を登録する際に座標情報を入力してもらうのに使えそうなプラグインを作った。 表題のままだけど、地図で地点を選択するとその座標情報が指定したフォームフィー…

jQueryでリスト・テーブル操作 - 行の上下移動

ここ数件のプロジェクトでリストやテーブルの行追加、削除やソート、上下移動などの処理を書く事があったので、メモしておく。 今回は行の上下移動。 リストの各行に「上へ」「下へ」というボタンなりリンクなりアイコンなりを配置しておき、それをクリック…

Thickboxで呼び出し元ウィンドウとデータのやりとり

他に方法が思いつかなかったので、親ウィンドウ側に関数を用意して それをThickbox側から呼び出す方法をとった。 iframe版しか考えていないので、ajax版の使い方だとまた別の方法があると思う。 parent.html <head> ... <script type="text/javascript" src="jquery-1.3.1.min.js"></script> <link rel="stylesheet" href="thickbox.css" type="text/css" /> </link></head>

django+jQuery Form Pluginでファイルアップロードしてみた

前回発見したjQuery Form Pluginを使って実際にファイルをアップロードするサンプルを作った。 http://d.hatena.ne.jp/piro_suke/20080615/1213498024 ファイルをアップロードする場合のみ、iframeが使用される関係でサーバ側から 返却するデータをtextarea…

jQuery Form Pluginでファイルアップロード

通常のフォームを画面遷移なしで送信可能にしてくれる jQuery Form Pluginを使ってみた。 jQuery Form Plugin http://malsup.com/jquery/form/ フォームに何も加えなくてもjsファイルを読み込んで ajaxForm関数でサブミット後の処理を定義するだけで サブミ…

FlexとJavascriptの連携

Actionscript3で作成したSWFからActionscript2で 作成したSWFは呼び出せないようだ。 YoutubeのAPIで提供される動画再生用のSWFがActionscript2で 作成されたものらしく、Flex2(Actionscript3)から呼び出しても うまく動いてくれなかった。 (やり方がおかし…

jQueryでselectメニューで選択中のoptionの表示テキストを取得する

これまたもっといい方法があると思われるが、一応メモしておく。 <script type="text/javascript" src="/static/javascripts/jquery-1.1.3.1.pack.js"></script> <script type="text/javascript"> $(function() { $("#add_customer_btn").click(function() { if ($("#customer_select").val() != "") { var customer_id = $("#customer_select").val(); al…

jQuery用のいい画像範囲選択ライブラリが見つからなかったのでprototype.js用ライブラリを使う

javascriptで画像の範囲選択をしたかったのだけど、 jQuery用のinterface.jsの機能ではちょっと物足りなかったので、 prototype.js用のライブラリとして作られたImage Cropper UIライブラリを 使ってみる。 Image Cropper UIライブラリのダウンロードはこち…

jQueryで画像上にあるマウス位置の座標を取得する

画面に対する絶対的な座標の取得方法はすぐ見つかったが、 画像の左上を基点とする座標を取得する方法を見つけるのに手間取ったのでメモ。 マウス座標の取得方法には色々ある(offsetXやらlayerXやら)ようだが、 ブラウザによって取得できる値が異なるみた…

Javascriptで正規表現マッチの後方参照

見つけにくかったのでメモ。 コードがハイライトされるというだけで、ソースを載せたくなるのはなぜだろう。 タグに設定されたid属性から数値で設定されたID値を取得する。 jQueryを使うとリストの中のliタグや、テーブルの中のtdタグに設定された IDを一括…

jQueryとDjangoでJSON形式でサーバから返したリストデータをセレクトメニューに表示

DjangoのJSONデータ生成処理も、jQueryのタグ生成処理もなかなか使いやすい。 jQueryでサーバサイドを呼びだし、サーバサイドでDjangoでModelのリストを JSON化してクライアントに返し、それをselectタグ内のoptionタグとして生成する。 views.py from djang…

jQueryでテーブルのチェックボックスを一括選択するチェックボックスを作成する

Djangoを使う時はJavascriptライブラリにjQueryを使うのが流行らしい。 jQueryは最近注目されている楽しいライブラリのようなので、以前prototype.jsで 実装した、チェックボックス一括チェック処理を書き換えてみる。 <script type="text/javascript" src="/static/javascripts/jquery-1.1.3.1.pack.js"></script> <script type="text/javascript">

Javascriptで文字列型の数値を数値型に変換する

var x = "15" + 5; こう書くと、+は文字列結合演算子として認識されてしまい、xは155となる。 var x = "15" - 0 + 5; 引き算をすると文字列型の数値が数値型に変換され、xは20となる。 ...これが一番いい方法なのか?

Javascriptでテーブルのチェックボックスを一括選択するチェックボックスを作成する

これもまた、とりあえず動くレベル。 prototype.jsを使っている。Djangoのテンプレートだが、あまり関係なし。 <script type="text/javascript" src="/static/javascripts/prototype.js"></script> <script type="text/javascript">

Javascriptでselectメニュー要素を更新

検索してなかなか見つからなかった情報を解決した時は、エントリにして載せることにした。 将来同じ問題にぶつかった時を考えると、自分がどこかに書いたメモを探すよりも先にWebで検索するだろうし、そんな時に自分が過去に書いたエントリが出てきて解決で…