Question

在过去的几天里，我总是遇到一些关于phonegap和jquery的问题。我需要使用列表构建电话簿应用程序并过滤并链接用户详细信息。因此我几乎没有问题。

起初我遇到了从Web服务器获取数据的问题（我使用PHP脚本返回json数据并发出了ajax请求），而不是我必须将其配置为使用跨域，这很好（我我也将数据存储在本地设备数据库中）。这是正确的做法吗？

之后我想为用户详细信息创建一个新的html页面。一切顺利，直到我在这个新的html页面中添加了新的javascript文件。 Javascript没有用，我不知道是什么原因。我甚至做了基本的hello页面并包含了js文件，只有一行像alert（hello）;在它，仍然没有。像所有js文件只在index.html中加载而不在任何其他页面中加载。我的代码是（userdetail.js）：

document.addEventListener("deviceready", onDeviceReady, false);
var db = null;
// Cordova is ready
//
function onDeviceReady() {
    console.log("opening database");
    db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
    console.log("database");
    //db.transaction(getUser, errorCB);     
    alert("hello");
}

和html页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,width=device-width" />
    <title>Hello</title>
</head>
<body>
<div id="userPage" data-role="page">    
    <div data-role="content">hallo
                <div id="userDetail"></div> 
    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userdetail.js"></script> 

<script type="text/javascript">
    app.initialize();
</script>
</body>
</html>

仍然没有让它发挥作用。比我决定，我将使用javascript在一个页面中制作所有内容。我在这里错过了什么吗？我甚至没有得到console.log信息。我正在使用此部分重定向用户（链接使用javascript并附加到此部分的index.html页面）：

    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
    <title>Hello World</title>
    </head>
    <body>
    <div id="userListPage1" data-role="page">   

    <div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;">

        <h1> </h1>
        <a href="#"  class="ui-btn ui-icon-recycle ui-btn-icon-notext ui-corner-all ui-btn-right"></a>

        <!--
        <div id="custom-border-radius">
            <a href="#mypanel" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all ui-btn-left">No text</a>
        </div>
        -->
        <div data-role="navbar" data-iconpos="bottom">
            <ul>
                <li><a href="#" class="ui-btn-active ui-nodisc-icon ui-state-persist" data-icon="home" data-theme="a"></a></li>
                <li><a href="#userListPage2" class="ui-nodisc-icon ui-alt-icon" data-icon="shop" data-theme="a"></a></li>
                <li><a href="#userListPage3" class="ui-nodisc-icon ui-alt-icon" data-icon="user" data-theme="a"></a></li>
            </ul>
        </div>

    </div>


    <div data-role="content" >
        <ul id="userList1" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">

        </ul>   
    </div>

    <div data-role="footer" data-theme="b" data-position="fixed">

        <h1>Private</h1>
    </div>  


    <!--
    <div data-role="panel" id="mypanel" data-position="left" data-display="push" data-corners="false" data-theme="b" data-overlay-theme="a">
            <ul data-role="listview">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#panel-fixed-page2">Accordion</a></li>
                    <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
                    <li><a href="#panel-fixed-page2">Autocomplete</a></li> 
            </ul>
        </div>
     -->


    </div>


    <div id="userListPage2" data-role="page">   



     <div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;">

        <h1> </h1>
        <a href="#"  class="ui-btn ui-icon-recycle ui-btn-icon-notext ui-corner-all ui-btn-right"></a>

        <div data-role="navbar" data-iconpos="bottom" >
            <ul>
                <li><a href="#userListPage1" class="ui-nodisc-icon ui-alt-icon" data-icon="home" data-theme="a"></a></li>
                <li><a href="#" class="ui-btn-active ui-nodisc-icon ui-state-persist" data-icon="shop" data-theme="a"></a></li>
                <li><a href="#userListPage3" class="ui-nodisc-icon ui-alt-icon" data-icon="user" data-theme="a"></a></li>
            </ul>
        </div>

    </div>


    <div data-role="content">
        <ul id="userList2" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">

        </ul>   
    </div>

    <div data-role="footer" data-theme="b" data-position="fixed">

        <h1>Companies</h1>
    </div>  


    </div>

    <div id="userListPage3" data-role="page">   



        <div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;">

        <h1> </h1>
        <a href="#"  class="ui-btn ui-icon-recycle ui-btn-icon-notext ui-corner-all ui-btn-right"></a>

        <div data-role="navbar" data-iconpos="bottom" >
            <ul>
                <li><a href="#userListPage1" class="ui-nodisc-icon ui-alt-icon" data-icon="home" data-theme="a"></a></li>
                <li><a href="#userListPage2" class="ui-nodisc-icon ui-alt-icon" data-icon="shop" data-theme="a"></a></li>
                <li><a href="#" class="ui-btn-active ui-nodisc-icon ui-state-persist" data-icon="user" data-theme="a"></a></li>
            </ul>
        </div>

    </div>


    <div data-role="content">
        <ul id="userList3" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">

        </ul>   
    </div>

    <div data-role="footer" data-theme="b" data-position="fixed">

        <h1>Organisations</h1>
    </div>  


