Jump to content
Larry Ullman's Book Forums

Ajax Is Messing Something Up, But I Don'T Know What It Is


Recommended Posts

I'm working on a site where I have Ajax loading content when certain items are clicked on, and after the Ajax is loaded, regardless of which of the items is clicked, the location.hash JS property is used to jump to the same anchor on the page (which is NOT within the Ajax-loaded content).

 

Anyway, for whatever reason, the first time I click on something that loads content, the anchor is properly jumped to, but everytime after that, it doesn't work (as in, the anchor is not jumped too, although everything before and after the location.hash anchor assignment loads perfectly fine everytime).

 

What's further odd is that I removed Ajax from the equation, and used some dummy data instead, so that I could use just JS to load everything. If I do that, everything loads perfectly fine, and the anchor is properly jumped to everytime.

 

It's the weirdest thing in the world, and I can't imagine what is going on. Furthermore, when I tried to look into the issue, the only hits I could find were unrelated ones, which talk about how to create bookmarks in Ajax using location.hash.

 

If anyone has any clue what is going on, I would be very appreciative. I could post the code too, although it's quite long and requires a server to run the PHP file.

Link to comment
Share on other sites

What would be ideal would be to post a link to a live demo - so we can see the HTML, JS and Ajax calls being made - I can't imagine the backend PHP is contributing to this problem. I think for anyone to answer this will need more info re how you're setting the hash property, the HTML structure it is acting on etc... Is a live demo possible?

  • Upvote 1
Link to comment
Share on other sites

All right. Here's the site as it stands at the moment:

 

(Link deleted.)

 

The JS file that contains the location.hash is "interactivity.js".

 

The location.hash gets set to the #charButtons anchor, which works the first time, but not for successive tries.

 

Also, I have confirmed that the #charButtons anchor is properly jumped to every time when Ajax is not used. As such, I can only assume that Ajax is doing something. Any ideas would be much appreciated. Thank you, Stuart. And thank you everyone.

Link to comment
Share on other sites

You've tested without Ajax - i.e. you're allowing the page to reload? And it works the first time but not the second?

 

Then I'm pretty sure the reason is because although you're setting the hash property it doesn't change, it remains as #charButtons. Normally that wouldn't matter but because the content is dynamically being replaced it alters the browsers reference to that point. E.g. If you did nothing but change the background image of the page I think that would illustrate the cause of your problem. That make sense?

  • Upvote 1
Link to comment
Share on other sites

I see what you're saying, but that's not the problem.

 

I temporary removed the Ajax from the process, and used some dummy data, at which point, everything loaded fine, AND the #charButtons anchor was properly jumped to every time, no matter what.

 

However, with Ajax, the anchor is only jumped to once, after which, the page always jumps to the very top whenever a new character is clicked on.

 

Edit: And just to provide some more info, the #charButtons DIV is always on the screen, regardless of what information is being removed and replaced below it. Furthermore, if I do something like the following, it works even with Ajax, but I get an annoying jumping effect:

 

location.hash = '';

location.hash = '#charButtons';

Link to comment
Share on other sites

Okay, things are getting interesting. For one, the location.hash works everytime in IE8, but not Chrome (which is my default browser). Furthermore, I made a page that doesn't use Ajax, but instead uses dummy data to handle each character, and when I do that, it jumps exactly how I want it to every time in IE8, but I get the weird 1-2 jump in Chrome. It's hard to explain, but if you test out the two pages below, you'll see the difference.

 

Note that IE8 does exactly what I want in the second page below, while Chrome is a bit odd. I wonder if it's just a cross-browser thing with Ajax. Hmmm...

 

(Links deleted.)

Link to comment
Share on other sites

Before I made my original post the other day, I scoured the Net looking for an answer. Obviously, I didn't find one, which is why I asked my question in the first place.

 

Anyway, after doing some more searching, I did find a solution. It's a bit of a hack, but apparently, when using Ajax, you can't set a value that is already set for location.hash (i.e., you can't set the same value twice in a row). I think this is along the lines of what you were suggesting, Stuart.

 

Anyway, the hack is pretty straightforward: You first set a value for location.hash that does not exist on your page. (The thread I saw suggested #none. After all, how often do you have an element on your page with an ID of none.) After that, you set the value you want, and boom!, it works.

 

As such, my code change from location.hash = '#charButtons'; to the following:

 

location.hash = '#none';

location.hash = '#charButtons';

 

The other issue I was having with this page in particular was the fact that whenever another character was clicked on, because the previous profile elements were completely destroyed, there wasn't enough content on the page to even jump to the anchor properly (because everything was easily displayed on one screen without the need to scroll, thus the anchor was always on the screen). As such, part two of my solution was basically a fair amount of recoding to test whether profile elements exist or not, and if they do, replacing certain nodes, as opposed to completely removing all the nodes and then recreating them.

 

Well, I hope that all makes sense, and anyone else with this problem is able to resolve it after seeing this post. If anyone has any follow-up questions, please don't hesitate. Thanks.

Link to comment
Share on other sites

 Share

×
×
  • Create New...