- 締切済み
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 です。ご存じの方いましたら、教えてください。 お願いします。
- cats777
- お礼率0% (0/1)
- Java
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
JQuery への直リンクでの呼び出しはやめましょう。 JQuery 実装部はどこに？ このＪＳＰ（ＨＴＭＬ）だと 送信は input type="submit" で行われてますよ。 あとその遷移先は home であって home.aciton ではない。 <s:form action="home"> と <form action="home"> は遷移先が違ったはずです。
関連するQ&A
- 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 バージョン
jQuery Mobileでスマホサイトを作成しているのですが 現在は <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> と言うソースを使っていたのですが http://www.buildinsider.net/web/jquerymobileref/24 を見たら、私と違いました。 私のバージョンが古いのでしょうか？ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> へ 書き換えたほうが良いのでしょうか？
- ベストアンサー
- CSS
- jquery.mobile-1.1.1.min.c
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js"></script> </head> ・ ・ ・ 以下省略 のようにＨＰを作っているのですが、 jquery.mobile-1.1.1.min.cssの部分で設定されているcssの値を変更することは出来ないのでしょうか？ 例えば、 .ui-content .ui-listview { margin: -15px; } の値を、 margin: -15px; ではなく、 margin: 50px; にしたい場合、 どうすればいいですか？ ul.ul_test { margin-top: 50px; } を作って、 <ul class="ul_test" としてみましたが、 適用されませんでした。
- ベストアンサー
- CSS
- jQueryについて教えてください
現在ドットインストールでjQueryを勉強しています いきなりつまずいたといいますかエラー？があります 以下のコードなのですが文字色（<p>）が赤色になりません なぜでしょうか？ このコードではjQueryはDLせずに読み込ませています DLしたほうがいいでしょうか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <p>jQueryの練習</p> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function () { $('p').css('color', 'red'); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jquery.mobile 画像を中央に表示
<!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが 正方形ではない画像が、右上に寄ってしまうのですが これを回避する方法はありますか？ 例で言うのであれば 添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。
- ベストアンサー
- HTML
- jQuery 読み込み
jQuery 読み込み ソースなのですが <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jqueryの練習</title> </head> <body> <p>jQueryの練習</p> <script src="http://code.jquery.com/jquery-1.10.1min.js"></script> <script> $(function(){ $('p').css('color','red').hide('slow'); }); </script> </body> </html> で9行目と11行目がエラーになります。 英語読めないのでエラーの内容はわかりませんが jQueryが読み込めてないのだと思っていて そこで質問なのですが 9行目で「http:～」と絶対パスで指定してるのにも関わらず jQueryを読み込めない理由って何かありますでしょうか？ （全く的外れな事を言い出していたらごめんなさい。）
- ベストアンサー
- JavaScript
- jQueryが動きません。
表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って 導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので 手が出ない状態です。 よろしくお願いします。
- 締切済み
- JavaScript
- jquerymobileで作成するアンケートページ
jQuerymobileでアンケートページを作成しております。アンケートの結果(textbox,checkbox,radioboxなど)をformからcgiに飛ばして最終的にcsvファイルでデータを見る方法を考えております。cgiは「WebHandlerPro」(http://www.tryhp.net/webhandler.htm)の物を使用させていただいております。 ソースは [page1] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Mobile</title> <meta name="viewport" content="width=device-width, initital-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = false; $.mobile.ajaxEnabled = false; }); </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> css省略 <body> <div data-role="page" id="page1" data-add-back-btn="true" data-back-btn-text="戻る" data-title="page1"> <div data-role="header" data-position="fixed"> <a href="#home" data-icon="home" data-iconpos ="notext" class="ui-btn-right"></a> <h1>page1</h1> <h3>アンケート</h3> </div> <!-- header --> <div data-role="content"> <h3>以下の設問に～</3> <h4>～～</h4> <p>以下の設問項目の～</p> <form method="post" action="～.cgi" name="myform"> <div data-role="fieldcontain" class="radio"> <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> <legend>aaa</legend> <input type="radio" name="s1" value="1" id="s1-1"> <label for="s1-1">1</label> <input type="radio" name="s1" value="2" id="s1-2"> <label for="s1-2">2</label> <input type="radio" name="s1" value="3" id="s1-3" checked="checked"> <label for="s1-3">3</label> <input type="radio" name="s1" value="4" id="s1-4"> <label for="s1-4">4</label> <input type="radio" name="s1" value="5" id="s1-5"> <label for="s1-5">5</label> </fieldset> </div> <!-- radio --> <div data-role="fieldcontain" data-theme="b"> <label for="impression">aaa</label> <select name="impression" id="impression" data-native-menu="false" multiple data-theme="b" data-mini="true" data-inline="true"> <option value="1" selected>b</option> <option value="2">c</option> <option value="3">d</option> <option value="4">e</option> <option value="5">f</option> </select> </div> <!-- select --> <div data-role="footer" class="ui-bar" data-position="fixed"> <input type="submit" value="送信"data-icon="arrow-r" data-inline="true" data-iconpos="right"> </div> </form> </div> <!-- menu --> </body> </html> こんな感じのhtmlが何枚もあるようなアンケートです。 jQQuerymobileを使用しないでhtml、cssだけでつくったアンケートはうまく行くので,jQuelymobileでformを使う際におかしな点がありましたらご指摘頂きたいです。 まだ,かなり初心者なのでよくわかっていないところがありますがどなたか詳しい方よろしくお願い致します。
- ベストアンサー
- JavaScript
- Struts2のValidation後のパラメータ
Struts2のValidation機能を利用して入力チェックを行っているのですが、 入力画面表示時にGETパラメータを使用している場合、バリデーションエラーでINPUT画面に戻った際にGETパラメータが消えてしまいます。 Struts2: 2.3.15を使用しています 入力画面(index.jsp)は"simple/index.action?id=aa"のようにURLにGETでIDを指定する形式で表示します。(画面上に「ID:aa」が表示されます) 次にタイトル未入力のまま「確認」ボタンを押すとValidationが実行されてエラーメッセージとともに入力画面に戻ってくるのですが、「ID:」と表示され、Actionクラス(Index.java)のidが未設定の状態になります。 Validationエラー後もidがセットされ「ID:aa」が表示されるようにするにはどうすれば良いのでしょうか？ Struts2 を触り始めて間もないですので質問自体が的外れかもしれません・・・ 何かアドバイスをいただけたら幸いです。 よろしくお願いいたします。 サンプルコードを以下に示します。 [struts.xml] <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="simple" extends="struts-default"> <action name="index" method="index" class="simple.action.Index"> <result name="success">/index.jsp</result> </action> <action name="confirm" method="confirm" class="simple.action.Index"> <result name="success">/confirm.jsp</result> <result name="input">/index.jsp</result> </action> </package> </struts> [Index.java] package simple.action; import com.opensymphony.xwork2.ActionSupport; public class Index extends ActionSupport{ private String id; public String getId() { return id; } public void setId(String id) { this.id = id; } public String index(){ return SUCCESS; } public String confirm(){ return SUCCESS; } } [Index-confirm-validation.xml] <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE validators PUBLIC "-//Apache Struts//XWork Validator 1.0.3//EN" "http://struts.apache.org/dtds/xwork-validator-1.0.3.dtd"> <validators> <!-- タイトルの必須入力チェック--> <field name="title"> <field-validator type="requiredstring"> <message>タイトルを入力してください</message> </field-validator> </field> </validators> [index.jsp] <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="sj" uri="/struts-jquery-tags"%> <!DOCTYPE html> <html> <body> ID:<s:property value="id" /> <s:form action="confirm"> <s:textfield name="title" label="タイトル" ></s:textfield> <s:submit value="確認"></s:submit> </s:form> </body> </html>
- ベストアンサー
- Java
- htmlのformの表示について【Jquery】
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> function formChanged(ev){ var sel = $('.chk:checked').map(function () { return this.checked ? this.value : null; }).get().join(); $("#output").text(sel); } formChanged(null); $(document).on("change",'.chk:checked',formChanged); </script> <form method="post" action="mail.php"> <table> <tr> <th>カテゴリー</th> <td> ・ABC： <input type="checkbox" name="カテゴリー[]" value="[abc]" class="chk" /> ・DEF： <input type="checkbox" name="カテゴリー[]" value="[def]" class="chk" /> ・GHI： <input type="checkbox" name="カテゴリー[]" value="[ghi]" class="chk" /> </tr> <tr> <th>選択した製品シリーズ</th> <td><span id="output"></span></td> </tr> <tr> </table> </form> これは、チェックボックスにチェックをいれたチェックボックスの値がリアルタイムに表示される仕組みなのですが、逆にチェックを外した場合は、値が消えません。消えるようにするにはどうしたらいいでしょうか。アドバイスをいただけると幸いです。
- 締切済み
- JavaScript