</div>



<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userlist.js"></script>

<script type="text/javascript">
    app.initialize();
</script>

</body>
</html>

这里是从上面生成userList1的js

function querySuccess(tx, results) {
var len = results.rows.length;
console.log("TELEFONBOOK table: " + len + " rows found.");
$('#userList1 li').remove();
$('#userList2 li').remove();
$('#userList3 li').remove();
for (var i=0; i<len; i++){
    //append the users to userlist, show the data
    if(results.rows.item(i).typ == "p"){
        $('#userList1').append('<li><a href="user_details.html?id=' + results.rows.item(i).id + '"> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></a></li>');
    }else if(results.rows.item(i).typ == "f"){
        $('#userList2').append('<li><a href="user_details.html?id=' + results.rows.item(i).id + '"> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></a></li>');
    }else if(results.rows.item(i).typ == "o"){
        $('#userList3').append('<li><a href="user_details.html?id=' + results.rows.item(i).id + '"> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></a></li>');
    }


    console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
}
$('#userList1:visible').listview('refresh');
$('#userList2:visible').listview('refresh');
$('#userList3:visible').listview('refresh');
}

以下是user_details.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,width=device-width" />
<title>Hello</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userdetails.js"></script>
<script type="text/javascript">
    app.initialize();

</script>
</head>
<body>
<div id="userPage" data-role="page">    

    <div data-role="content">hallo
                <div id="fullName"></div> 
    </div>

    <div data-role="footer" data-theme="b" data-position="fixed">
        <h1>Privat</h1>
    </div>

   </div>
   </body>
   </html>

，这是userdetails.js

var id = getUrlVars()["id"];

// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
var db = null;
// Cordova is ready
//
function onDeviceReady() {
    console.log("opening database");
    db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
    console.log("database");
    db.transaction(getUser, errorCB);       
    alert("hello");
}


// Query the database
//
function getUser(tx) {
    var sql = "SELECT * FROM TELEFONBOOK WHERE id=:id";
    tx.executeSql(sql, [id], getUserSuccess);
}

// Query the success callback
//
function getUserSuccess(tx, results) {
    var user = results.rows.item(0);

    $('#fullName').text(user.nachname + ' ' + user.vorname);
    alert("hallo");
}


// Transaction error callback
//
function errorCB(err) {
    alert("Error processing SQL: "+err);
}


//function to get the id value
function getUrlVars() {
alert("test");
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
}
    return vars;
}

之后，我的最后一个问题。我在index.html页面列表视图中做了这样的：
```
<div data-role="content">
    <ul id="userList3" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    </ul>   
</div>
```
现在每次点击过滤字段时我都会遇到问题。我得到一个顶部边框和底部边框白线。例如（当我在过滤器字段中单击时，请注意两条红线之间的白线）：

我不知道使用phonegap和jquery mobile有这么多问题时这是否正常。但任何帮助或建议都会有所帮助。谢谢。

更新

2.经过艰苦的搜索和测试，我在这里找到了解决方案Pageshow not triggered after changepage

3.我设法找到了问题所在。在jquery移动css改变了 ui-footer-fixed.ui-fixed-hidden to

ui-footer-fixed.ui-fixed-hidden{bottom:-1px;padding-bottom:1px}

和标题相同：

ui-header-fixed.ui-fixed-hidden{top:-1px;padding-top:1px}

Answer 1

感谢您的编辑。对于第二点，这里有一些建议：

userdetail.js中的代码只会在实际终端上触发，而不是在桌面计算机上的浏览器上调试时，因为桌面浏览器不会抛出deviceready事件。如果要模拟此部件，则应替换

document.addEventListener("deviceready", onDeviceReady, false);

通过

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
        document.addEventListener("deviceready", onDeviceReady, false);
} else {
    onDeviceReady();
}

在userdetail.js文件中。（并根据需要更改匹配测试以添加windws phone userAgent; - ）

清理混乱：将所有脚本放在索引中head的末尾：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
        <title>Hello World</title>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/userdetail.js"></script> 
        <script type="text/javascript" src="js/userlist.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </head>
    <body>
        ...
    </body>
</html>

通过此订单，您将获得console.log事件。不要忘记userdetails.js中使用的localStorage也不能在桌面浏览器上运行。

最后（但并非最不重要），要填充列表视图，您必须从某个地方调用querySuccess方法，我现在没有看到它。

更新：正如您所发现的那样，您还可以在第二页页面div 中添加脚本（参见SO Pageshow not triggered after changepage）

phonegap 3.5.0和jquery mobile 1.4.3

1 个答案: