2015年01月05日

フォーム入力の際、history.back()でポスト前の入力データが消える

IE7あたりでそんなバグがあったようですが、フォーム入力で、JavaScriptのhistory.back()を使って入力内容確認ページからデータ入力のページに戻った際、折角入力した情報が全部消えちゃった〜という現象があったのでご報告。
結論からいうと、コーディングのミスで

<div>
<form action="・・・" method="・・・" >
</div>
ここにフォームいろいろ
<div>
</form>
</div>

と、<form>が分断されていたために起こっていました。
なんでこんなことが起きたのかというと、CMSを使っていたため。←いいわけ
ちょっとコード入力に対応していないテンプレートを無理やりコード対応させて使っていたためにこんな感じのコードになっていました。
反省。
ご参考までに♪
posted by BigMoonEz at 11:45 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2013年06月19日

セレクトボックスの値を変えたらリンクのクエリ文字列を変える

結構需要あると思うんですが、探し方が悪いのか見つけられなかったので備忘録的に。
セレクトボックスで選択しているアイテムを変えると、それに応じてlist内にあるリンクのクエリを変更するというもの。
HTMLはこんな感じ

画像サイズ:
<ul>
<li><a href="hoge.php?id=xxxxxx&s=1&p=1"><img src="./img/hoge.jpg" alt=""></a></li>
<li><a href="hoge.php?id=xxxxxx&s=2&p=1"><img src="./img/hoge2.jpg" alt=""></a></li>
<li><a href="hoge.php?id=xxxxxx&s=3&p=1"><img src="./img/hoge3.jpg" alt=""></a></li>
</ul>
<form>
<select name="size" id="size">
<option value="1" selected>サイズ1</option>
<option value="2">サイズ2</option>
<option value="3">サイズ3</option>
<option value="4">サイズ4</option>
<option value="5">サイズ5</option>
<option value="6">サイズ6</option>
</select>
画像の向き:
<select name="pic" id="pic">
<option value="1" selected>画像1</option>
<option value="2">画像2</option>
<option value="3">画像3</option>
<option value="4">画像4</option>
</select>
</form>

セレクトボックスが選ばれた時、それに応じてリスト内のリンクのクエリ(上記場合はsとp)を変えるというものです。
Javascriptだけでできそうですが、他にjQueryを使うためjQueryを読み込んでいたのでjQueryでやりました。
JS部分はこんな感じ

<script>
$(function(){
$('select').change(function() {
var p="&p=" + document.mainForm.pic.selectedIndex;
var s="&s=" + document.mainForm.size.selectedIndex;

$('ul li a').each ( function() {
var url=$(this).attr('href');
var buff=url.split("?");
var buff2=buff[1].split("&");
$(this).attr("href", buff[0] + "?" + buff2[0] + s + p);
});
});
});
</script>

