0

次のコードは、jQuery Mobileを問題から除外すると、完全に機能します。

フォーム：

@using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" }))
{
    @Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town")
}

Javascript：

<script type="text/javascript">
    $(function () {
        $("#TownID").live('change', function () {
            //$("#TownID").change(function () {
            var actionUrl = $('#TheForm1').attr('action') + '/' + $('#TownID').val();
            $('#TheForm1').attr('action', actionUrl);
            $('#TheForm1').submit();
        });
    });
</script>

しかし、jQuery Mobileをサイトにラップすると、フォームを送信するたびに、ログでIDフィールドのみがURL文字列の最後に何度も追加されます。これは私のログでのみ発生し、ブラウザでは発生しません。ブラウザでは、それはまだ正しいことをしているように見えます！例えば。

www.mysite.com/Home/SearchTown/2初めて

www.mysite.com/Home/SearchTown/2/22回目

www.mysite.com/Home/SearchTown/2/2/23回目

しかし、ブラウザではまだ正しいように見えますwww.mysite.com/Home/SearchTown/2

jQuery Mobileがこれを行うのはなぜですか？

4

3 に答える 3

0

これは、フォームをPOSTするたびに、AJAXを使用して応答をロードし、ロードされたページに要素IDが繰り返されているために発生する可能性があります。

ここで推測していますが、あなたの説明に基づくと、フォームが同じフォームマークアップのあるページに投稿されているように聞こえます。フォームの投稿が次のページをレンダリングするたびに、DOMに別 #TheForm1のページが追加されます（jQuery Mobileは以前にロードされたページをDOMに保持し、アクティブなdata-role="page"要素を単純に交換するため）。この動作により#TheForm1、ページに複数の要素があると、セレクター$('#TheForm')はそのIDに一致するDOMの最初の要素のみを返します。これは、最初に投稿したフォームになります。したがって、投稿するたびに、コードは最初に変更したフォーム要素のaction属性を使用します。これが、URLに複数の値が追加されている理由です。

jQuery Mobileでは、クラス名とアクティブなページをコンテナとして使用して要素を識別する方がほとんどの場合に適しています。これは、複数のページ変更にわたってDOMでIDが繰り返される回数がわからないためです。したがって、を使用する代わりに$('#TheForm1')、クラス名を割り当て、それを：と組み合わせて使用​​し$.mobile.activePageます$('.Form1', $.mobile.activePage)。（同じことが選択ボックスにも当てはまります）。

data-ajax="false"別の方法として、フォームタグに追加することで、フォームを拡張しないようにjQueryMobileに指示できます。これにより、AJAXなしの通常のフルページポストバックのように動作します。

編集

段落3で私が指摘しているのは、表示されていないページを意図せずに返すのではなく、現在表示されているページに対して常に正しいフォーム要素を選択していることを確認する必要があるということです。グローバル変数は、現在表示されているページのコンテキストを提供します。$.mobile.activePage次に、クラスベースのセレクター（IDベースではなく）が、変更ハンドラーで正しいフォーム要素が取得されるようにします。このようなもの：

<form class="town-form" action="#">
    <select class="town-selector">
        <option value="1">Town A</option>
        <option value="2">Town B</option>
        <option value="3">Town C</option>
    </select>
</form>

<script type="text/javascript">
    $(function () {
        $(".town-selector").live('change', function () {
            var form = $('.town-form', $.mobile.activePage);
            var actionUrl = form.attr('action') + '/' + $(this).val();
            form.attr('action', actionUrl);
            alert('submitting to: ' + form.attr('action'));
            form.submit();
        });
    });
</script>
于 2012-04-24T02:23:04.513 に答える
0

あなたがホールページを提出していて、jQuery mobileはそのようなことを好まないので、それぞれの後POSTにIDを追加するだけdocument.locationです...私はいくつかのモバイルプロジェクトでそれを学びました...

この行の代わりに、次の$('#TheForm1').submit();ようにします。

var url = $('#TheForm1').attr('action') + '/' + $('#TownID').val();

$.post(url, $('#TheForm1').serialize(), function(data) {
    // do something with data if you send back something...
    // or just change page with jQuery Mobile API
});

return false;
于 2012-04-24T19:09:09.727 に答える
0

Iv'eはこれを十分長く残しました、そして誰も答えを持っていません！

于 2012-05-27T10:05:12.437 に答える