1

これを入力する前に表示された同様の質問をすべて調べましたが、私の問題に対する答えが見つかりません。

jQuery Mobile (1.1) と jQuery (1.7.1) を使用して小さなポータルを開発しています。そのため、すべてを 1 つのページにまとめ、data-role="page" を使用してプロセスの遷移を処理します。

現在の流れはこんな感じです。

  1. ユーザーがメイン URL にアクセス
  2. ユーザーがアクションをクリックする (「これを行う」または「あれを行う」)
  3. ユーザーがアクションをクリックすると (どちらも data-role="button" を持つ別のファイルへの href を持つタグです)、そのページに問題なく移動します。

ただし、最初にページにアクセスしたとき (URL を手動で入力するか、アクション ボタン/リンクをクリックして)、フォームは空で、送信ボタンをクリックしても何も起こりません。ページを更新した後、すべてが正常に機能します。

たとえば、誰かがアクション リンク #1 (「支払いを行う」) をクリックしたとします。

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
<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.min.js"></script>
<title>Credit Card Payments</title>
<style>
    .ui-dialog .ui-header a[data-icon=delete] { display: none; }
</style>
<script>
$(document).bind("mobileinit", function(){
});
</script>
</head>
<body>
    <div data-role="dialog" id="popup">
        <div data-role="header" data-theme="b" data-content-theme="b">
            <h1>Destination</h1>
        </div>
        <div data-role="content" data-theme="b" data-content-theme="b">
            Please choose what you would like to do:
            <a href="payment.php" data-role="button">Make A Payment</a>
            <a href="create.php" data-role="button">Add Credit Card To Account</a>
        </div>
    </div>
</body>
</html>

「payment.php」に移動し、ページ ID「step1」を表示します。これは単純なログイン フォームです。

<div data-role="page" id="step1">
    <div data-role="header">
        <h2>Log In</h2>
    </div>
    <form id="step1frm">
        <div data-role="fieldcontain">
            <label for="mail">Blesta e-mail: </label>
            <input type="text" name="mail" id="mail" />
        </div>
        <div data-role="fieldcontain">
            <label for="pw">Blesta password: </label>
            <input type="password" name="pw" id="pw" />
        </div>
            <input type="button" id="step1frmsub" value="Log In" />
    </form>
</div>

ログインフォームページにも多くのjQMがありますが、すべてのコードをコメントアウトした後、何も変更されなかったので、それが原因ではありません. また、W3.org を介して HTML を検証したところ、有効でした。

何が起こっているかをよりよく表しているのは、私が撮った Chrome のインスペクターのスクリーン ショットです。

初回訪問- 「支払いを行う」をクリックした後

After Refreshing Page - after refreshing the login for "make a payment"

Edit - As a small follow up, I noticed "data-external-page="true"" is being set on the div page on load, and then on refresh it's not there anymore. From my understanding of what I've read this is done because it's coming from a dialog basically, but I'm not sure if there's a way to disable that from being set.

Answer - Well, the solution to this, after initially thinking it wasn't what I was looking for, was actually to add this to my links:

rel="external"

So that they look like this:

<a href="payment.php" data-role="button" rel="external">Make A Payment</a>
4

1 に答える 1

1

さて、これに対する解決策は、最初は私が探していたものではないと考えた後、実際にはこれを私のリンクに追加することでした:

rel="external"

次のようになります。

<a href="payment.php" data-role="button" rel="external">Make A Payment</a>
于 2012-09-26T15:16:19.617 に答える