- ベストアンサー
jQuery mobile:移動先ページのイベント
jQuery mobileをつかったウェブページを作成しています。page1.htmlからpage2.htmlへの移動にはアニメーションによる動的移動を用いているのですが、この場合だとpage2.htmlに「$(document).bind('pagebeforechange'...」などを記述してもイベントが発生しません。 page2.htmlからpage1.htmlに戻る前に、page2.htmlにあるフォームの値を取得したいのですが、どのようにプログラミングすれば良いでしょうか。
- Tank2005
- お礼率36% (52/143)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
値を取得して戻る必要があるのならば、別ファイルにせず、単一ファイル内に複数のページを用意して切り替えるのがjQuery Mobile的な対応だと思いますが。そうできない理由などがあるのでしょうか。
関連するQ&A
- Query Mobile でのページ遷移アニメ
jQuery Mobile でのページ遷移アニメーション（data-transition）についての質問です。 通常のフォームのサブミットボタンでページ遷移をした場合はアニメーションするのですが、JavaScriptの document.forms[0].submit(); でページ遷移をしようとすると、アニメーションが効きません。 私だけでしょうか・・・ ちなみに、どうしても JavaScriptの document.forms[0].submit(); 関数でサブミットしなければなりません。（理由は長くなるので省略します） また、 document.forms[0].submit(); return false; としても、同様にページ遷移のアニメーションは効きませんでした。
- ベストアンサー
- JavaScript
- jQuery mobileのイベントについて
jQuery mobile 1.0で使えていたイベントが1.1.1で使えなくなりました。 何か仕様が変わったのでしょうか？ よろしくお願いします。 例： $("div:jqmData(role='collapsible')").each(function(){ // ここが機能しなくなった bindEventTouch($(this)); }); function bindEventTouch(element) { element.bind('tap', function(event, ui) { if(element.hasClass('ui-collapsible-collapsed')) { } else { $('#' + element.attr('id') + 'l li').remove(); $('#' + element.attr('id') + 'l').append("<li>I'm Header #FF</li>"); } }); }
- 締切済み
- JavaScript
- jQuery Mobile
jQuery Mobileでは１つのHTMLファイルに複数ページを記述するようですが テキストボックスに記載した文字を別のページに表示するにはどのようにするのでしょうか
- ベストアンサー
- AJAX
- jQuery Mobileでのページ遷移、挙動
jQuery Mobileを使ってスマートフォン用のサイトを作成しています。 ページ遷移時の挙動が直せなくて困っています。 1つのHTML内に複数のページを作るやり方ではなくて、 リンクには rel='external' フォームには data-ajax='false' をつけて、 Ajaxでのページ遷移を行わないようにしているつもりです。 で、おかしな挙動なのですが、 1.AのページからリンクをクリックしてBのページを表示する。 2.ブラウザの戻る機能でAのページに戻る 3.再びリンクをクリックしてBのページを表示する。 このとき、Bのページが表示された後、「Loading」というメッセージが表示され、 Aのページを表示してしまいます。（AのページをAjaxで読み込んでいるか、 Bのページが何らかで非表示になっているように思えます） $.mobile.ajaxLinksEnabled = false; という設定も試してみたのですが、 特に変化はありませんでした。 この解決策を教えてください。 出来れば、jQuery Mobileのデザイン関連だけ使って、ページ遷移絡みは 使いたくないという気持ちです。
- 締切済み
- AJAX
- jQuery bind時のeventについて
お世話になっております。 当方JavaScriptは不慣れなため、的外れな質問になってしまうかもしれませんが、その際はご指摘を頂けるとありがたいです。 スマートフォン向けのWebページを作成するにあたり、jQueryを用いてタッチイベントを取得しようと考えています。 以下に簡略化したソースを掲載致します。 /*--------------------------------------------*/ <script type="text/javascript"> $(function(){ $('#id').bind('touchstart',function(e) { alert(event); }); }); </script> /*--------------------------------------------*/ この際、Android版Opera上で表示されたのは、「object TouchEvent」でした。 その後主要なブラウザで動作確認をしていたところ、Android版FireFoxでは動作しないことが判明しました。 調べたところ、Gecko系のブラウザではwindow.eventという属性は存在せず、引数であるeに格納されているとのことだったので、alert(e);として確認したところ、表示されたのは「object Object」でした。 本来であればevent.changedTouches[0].pageX等の値を取得したいのですが、引数のeが目的とするオブジェクトではないようなので、値を取得できません。 1. そもそもこのeventは、window.eventという認識で良いのでしょうか？ 2. FireFoxでwindow.eventに該当するオブジェクトを取得するにはどういった手順が必要なのでしょうか？ 以上2点、ご教授頂けると幸いです。
- ベストアンサー
- JavaScript
- Jquery Mobileでのページ表示について
Jquery Mobile初心者です。 ページ表示についての質問ですが、 ファイルtest.htmlに下記のようにコードを書きました。 ログインのページを通してから、indexのページを表示したいと思っていますが、 ブラウザのアドレスバーに....../test.html#indexと入力すると、 indexのページがそのまま表示されてしまいます。 これではログインページをつける意味がなくなってしまいます。 アドレスバーに....../test.html#indexを入力しても、indexのページが表示されない (ログインページを表示する)ようにするには、どうしたらいいでしょうか？ ご教授をよろしくお願いします。 ------------------------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>テスト</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div id="login" data-role="page"> <header data-role="header" data-position="fixed"> <h1>ログイン</h1> </header> <div data-role="content"> <div data-role="fieldcontain" class="noborder"> <label for="inputLoginId">ログインID:</label> <input type="text" name="inputLoginId" id="inputLoginId" value="" placeholder="ログインIDを入力" /> <label for="inputPwd">パスワード:</label> <input type="password" name="inputPwd" id="inputPwd" value="" placeholder="パスワードを入力" /> </div> <input type="button" id="loginBtn" value="ログイン" data-theme="f" /> </div> </div> <div id="index" data-role="page"> <header data-role="header" data-position="fixed"> <h1>テスト</h1> </header> <div data-role="content"> <p>メインページ</p> </div> </div> <div id="TR" data-role="page"> <header data-role="header" data-position="fixed"> <a href="#index" data-icon="back" onclick="backPrc()">戻る</a> <a href="#index" data-icon="home" onclick="homePrc()">ホーム</a> </header> <div data-role="content"> <p>サブページ</p> </div> </div> </body> </html> ------------------------------------------------------------
- 締切済み
- HTML
- jQuery mobileでキャッシュ削除するには
困っているので教えて下さい。 最終的にはiOSとAndroid用にアプリにする予定になっておりますが、 jQueryMobileで作成し、現段階では動作や表示確認のためサーバにアップして確認しています。（aの#リンクがオフラインでは確認できないため） アプリにしたことがないので、わからないのですが、サーバで確認したところ、キャッシュが残ってしまっているようで、更新前のページが表示され、毎回リロードしないと、最新の状況が表示されず困っています。 $.mobile.page.prototype.options.domCache = false と、false設定になっていますが、それでもダメだし、各ページに別途、キャッシュを削除するようなタグを入れたりしても、やはりダメみたいです。 /* clear cache page */ $(document).on('pagehide', function(event, ui) { var page = $(event.target); page.remove(); }); ↑こういったタグです。 あまり難しいことはわからないのですが、いつも最新の状況が表示されるような方法はありませんでしょうか？ また、もしアプリ化した場合、こういったキャッシュ機能っていうのは、アプリの仕様に問題ありますか？もし関係ないようなら、このままアプリ化しようと思いますが・・・。 アプリだけでなく、WEBにも載せておきたいと思っているのですが、完成した状態で公開すれば、見て下さった方は最新の状態でキャッシュされるのでしょうが、更新した時等に最新の状態で見られないというのは問題だと思いまして、困っておりました。 よろしくご指導のほど、お願いいたします。
- 締切済み
- AJAX
- jquery-mobileでform送信
こんにちわ。 さっそく質問させて下さい。 eclipse環境でstruts2を使いサーブレットアプリを勉強しています。 ゼロ・コンフィギュレーションのしくみを利用しています。 内容は簡単でindex.jspからhome.actionを呼びhome.jspを返すといったものです。 （index.jsp→home.action→home.jsp） 今回、スマホ用にjsp部分を「jquery-mobile」を使い実装したいのですが、 form送信でhome.actionが呼び出せません。（画面がloadingとなったままになる） ≪index.jsp≫ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> </head> <body> <div data-role="page" id="page1"> <form action="home" method="post"> <P> <label>名前：<input type="text" name="ussername" required></label> <label>password：<input type="password" name="password"></label> </P> <p><input type="reset"><input type="submit"></p> </form> </div> </body> </html> 開発環境は eclipse3.6 tomcat6 struts2.2.3 ブラウザ/ スマホ：iphone safari PC：google chrome です。 サーバ側は /root |-WEB_INF | | | - content - home.jsp | | | - lib | | | | | -struts2で必須のjar | | | -src | | | | | -action - home.java | | | | | -struts.xml | | | -web.xml | -----index.jsp です。ご存じの方いましたら、教えてください。 お願いします。
- 締切済み
- Java
- jQueryでloadしたページ内でもjQueryを使う方法
例えば、base.html内にjQueryでadd.htmlをloadします。 base.htmlに下記コードを記述 $(document).ready(function(){ $("a").click(function(){ alert("click"); return false; }); }); base.htmlに直接記述したaタグではアラートが出ますが、 base.htmlに読み込んだadd.html内のaタグでは適用されません。 Ajaxで読み込んだページ内にもjQueryを使用したい場合には、 どのようにすればよいのでしょうか？
- 締切済み
- AJAX
- 【jQuery】カスタムイベントと.on()
お世話になります。 題名の通りなのですが、どうにも上手く動きません。 １．カスタムイベントの作成（bind）と初期着火 $(element).on('myEvent', function() { $(this).myPlugin(); }).trigger('myEvent'); ２．ajaxで作成された要素に(.live()) $(document).on('myEvent', '.myClass', function() { $(this).trigger('myEvent'); } ); １は問題なく期待した通り動作します。 ２は、まったく動きません。 ※myPluginは有名なjQueryプラグインです。 それぞれをチェーンで繋いでみたり、セレクターを変えてみたりと試しているのですが、 どうにも解決できないので、お知恵をお貸し下さい。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
単純にjQuery Mobileの知識不足によるものです。単一ページでまとめるように書き換えることにします。