0

複数ページのテンプレートを設定しました。最初のページには内部ページへの一連のリンクがありますが、データを動的にロードする同じ #template ページへの 1 つを除くすべてのリンクがあります。もう 1 つのリンクは、ページ内に作成したフォームへのリンクです。

私が抱えている問題は、リンクの1つに移動し、ページを続けてから戻るボタンを使用して最初のページに戻るときです。その後、フォームへのリンクをクリックすると、#に移動しませんページに移動すると、他のリンクで最後に表示されたページに移動します。

それが理にかなっていることを願っています-多分図はそれをより明確にするでしょう

ホーム > 製品一覧 > 製品詳細

商品詳細 > 商品一覧 > ホーム（戻るボタン）

ホーム > お問い合わせフォーム

この最後のステップでは、連絡先フォームではなく、製品詳細ページが再び表示されます。ページをクリアしていないかのようです。

私のコード（わかりやすくするために切り捨てられています）：

<script type="text/javascript">
    $(document).bind("mobileinit", function () {
        $.mobile.allowCrossDomainPages = true;
        $.support.cors = true;
    });

    $(document).delegate("#pageDetail", "pagecreate", function () {
        $(this).css('background', '#ECF2FE');//`this` refers to `#pageDetail`
    });

    $(document).bind("pagebeforechange", function (e, data) {           
        // We only want to handle changePage() calls where the caller is
        // asking us to load a page by URL.         

        if (typeof data.toPage === "string") {
            $.mobile.pageData = (data && data.options && data.options.pageData) ? data.options.pageData : null;
            // We are being asked to load a page by URL, but we only
            // want to handle URLs that request the data for a specific
            // category.

            var page;
            var type;
            var cat;
            if ($.mobile.pageData && $.mobile.pageData.type) {
                type = $.mobile.pageData.type;
            }

            if ($.mobile.pageData && $.mobile.pageData.cat) {
                cat = $.mobile.pageData.cat;
            }

            if ($.mobile.pageData && $.mobile.pageData.page) {
                page = $.mobile.pageData.page;
            }

            var url = $.url(data.toPage);   //  page url
            var hash = url.fsegment(1).replace(/&.*/, "");  //  nav hash for page holder            

            switch (hash) {
                case "pageList":
                    $.ajax({
                        url: "http://localhost/myapp/" + type + ".aspx?type=" + type,
                        datatype: "html",
                        success: function (data) {
                            $('.submenu').html(data);
                            $('.title').html(type);
                            $('.submenu').trigger('create');
                        }
                    });
                    break;
                case "pageDetail":
                    $('.detail').load('http://localhost/myapp/' + type + '.aspx?page=' + page + '&type=' + type + ' #contentdiv', function () {
                        $(this).trigger('create');
                    });
                    break;
                default:
                    break;
            }
        }
    });
</script>
</head>

HTML ビット

<body>
<div data-role="page" id="home">
    <div data-role="content">
        <a href="#pageList?type=products" data-transition="slide"><img src="images/Icon-Courses.png" alt="courses" /></a><br />
        <a href="#contactForm" data-transition="slide"><img src="images/Icon-Contact.png" alt="contact" /></a>              
    </div>
</div>

<div data-role="page" data-theme="a" id="pageList" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
    <div data-role="header" data-position="fixed">          
        <h1 class="title">Products</h1>      
    </div>
    <div data-role="content" class="submenu">   
        <!-- content gets put in here -->
    </div>

</div>

<div data-role="page" data-theme="a" id="pageDetail" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
    <div data-role="header" data-position="fixed">          
        <h1 class="title">Products</h1>      
    </div>
    <div data-role="content" class="submenu">   
        <!-- content gets put in here -->
    </div>

</div>


<div data-role="page" data-theme="a" id="contactForm" data-add-back-btn="true" class="detailpage" style="background-color:#F0F0F0 !important;">
    <div data-role="header" data-position="fixed">          
        <h1 class="title">Contact Us</h1>
    </div>
    <div data-role="content" class="detail">
        <div id="contentdiv" style="margin:10px auto;width:90%;">
        <label for="name">Your Name</label>
            <input type="text" id="name" style="width:90%;" data-mini="true" />
            <label for="email">Email Address</label>
            <input type="text" id="email" style="width:90%;" data-mini="true" />
            <label for="phone">Phone Number</label>
            <input type="text" id="phone" style="width:90%;" data-mini="true" />
            <label for="comments">Enquiry / Comments</label>
            <textarea id="comments" rows="80" style="width:90%;" data-mini="true"></textarea>
            <br />
            <input type="submit" id="submit" value="Send Enquiry Now" />                
        </div>
    </div>

</div>

</body>
</html>

クエリ文字列パラメーターを処理するために jqm.page.params.js を使用しています。

そこに明らかなことはありますか？#pageDetail ページへのリンクは、#pageList に表示されるコンテンツ内に返されます。

最初に他の場所に行った場合、キャッシュをクリアできないように見え、連絡先フォームに正しく移動しない理由がわかりません。そこにまっすぐ行けば、うまくいきます。

誰でも光を当てますか？ところで、これはPhoneGapをスタンドアロンとして使用して機能する必要があります

ありがとう

4

1 に答える 1

0

実際にはこれについて少しぼんやりしていますが、それは複数の div に同じクラス名があり、それらを使用してデータをインポートしていたためです。そのため、データをリモートでロードしているときに、複数の場所に配置され、フォームが上書きされていました。同時に...

于 2012-08-30T08:59:10.260 に答える