忍者ブログ
にわか情報系ががんばります.備忘録,あるいは同じ躓きつまづきをした人のために

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

フォームに複数のボタンがあるときの対処:jQuery

一つのフォーム内に複数のsubmitボタンがあり,入力ボックスでリターンキーを押した際に,動作してほしくないボタンが動作しちゃう.

このボタン類は input type="image" で作られてて,さらに,位置を動かすのも超面倒.

で,リターンキーで反応するのは送信ボタンのみ.その他のボタンはリターンキーでは反応するな.という要件.


$('[type="text"]').on('keydown',function(event) {
if ( event.which == 13 ) {
$('[name="next"]').trigger('click');
return false;
}
});



まずは入力ボックス内でのキーダウンを捕捉し,リターンキーの場合は送信ボタンの要素のクリックを発火する.

とりあえずこれで要件は満たせる...かな
PR

ページ離脱時にポップアップを表示できない件

ページ離脱時にポップアップを表示させて,入力内容が失われる旨を通知する.


$(function(){
$(window).on("beforeunload",function(){
console.log("foofoo");
return "hogehoge";
});
});







とやれば簡単にできるはずだと思ったのだができない.
原因はjqueryが1.6.4だったから.

すでにjqueryも使用されて運用されているページに,離脱時ポップアップを付けようとしたが,上手く動かなかった.

読み込んでいるjqueryは1.8.3だと思っていたが,firebugで見ると1.6.4とか見える.
どうやら,includeしているファイル内で,古いjqueryを読み込んでいるようだ.
試しに

<script type="text/javascript" src="js/jquery-1.8.3.min.js">
ポップアップのスクリプト




<script type="text/javascript" src="js/jquery-1.8.3.min.js">
<script type="text/javascript" src="js/jquery-1.6.4.min.js">
ポップアップのスクリプト



を試してみると,前者はポップアップが出るのに,後者は出なかった.

古いjqueryが使われているのも問題だが,読み込む順番にも注意が必要.


また,return "hogehoge"; のhogehogeでメッセージを変えられるのかと思ったらそうでもない...?

と思ったら,firefoxはデフォルトのメッセージしか表示されなくて
chromeやIEは return "hogehoge";のhogehogeが表示されるんだね.

cactiとweatermapを使いたい!

weatermapの設定に関して.
というわけでメモ
cactiについてはおいおい書くかも(書かない)

JANOG32のやつ→http://www.janog.gr.jp/meeting/janog32/weathermap.html
こちらのサイトにweathermapの使い方について書いておられますが,
weatermapでeditorが上手く使えなかったので使い方のメモ

問題点
weathermapを導入してエディター画面まで出てきたが,なんかうまくエディットできない...

解決
まず
weathermapディレクトリの中のconfigディレクトリとoutputディレクトリのパーミションを755にします.
これでこのディレクトリの中にファイルが作られることができるようになります.たぶん.

次に
hoge/weathermap/config/の中にあるsimple.confをコピーして自分がいじる用のコンフィグファイルを作ります.(simple.confを使ってもいいけれど)
いじるコンフィグファイルのパーミションも755に変更します.
これでエディター画面からエディットできます.

その後は,cactiの左メニューのManagement→Weathermapsを開き,Addをクリック.
先ほど自分で用意したコンフィグファイル名があると思うのでそれの左端のAddをクリックします.
そうして出てきたコンフィグファイル名をクリックすればエディター画面になります.

とりあえず,上部にあるAddNodeをクリックして,エディター内のどこかをクリックしてNodeっていうアイコンが出てくれば大丈夫です.たぶん.

あとは好きなだけいじったり↓のページ見たりして体得してください.
http://www.janog.gr.jp/meeting/janog32/weathermap.html

エディターとコンフィグ直にいじるのをうまく使い分けると楽そう.
エディターがわりともっさりしてるので(自分だけかも)
配置とかはエディタで置くだけおいて数値はコンフィグでばばばっといじるのが楽かも.
ちなみに,weathermap/image/の中にアイコンや背景があります.自分で追加することも可能です.

箇条書きをCSSで綺麗にしたかった...

箇条書きをCSSで綺麗にしようとした結果のCSS

ul{margin:0;
padding:0;
}
.br{clear:both;}
ul li{list-style-type:none;
float:left;
background-color:#FFFFFF;
margin:5px;
padding:0px 0px 0px 20px;
}
#text{width:200;
float:right;}
input{width:50px;
margin:0px 0px 0px 0px;
}
hr{clear:both;}