1

2 ページ以上の jquery モバイル サイトのフォームに問題があります。

1つのページにフォームが含まれており、このフォームの送信ボタンをクリックすると、フォームデータを送信してからこのページにとどまりたいです。そのページのIDをフォームのアクション属性に追加しました。( <form action="#two">)。

残念ながら、これはうまくいかないようです。フォーム データを送信すると、ブラウザの URL が正しい (正しい ID が追加されている) 場合でも、常に実際のファイルの最初のページが読み込まれます。

そしてそれはさらに悪化しています。フォームのアクション属性に id を追加したため、jqm はファイルの最初のページをロードしますが、明らかに 2 ページ目にあると考えているため、フォームのあるページを指すリンクは機能しなくなります。

この問題を解決した 1 つのこと:data-ajax="false"フォーム要素に追加すると、jqm がこのフォームの ajax ベースのページ処理を強制的に停止し、送信ボタンをクリックすると正しいページが表示されますが、ページ全体をリロードしたくないので、それはありません。解決。

ここで何が起こっているのか知っていて、同じ問題に遭遇した人はいますか? 添付の例を自由に試してください。誰かがこれを解決できることを願っています。

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-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 src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="one">

    <div data-role="header">
        <h1>First page</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>
        <p><a href="#two">Link to second page</a></p>   
    </div><!-- /content -->

</div><!-- /page -->


<div data-role="page" id="two">

    <div data-role="header">
        <h1>Second page</h1>
    </div><!-- /header -->

    <div data-role="content">   

        <form action="#two">
            <button type="submit">Submit</button>
        </form>

    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>
4

1 に答える 1

1

関数を呼び出すように入力送信タグを変更します。

<input type="submit" onclick="submitThis()" />

このロジックを送信関数に追加すると、ajax を介して送信 URL が呼び出され、false が返されてフォームの物理的な送信が回避されます。

var submitThis = function() {

// get form data using jQuery, and call the link using $.ajax()

return false; // This will avoid submitting the page
}

--EDIT-- 代わりに false を返すか、 preventDefault() メソッドを使用することもできます

        $("#submit").submit( function (e) {
                e.preventDefault();
               // do your task
        });
于 2012-10-29T01:55:32.267 に答える