我的Cordova项目没有响应jquery

时间:2013-01-21 19:31:17

标签: jquery iphone xcode html5 cordova

我一直在寻找最近两天,我似乎无法找到解决方案。

我正在努力想要一个小应用程序,以可搜索的列表视图列出我们公司的所有员工。虽然我设法让代码在模拟器和我的iphone中运行,但是关于创建可搜索列表视图的jquery的部分没有显示出来。我认为我通过js和css链接进行了双重和三重检查,但我仍然无能为力。任何帮助都会非常感激。

BTW,我正在使用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;
}

1 个答案:

答案 0 :(得分:0)

我找到了解决方案。我链接的jquery脚本的顺序是错误的。

现在出现过滤选项。虽然,键盘不活跃。我会继续寻找这个。