CODEWITHSUNDEEP
javascriptjquerygoogle-chromehash
Rich Coy
Rich Coy

Reputation: 545

Chrome not returning hash value

I'm using the following snippet if jQuery JavaScript to return a hash value at the end of a URL. It works perfectly in FF but the alert on line 4 returns empty in Chrome.

Seems like the window.location.hash.substring(1) line does not work. I have also tried window.location.hash.replace("#", "");

// Map Clicks
$("#tab2.tab_content #map").delayed('click', 500, function() {
    state = window.location.hash.substring(1);
    alert(state);
    jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
    getMapResults();
    return false;
});

What's the trick to retrieving a hash value from the URL in Chrome?

The URL is built like this :

http://www.ourdomain.com/thispage.html#IL

Where IL is a two letter abbreviation for a state. I want to get the "IL".

I have a working demo here:

http://richcoy.com/locator/index2.html

Click on the Search by State tab in Chrome then click on a state and you'll see the issue. The browser shows that the url that it wants to go to is built correctly. –

Thanks.

Upvotes: 6

Views: 2045

Answers (7)

StaleMartyr
StaleMartyr

Reputation: 778

var myURL = document.URL; //example http://www.ourdomain.com/thispage.html#IL
var getTheMagicWord = myURL.split("#");
console.log(getTheMagicWord[1]); //logs IL

Upvotes: 0

Rich Coy
Rich Coy

Reputation: 545

I appreciate all the help and suggestions.

The answer to the question ended up that I needed to make the paths for the URLs absolute, not relative.

So as an example, a line in the JavaScript went from:

"AL": {tooltip: 'Alabama', attr: {fill: '#F9B625', href: '#AL'}},

To:

"AL": {tooltip: 'Alabama', attr: {fill: '#F9B625', href: 'http://richcoy.com/locator/index2.html#AL'}},

Once I changed this for all 50 states a click on the map pulled the data from the jasonp feed correctly and displayed it on the page in Chrome, as well as in Firefox.

Upvotes: 0

Maen
Maen

Reputation: 10698

When I check in Chrome's inspector, it appears that your anchors uses href from a different namespace, which isn't declared in your svg tag.

<a xlink:href="#SD">

Firefox seems fine with that, but Chrome doesn't seems to guess how to interpret this correctly.

From this link, I've found:

Bind the required namespaces

SVG is a namespaced XML dialect, and as a consequence all the XML dialects used in your SVG documents must be bound to their namespace as specified in the Namespaces in XML recommendation. It is sensible to bind the SVG and XLink namespaces at a minimum, and possibly also the XML Events namespace.

So, try to add xmlns:xlink="http://www.w3.org/1999/xlink" to your SVG tag.

Edit

As I can see in the image you posted, you declared xmlns:xlink well in your .svg. But in the rendered page by Chrome, there is no such thing!

Here's what I see (Chrome 30) :

<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 96" preserveAspectRatio="meet" style="overflow: hidden; position: relative;">

From here, it's beyond my knowledge: can some namespace for a tag be stored somewhere else by the browser? I've searched through its DOM properties, can't find it.

Another clue: you declared xmlns:svg too.

Quoted from the former link:

Be careful not to type xmlns:svg instead of just xmlns when you bind the SVG namespace. This is an easy mistake to make, but one that can break everything. Instead of making SVG the default namespace, it binds it to the namespace prefix 'svg', and this is almost certainly not what you want to do in an SVG file. A standards compliant browser will then fail to recognise any tags and attributes that don't have an explicit namespace prefix (probably most if not all of them) and fail to render your document as SVG.

Additional doc about xlink

Upvotes: 0

anvoz
anvoz

Reputation: 722

You may want to try this instead:

$(window).on('hashchange', function() {
    console.log(window.location.hash.substring(1));
});

The click event triggers before the hashchange event so you can't rely on your map click implement (even if you delayed it).

Supported browsers list for hashchange: http://caniuse.com/hashchange

In case you don't have to use hash, here is a simpler solution:

$("#tab2.tab_content #map a").click(function() {
    console.log($(this).attr('href').substring(1));
});

In summary, you shouldn't use any kind of delayed methods.

Upvotes: 5

Prisoner
Prisoner

Reputation: 27618

Isn't the problem quite apparent, or am I being silly? In the following function, you handle the clicks on the map, you listen to click, delay them by 500ms and then run through your function.

$("#tab2.tab_content #map").delayed('click', 500, function() {
  state = window.location.hash.substring(1);
  alert(state);
  jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
  getMapResults();
  return false;
});

But at the point where you alert your state, it's empty because you haven't yet set it. Your return false; will also stop the browser from changing the hash.

Try this function, and I bet you'll get something:

$("#tab2.tab_content #map").delayed('click', 500, function() {
  setTimeout(function(){
    var state = window.location.hash.substring(1);
    alert(state);
    jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
    getMapResults();
  }, 500);
});

A quick way to get it working would be to do the following:

$("#tab2.tab_content #map a").delayed('click', 500, function(e) {
  state = $(this).attr('href').replace('#', '');
  alert(state);
});

you could then easily change the hash manually by also adding this into the callback:

window.location.hash = state;

but your real issue is that your a (anchors) aren't changing the hash themselves, which makes it seem like there is somewhere in your code that's stopping it.

Upvotes: 3

melc
melc

Reputation: 11671

How about you modify your code a bit,

$("#tab2.tab_content #map a").click(function(){
 console.log($(this).attr("href"));//this outputs the value to the console
});

this will output #CA for California

i.e.

$("#tab2.tab_content #map a").delayed('click', 500, function() {

    //state = window.location.hash.substring(1);
state = $(this).attr("href").substring(1);
        alert(state);
    jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
    getMapResults();
    return false;
    });

In your code if you place a breakpoint (ln36 state = window.location.hash.substring(1);) when the event is fired, the window has not yet changed location so the hash does not exist at that point.

Upvotes: 0

Hugo Tostes
Hugo Tostes

Reputation: 412

In Chrome, only can set hash will anchor, eg:

<a href="#exemplo" />

If you do this by setting a hash of another element, try to exchange it for an anchor.

in this link you see the chrome accepts the hash property:
http://www.w3schools.com/jsref/prop_loc_hash.asp

Upvotes: 0

Related Questions