Chrome does not return hash value

Question

I use the following snippet if jQuery JavaScript returns a hash value at the end of the url. It works fine in FF, but the warning on line 4 is returned in Chrome.

It seems that the window.location.hash.substring(1) not working. I 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 is the trick to getting a hash value from a url in Chrome?

The URL is created as follows:

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

Where IL is the abbreviation of two letters for the state. I want to get "IL".

I have a working demo here:

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

Go to the "Search by state" tab in Chrome, then click on the state and you will see this problem. The browser shows that the URL that it wants to find is built correctly. -

Thanks.

Answer 1

I appreciate all the help and suggestions.

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

So, as an example, a line in 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'}}, 

As soon as I changed this for all 50 states, clicking on the map correctly pulled the data from the jasonp channel and displayed it on the page in Chrome, as well as in Firefox.

Answer 2

Instead, you can try:

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

The click event fires before the hashchange event, so you cannot rely on your click conversion tool (even if you put it off).

List of supported browsers for hashchange: http://caniuse.com/hashchange

If you do not need to use a hash, here is a simpler solution:

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

As a result, you should not use any methods with a delay.

Answer 3

Isn't the problem obvious, or am I stupid? In the next function, you process clicks on the map, you listen to clicks, hold them for 500ms , and then perform 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 is empty because you have not installed it yet. Your return false; also will not allow the browser to change the hash.

Try this function, and I bet you will 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 make it work:

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

you can easily change the hash manually by adding this to the callback:

 window.location.hash = state; 

but your real problem is that your a (anchors) don't change the hash itself, which makes it seem like there is something in your code that stops it.

Answer 4

In Chrome, only a hash can be set, for example:

 <a href="#exemplo" /> 

If you do this by setting the hash of another element, try replacing it with an anchor.

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

Answer 5

How about changing the code a bit,

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

this will bring out #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 fires, the window has not yet changed location, so the hash does not exist at that point.

Answer 6

When I check the Chrome inspector, it seems like your anchors are using href from another namespace that is not declared in the svg tag.

 <a xlink:href="#SD"> 

Everything is fine in Firefox, but Chrome doesn't seem to know how to interpret it correctly.

From the link , I found:

Associate required namespaces

SVG is an XML dialect with names, and as a result, all XML dialects used in your SVG documents must be bound to their namespace as indicated in the Namespaces recommendation in XML. It is wise to bundle SVG and XLink namespaces at a minimum, and possibly also an XML Events namespace.

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

Edit

As I can see in the picture you posted, you declared xmlns:xlink in your .svg. But on a page made by Chrome, there’s no such thing!

Here is 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;"> 

Hence, what I know: can any namespace for a tag be stored elsewhere by the browser? I was looking for its DOM properties, I can not find it.

One more hint: you also declared xmlns:svg .

Quote from the previous link:

Be careful not to type xmlns: svg, not just xmlns when you bind the SVG namespace. This is not an easy mistake, but to break everything. Instead of making SVG the default namespace, it associates it with the svg namespace prefix, and this is almost certainly not what you want to do in the SVG file. A standards-compliant browser will then be unable to recognize tags and attributes that do not have an explicit namespace prefix (perhaps most, if not all), and fail to render your document as an SVG.

Additional xlink document

Answer 7

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