前提・実現したいこと
MonacaのテンプレートにあるjQuery Mobileでhtmlのページ遷移をさせたいのですが、「避難者入力」ボタンではページ遷移するのに「QRコード表示」ボタンではページ遷移しません。何が原因でしょうか?
発生している問題・エラーメッセージ
エラーはなくボタンをクリックしても遷移しない。
該当のソースコード
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"> <script src="lib/jquery/jquery-1.12.4.min.js"></script> <script src="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> </script> </head> <body data-gr-c-s-loaded="true" class="ui-mobile-viewport ui-overlay-a" style="" data-feedly-mini="yes"> <!-- Start of first page: #one --> <div data-role="page" id="one" data-url="one" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style=""> <div data-role="header" role="banner" class="ui-header ui-bar-inherit"> <h1 class="ui-title" role="heading" aria-level="1">Multi-page</h1> </div><!-- /header --> <div role="main" class="ui-content"> <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">避難者情報入力</a></p> <p><a href="#three" class="ui-btn ui-shadow ui-corner-all">QRコード表示</a></p> </div> </div><!-- /content --> <div data-role="footer" data-theme="a" role="contentinfo" class="ui-footer ui-bar-a"> <h4 class="ui-title" role="heading" aria-level="1">避難者名簿登録アプリ</h4> </div><!-- /footer --> </div><!-- /page one --> <!-- Start of second page: #two --> <div data-role="page" id="two" data-theme="a" data-url="two"> <div data-role="header"> <h1>避難者名簿登録</h1> </div><!-- /header --> <div role="main" class="ui-content"> <!-- <h2>page2</h2> <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p> <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p> <p><a href="#one" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Back to page "one"</a></p> --> <div class="form-row"> <label class="col-sm-3 col-form-label">お名前 <span class="badge badge-danger">必須</span></label> <div class="col-sm-9"> <p> <input id="name" type="text" name="name" autocomplete="name" class="form-control" placeholder="お名前" required /> </p> </div> </div> <form method="post" action="example.cgi"> <div style="text-align:center"><input id="qr" type="button" onclick="send_to_datastore()" value="確定"></input></div> <div> <button type="button" onclick="history.back()">戻る</button> </div> </div> <!-- Start of second page: #three --> <div data-role="page" id="three" data-theme="a" data-url="three"> <div data-role="header"> <h1>遷移させたいページ先</h1> </div> <div role="main" class="ui-content"> </div> </body> </html> コード
試したこと
idを付けて紐づけした
補足情報(FW/ツールのバージョンなど)
MonacaのテンプレートjQuerymobile
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
あと質問タグ足りない気がします。
https://teratail.com/tags/Monaca
https://teratail.com/tags/jQuery
https://teratail.com/tags/jQuery+Mobile
ご指摘ありがとうございます。問題は解決しました。
質問が受付中のままになっています。
https://teratail.com/help#resolve-myself
>後から読む人のためにも、具体的な解決手順を記載してください。
解決済みにいたしました。親切にありがとうございました!
回答1件
あなたの回答
tips
プレビュー