窗口位置哈希总是显示为空

9

在我的PhoneGap应用程序中,我更新了数据。为此,我使用了以下代码。在这段代码中,我发现window.location.hash的值为空(*表示错误行)。

function init() {

    $("#homePage").live("pageshow", function() {
    getDatas();
});

$("#editPage").live("pageshow", function() {
    ***var loc = window.location.hash;***
    alert("loc" + loc);
    if(loc.indexOf("?") >= 0) {
        var qs = loc.substr(loc.indexOf("?")+1, loc.length);
        var detailId = qs.split("=")[1];
        $("#editFormSubmitButton").attr("disabled", "disabled");
        dbShell.transaction(function(tx) {
            tx.executeSql("select id,name,age,city,occupation from nameDetail where id=?", [detailId], function(tx, results) {
                $("#mId").val(results.rows.item(0).id);
                $("#mName").val(results.rows.item(0).name);
                $("#mAge").val(results.rows.item(0).age);
                $("#mCity").val(results.rows.item(0).city);
                $("#mOccupation").val(results.rows.item(0).occupation);
                $("#editFormSubmitButton").removeAttr("disabled");
            });
        }, dbErrHandler);
    } else {
    alert("empty");
        $("#editFormSubmitButton").removeAttr("disabled");
    }
});

}

function getDatas() {
dbShell.transaction(function(tx) {
    tx.executeSql("select id,name,age,city,occupation,date from nameDetail order by date desc", [], renderEntries, dbErrHandler);
}, dbErrHandler);
}

function renderEntries(tx, results) {
 if (results.rows.length == 0) {
    $("#mainContent").html("<p>Don't have any Details</p>");
} else {
    var s = "";
    for (var i = 0; i < results.rows.length; i++) {
        s += "<li><a href='addEdit.html?id="+results.rows.item(i).id + "'>" +results.rows.item(i).name + "</a></li>";
        alert("" + s);
    }
//alert(S);
    $("#noteTitleList").html(s);
    $("#noteTitleList").listview("refresh");
}
}

Index.html:

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Names</title>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/jquery-1.6.4.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="js/index.js"></script>
</head>

<body onload="init();">


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

    <div data-role="header">
        <h1>Names</h1>
    </div>

    <div data-role="content" id="mainContent">  
        <ul data-role="listview" id="noteTitleList"></ul>
    </div>

    <div data-role="footer" class="ui-bar">
        <a href="addEdit.html" data-role="button" data-icon="plus">Add Note</a>
    </div>

</div>

</body>
</html>

并且addEdit.html:

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

    <div data-role="header">
        <h1>Details</h1>
    </div>

    <div data-role="content">   
        <form id="addEditForm" method="post">
            <input type="hidden" name="mId" id="mId" value="">
            <div data-role="fieldcontain">
                <label for="mName">Name</label>
                <input type="text" name="mName" id="mName"/>
            </div>
            <div data-role="fieldcontain">
                <label for="mAge">Age</label>
                <input name="mAge" id="mAge"/>
            </div>
            <div data-role="fieldcontain">
                <label for="mCity">City</label>
                <input name="mCity" id="mCity"/>
            </div>
            <div data-role="fieldcontain">
                <label for="mOccupation">Occupation</label>
                <input name="mOccupation" id="mOccupation"/>
            </div>
            <div data-role="fieldcontain">
                <input type="submit" id="editFormSubmitButton" value="Save Note">
            </div>
        </form>
    </div>

    <div data-role="footer" class="ui-bar">
        <a href="index.html" data-role="button" data-icon="home">Return Home</a>
        <input type="button"  data-role="button" id="sync" name="sync" value="Sync" data-icon="arrow-d"/>
    </div>

</div>

如何解决这个问题,有人可以帮忙解决吗...

编辑:

使用以下方法解决了该问题。 解决方案链接


你尝试过添加addEdit.html#editPage吗? - Krish R
这行代码的作用是 s += "<li><a href='addEdit.html?id="+results.rows.item(i).id + "'>" + results.rows.item(i).name + "</a></li>"; - Arut
@ChinnuR,请编辑我的帖子,如何做到这一点... - Arut
1
你需要在链接中添加rel="external"或data-ajax="false"。这会告诉框架进行完整的页面重新加载,以清除URL中的Ajax哈希。这非常重要,因为Ajax页面使用哈希(#)来跟踪Ajax历史记录,而多个内部页面使用哈希来指示内部页面,因此在这两种模式之间会存在哈希冲突。例如,指向包含多个内部页面的页面的链接将如下所示: <a href="multipage.html" rel="external">Multi-page link</a> REF:http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html - Krish R
@ChinnuR,它不起作用,而且当我点击添加时,它没有将详细信息添加到我的数据库中... - Arut
显示剩余14条评论
2个回答

2

我使用以下方法解决了问题

var loc = $(location).attr('href');
if (loc.indexOf("?") >= 0) {
    var url = loc.substr(loc.indexOf("?") + 1, loc.length);
    listId = url.split("=")[1];

像我这样的人会发现这非常有用。

我使用这个链接解决了我的问题 参考


2

我假设这个 javascript 的工作方式与传统浏览器上的 javascript 相同..

根据代码中的注释,看起来你期望哈希值来保存查询字符串,是吗?

但实际上哈希值只保存 url 中 # 后面的部分。

例如:

www.this.com/apage.html?firstval=value&anothervalue=45#locationinpage

在这个 url 中,

window.location.hash 的值将为 "#locationinpage"

但 window.location.search 的值将为 "?firstval=value&anothervalue=45"

也就是说,window.location.search 只包括哈希值前的查询字符串。

也许你需要使用 window.location.search,或者同时使用它?


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接