-1

この 2 日間ずっと探していましたが、解決策が見つからないようです。

会社のすべての従業員を検索可能なリスト ビューに一覧表示する小さなアプリを取得するのに苦労しています。シミュレーターと iPhone の両方でコードを動作させることができましたが、検索可能なリストビューを作成するための jquery に関する部分は表示されません。私は js と css のリンクでダブルとトリプルをチェックしたと思いますが、それでも私は無知です。どんな助けでも本当に感謝しています。

ところで、私は Xcode 4.5.2、Jquery-mobile-1.2.0、および cordova-2.3 を使用しています。

index.html は次のとおりです。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>  
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css" /> 
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css" />


</head>
<body>

    <div data-role="page">

        <div data-role="header" id="header" class="header">
            <h1>MIT Employees</h1>
        </div><!-- /header -->

        <div data-role="content" id="header2">
            <h2>Select Employee</h2>
        </div><!-- /content -->
    <div id="wrapper">
        <ul data-role="listview" data-inset="true" data-filter="true"><div data-role="content" id="employeeList"></div></ul>
    </div>

    <div id="busy"/>Loading...</div>

    <script src="js/phonegap.js"></script>
    <script src="js/iscroll.js"></script>
    <script src="js/getEmpList.js"></script>
    <script src="js/employ.js"></script>
    </div>
</body>

</html>

そしてここにJavascript:

var db;
var dbCreated = false;

var scroll = new iScroll('wrapper', { vScrollbar: true, hScrollbar:false, hScroll: false });


//add listener when device ready
document.addEventListener("deviceready", onDeviceReady, false);


//function will be called when device ready
function onDeviceReady() {
db = window.openDatabase("EmployeeDirectoryDB", "1.0", "MIT Employee Database", 200000);
if (dbCreated)
    db.transaction(getEmployees, transaction_error);
else
    db.transaction(populateDB, transaction_error, populateDB_success);
}
function transaction_error(tx, error) {
$('#busy').hide();
alert("Database Error: " + error);
}

function populateDB_success() {
dbCreated = true;
db.transaction(getEmployees, transaction_error);
}

function getEmployees(tx) {
var sql = "select * from employees order by lname, fname";
tx.executeSql(sql, [], getEmployees_success);
}

function getEmployees_success(tx, results) {
$('#busy').hide();
var len = results.rows.length;
for (var i=0; i<len; i++) {
    var employee = results.rows.item(i);
    $('#employeeList').append('<li data-icon="arrow-r"><a href="employeedetails.html?id=' + employee.id + '">' +
                              '<p class="line2">' + employee.empid + ' ' + employee.lname + ', ' + employee.fname + '</a></li>');
}
setTimeout(function(){
           scroll.refresh();
           },100);
db = null;
}
4

1 に答える 1

0

解決策を見つけました。リンクされた jquery スクリプトの順序が間違っていました。

フィルタリングオプションが表示されるようになりました。ただし、キーボードはアクティブではありません。私はこれを探し続けます。

于 2013-01-21T20:25:26.727 に答える