0

これが私のHTMLコードです。私が試していることは単純に聞こえますが、それはできません。jquerymobileが提案するマルチページテンプレートを使用しようとしています。最初のページにはテキストボックスとボタンがあります。ユーザーがテキストボックスに値を入力し、ボタンをクリックすると、ユーザーは「page2」に移動し、検索の詳細が表示されます。

以下のコードで「page2」に移動していますが、検索結果が表示されません。間にアラートを挿入すると、データがポップアップ表示されます。また、page2の戻るボタンでpage1に移動しませんか？

どんなポインタでも大歓迎です。

<!DOCTYPE HTML>
    <html>
    <head>
    <title>Employee Finder</title>

    <script src="jquery-mobile/jquery-1.7.2.min.js"/>
    <script src="jquery-mobile/jquery.mobile-1.0a3.min.js"/>
    <script src="phonegap-1.3.0.js"/> 
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"/>
    <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>

    <script> 

    $(document).ready(function() {
        $('#findemplyoee').click(function() {

          $.mobile.changePage('#page2', { transition: "slide", changeHash: true, reverse: true });

             var employeeNumber = $("#employeeNumber").val();
             var employeedetail = JSON.parse(... call a function here);

             if(employeedetail.found)
             {
                     $('#employeefirstName').text(employeedetail.firstName);
                     $('#employeelastName').text(employeedetail.lastName);
             }
             else
             {
                     $('#employeeDetails').html("<p>Sorry the employee Number you entered was not found!</p>");
             }

        });
    });

    </script>

    </head> 
    <body> 

    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Find Employee Data</h1>
        </div>

        <div data-role="content" id="searchDetails">    
           <input name="employeeNumber" type="text" id="employeeNumber"/>
           <input type="button" id="findemplyoee" data-theme="b" value="Find Employee"/>
        </div>

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>

    <div data-role="page" data-add-back-btn="true" id="page2">
        <div data-role="header">
            <h1>Page Two</h1>
        </div>
        <div id="employeeDetails">
           <p id="employeefirstName"></p>
           <p id="employeelastName"></p>
        </div>
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>

    </body>
    </html>
4

1 に答える 1

0

jQuery Mobile 1.1 にアップグレードする必要があります。あなたの例はうまくいきます：http://jsfiddle.net/eUTga/

含まれている jQuery バージョン (jquery-mobile/jquery-1.7.2.min.js) が古い jQuery Mobile (jquery-mobile/jquery.mobile-1.0a3.min.js) で十分にテストされていないことは確かです -または単に互換性がありません。

jQuery Mobile チームは、jQM ダウンロード サイト (http://jquerymobile.com/download/) にある最新の安定版 (1.1.0) で jQuery 1.6.4 を使用することを推奨しています。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
于 2012-05-15T21:08:28.093 に答える