window.location.hash always shows empty

Question

In my phonegap application i updated my datas for that i have the following code in that i got the window.location.hash(* indicate error line) value will be empty.

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>

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

how to solve this some body help to solve this...

EDIT :

issue solved using this one. solution link

you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes. For example, a link to a page containing multiple internal pages would look like this: Multi-page link REF: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html — Krish R, Nov 20 '13 at 06:40
Can you ad this in you html and click the button Multi-page link — Krish R, Nov 20 '13 at 06:51
@ChinnuR it doesn't work and also when click the add it didn't add the details to my db... — Arut, Nov 20 '13 at 06:59
i solved this issue using this one http://stackoverflow.com/questions/406192/how-to-get-the-current-url-in-javascript/2865546#2865546 — Arut, Nov 20 '13 at 08:36
@ChinnuR just replace this window.location.hash; to $(location).attr('href'); — Arut, Nov 20 '13 at 08:39
@Arut if you have solved your question then please post your answer and select it below for the benefit of people with this problem in the future (plus you get rep) :) — Jim Jeffries, Jan 14 '14 at 11:11
@Arut You can post your own answer and select it. More rep for you and it makes it easier for people with the same problem to find the answer in future :) — Jim Jeffries, Feb 26 '14 at 08:27
@jamesj i posted here as a answer if i get any upvotes then i accept that answer. Why i mention that link means somepeoples may downvote it is alredy there. — Arut, Feb 26 '14 at 09:51

score 2 · Answer 1 · edited Jun 04 '15 at 05:41

I'm assuming this javascript works the same way as javascript on a traditional browser here ..

Judging by the comments in the code, it looks like you're expecting the hash to hold the query string, perhaps ?

The hash only holds what's after the hash in a url

eg

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

in this url,

window.locationhash will equal "#locationinpage"

but

window.locaton.search will equal "?firstval=value&anothervalue=45"

That is : the query string excluding the part after the hash

perhaps you need window.locaton.search instead, or as well ?

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

I got the solution using following method

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

it will be helpful for someone like me.

I solved my issue using this link Refer

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 18 '14 at 03:54

Arut

940
14
32

window.location.hash always shows empty

2 Answers2