あんまり難しくないと思うので、解説も不要かと思いますが念のため
$('select').change(function() {・・・selectボックスがchangeした時のイベントを指定しています。
var p="&p=" + document.mainForm.size.selectedIndex;・・・pという変数にセレクトボックスで選ばれた値を格納(sも同様)
$('ul li a').each ( function() {・・・リストが複数あるので繰り返し同じ処理をさせます。
var url=$(this).attr('href');・・・一度現状のhrefの値をurlという変数に格納
var buff=url.split("?");・・・格納したhrefを"?"で区切ってbuffという配列に格納します。URI部分とクエリ部分に分けます。
var buff2=buff[1].split("&");・・・クエリ部分をさらに各クエリに分けています。(idはそのまま使うため)
$(this).attr("href", buff[0] + "?" + buff2[0] + p + t);・・・hrefの値を構成しなおして書き直し。

ホントは各クエリの値について変数名があってるのかどうかとかチェックを入れたほうがいいかと思いますが、まぁ動作するので・・・適当でスイマセン。
posted by BigMoonEz at 11:02 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2011年11月18日

iOS5で旧バージョンのjQTouchを利用するときの不具合

既存のjQTouchで作ったサイトがうまくリンクが利かなくなる不具合があり調べていたら、以下のページで報告されていました。

https://github.com/senchalabs/jQTouch/issues/297

解決方法は該当ページにもありますが、以下訳
jqtouch-b2 コードでバグを修正しました:

'handleTouch' ファンクションに下記のようなコードがあります:
startX = event.changedTouches[0].clientX,
startY = event.changedTouches[0].clientY,

上記コードを下記のように修正しました:
startX = event.changedTouches[0].pageX,
startY = event.changedTouches[0].pageY,

.clientY は、ページスクロールを位置情報(値)として扱いません。.pageY
は、スクロールも含めた全ページ中の相対的な値です。

iOS5, iOS4.3, と Android で検証済み。

上記のとおりコードを書き換えれば治りました。

posted by BigMoonEz at 10:04 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2008年07月04日

「操作は中断されました」というエラーが出る

操作は中断されましたPHPで、とあるWebアプリを開発、さてデザインを適用するかな。。。と思ってCSSを組み込んだところ、次のようなエラーが発生。
デザインを適用しただけなのにおかしいなぁと思いつつ、いろいろ試したんですが、直らない。
Firefoxではエラーが出ないので、ブラウザ依存かと思い、ネットで検索したところ、いろいろ見つかりました。

GoogleMapで出ている人が多いようですが、解決方法としては、
・document.onload→body onLoadに
・divのネストをしないようにする
という方法が紹介されていました。

ただ、私が作ってたのはGoogleMapと関係がないので、onLoadを使ったJavaScriptに問題があるのかなーと思っていろいろ対策をしてみました。

私のソースは、

<head>
<script language="java script">
 function hoge(){
  ・・・
 }
</script>
</head>
<body onLoad="hoge();">
<div id="hoge">
<div id="fuga">
・・・
</div>
</div>
</body>

だったのを、

<head>
<script language="java script">
 function hoge(){
  ・・・
 }
</script>
</head>
<body>
<div id="hoge">
<div id="fuga">
・・・
</div>
</div>
<script language="java script">
document.onload=hoge();
</script>
</body>

にしたら直りました。
・・・と書くと簡単に直ったようですが、半日かかりました^^
間違えて、

<head>
<script language="java script">
 function hoge(){
  ・・・
 }
</script>
</head>
<body>
<div id="hoge">
<div id="fuga">
・・・
<script language="java script">
document.onload=hoge();
</script>
</div>
</div>
</body>

のように書いてもエラーが出ますので注意が必要です。
また、単純にリロードしただけでは同様にエラーが出ますので、一度IEを閉じてから、再度開きアドレスを入力して確認する、という作業が必要でした。
posted by BigMoonEz at 11:49 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2007年05月08日

パンくずリストを自動生成させる

タイトルを利用してパンくずリストを自動生成します。
パンくずリストとは、現在自分がどの階層位置にいるか示したもので、
TOP > 製品情報 > 最新機種

などのようにページの上部や下部に表示されるナビゲーションを指します。
Javascriptでは、
<a href="index.html">TOP</a> > <a href="products.html">製品情報</a> >
<script type="text/javascript">
<!--
document.write(document.title);
-->
</script>

とし、<title>〜</title>部分を「最新機種」とすれば、同様の結果を得られます。

ただし、JavaScriptをOFFにしているユーザーには何も表示されなくなってしまいますので、頻繁にタイトルを変える場合やプログラムでページを生成する場合以外はあんまり使えないかなぁ・・・
posted by BigMoonEz at 11:05 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2007年02月08日

JavaScriptで取得できる訪問者の環境

JavaScriptでは次のような環境を取得することができます。

location.host :ホスト名
location.hostname :ホスト名
location.port :ポート番号
location.pathname :リクエスト
navigator.appCodeName :コード名
navigator.appName :ブラウザ名
navigator.appVersion :ブラウザのバージョン
navigator.language :言語セット
navigator.platform :プラットフォーム
navigator.userAgent :エージェント
navigator.cookieEnabled :Cookieが使えるか
navigator.cpuClass :CPUの種類
navigator.javaEnabled() :JAVAが使えるか
history.length :ブラウザの履歴数
document.referrer :リファラ
document.domain :ドメイン名
screen.width :スクリーンの幅
screen.height :スクリーンの高さ
screen.colorDepth スクリーンの色数(bit)
posted by BigMoonEz at 09:59 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2007年02月01日

JavaScriptでページジャンプ

JavaScriptを使ってページジャンプさせる方法があります。

<html>
<head>
<script langage="javascript">
<!--
function onLoadFunc(){
var url = "http://www.oyogu.com";
window.location.href = url;
}
//-->
</script>
</head>
<body onload="onLoadFunc();">
暫くお待ちください
</body>
</html>>


JavaScriptならこの本
posted by BigMoonEz at 10:36 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2006年09月22日

テキスト入力フォームでペーストできないようにする

いきなり一発目からこんなネタですが・・・
このseesaaブログに登録する際にメール再入力を促され、いつものようにペースト・・・(^^;
あれ?できない。
ということで、ソースをチェック。

<input type="text" onPaste="return fase;">


onPaste="return fase;"でペースト禁止にできるようです。
ちなみにコピー禁止は

onCopy="return false";


でもIE限定のようです・・・
posted by BigMoonEz at 11:52 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする