Fatal编程技术网
  • javascript/
  • Javascript phonegap 3.5.0和jquery mobile 1.4.3

Javascript phonegap 3.5.0和jquery mobile 1.4.3

javascript jquery html css cordova

Javascript phonegap 3.5.0和jquery mobile 1.4.3,javascript,jquery,html,css,cordova,Javascript,Jquery,Html,Css,Cordova,在过去的几天里，我一直面临着phonegap和jquery的一些问题。我需要建立电话簿应用程序与列表和过滤器和用户详细信息的链接。因此，我有几个问题 起初，我在从web服务器获取数据时遇到问题，我使用PHP脚本返回json数据并发出ajax请求，然后我不得不将其配置为跨域工作，这很好，我还在本地设备数据库中存储数据。这是正确的方法吗 之后，我想为用户详细信息创建一个新的html页面。一切都很顺利，直到我在这个新的html页面中添加了新的javascript文件。Javascript不起作用，我不

在过去的几天里，我一直面临着phonegap和jquery的一些问题。我需要建立电话簿应用程序与列表和过滤器和用户详细信息的链接。因此，我有几个问题

起初，我在从web服务器获取数据时遇到问题，我使用PHP脚本返回json数据并发出ajax请求，然后我不得不将其配置为跨域工作，这很好，我还在本地设备数据库中存储数据。这是正确的方法吗

之后，我想为用户详细信息创建一个新的html页面。一切都很顺利，直到我在这个新的html页面中添加了新的javascript文件。Javascript不起作用，我不知道是什么原因。我甚至制作了基本的hello页面，包括js文件和alerthello这样的一行代码；在里面还是什么都没有。像所有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>
标题也一样：

ui-header-fixed.ui-fixed-hidden{top:-1px;padding-top:1px}
谢谢你的编辑。关于第二点，以下是一些建议：

由于桌面浏览器不会引发deviceready事件，因此，userdetail.js中的代码将仅在真实终端上触发，而不是在桌面计算机上的浏览器上调试时触发。如果要模拟此零件，应替换

document.addEventListenerdeviceready、onDeviceReady、false

借

在userdetail.js文件中。如果需要，更改匹配测试以添加windws phone userAgent-

要清理混乱：请将所有脚本放在索引头的末尾：

<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在桌面浏览器上也不起作用

最后但并非最不重要的一点是，要填充ListView，您必须从某个地方调用querySuccess方法，我现在没有看到它

更新：正如您还发现的，您还可以将脚本添加到页面div中的第2页中。请参见

Hi enigmaticus，您可以为第2点添加详细信息吗：您是否正在从索引页面导航到新页面？怎样在这种情况下，你能添加你的索引页面吗？我已经添加了信息，如果你需要更多信息，请告诉我抱歉，但我仍然不明白你在页面间导航方面做了哪些尝试，如果有我的错误，现在就更清楚了。只需添加完整的index.html文件即可查看添加的脚本和所有内容。上个月，当我使用Cordova 3.3或3.4使用JQM 1.4.2制作一个单页应用程序时，不记得了，子页只包含一个正文，所有脚本都是由文章编辑的索引页加载的。现在我添加了完整的index.html页面非常感谢，我明天会尝试这个，然后反馈给您：querySuccess工作正常，所以我没有包含代码的这一部分，应该包含在另一个页面user_details.html中，该页面专为用户详细信息而设计。还是我错过了什么？我知道这在桌面浏览器中是不起作用的，我只在iOS、Android和Windows Phone上取得了成功。在我之前的测试中，我使用了jquery mobile/phonegap，使用了单页应用程序架构，并在索引中包含了我的脚本。事实上，使用此体系结构，JQM正在操作DOM主体部分并保留被调用的脚本，因此无需在子页面中再次添加它们。我尝试了此方法，但它不起作用你知道当用户点击一个链接时，我如何从列表视图中获得一个包含用户详细信息或类似信息的新页面吗？现在我想在新的html页面上使用它，但显然javascript不起作用什么不起作用，因为你有几点，我需要更多的信息？你是如何测试的？对于您的第一个测试，您应该尝试在不使用localStorage/database的情况下实现联系人详细信息列表，以首先处理导航，并以增量方式添加功能。 
<!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>

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;
}

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

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

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

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

<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>