PDA

View Full Version : Ajax Tab Content Script anchor problem



gryphon61
07-23-2010, 06:46 PM
1) Script Title: Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem: I've got the Ajax tabs working nicely, but now am trying to figure out how to have a link elsewhere on my page load a specific tab and move down to an anchored place.

I can get it to change to the correct tab with <a href="javascript:instance.expandit('insert info here')"> but I don't know how to add #anchor info to that to get it to work.

The tab I'm changing to is not stored within the main html page. It's an external file that I'm loading (which works fine for the tab setup) but I don't know how to properly enter the anchor info.

I tried to do a search here and found a suggestion for putting #info in the href with an onClick but it didn't work.

thanks for any help!

jscheuer1
07-24-2010, 03:11 AM
Since your question is posed in general terms, so is my answer. This is what I would suggest:


<a href="#anchor" onclick="instance.expandit('insert info here'); return true;">

As I say, this is in general terms, as was your question. If you want more help, please ask a more specific question and/or:

Please post a link to a page on your site that contains the problematic code so we can check it out.

gryphon61
07-26-2010, 03:12 PM
Hi John,

Thanks for the reply. Sorry I didn't supply enough information.

I tried the #anchor with the onclick. While it does change to the correct tab, it doesn't drop down to the anchor point.

Here's a link to a test page where you can see what I'm working with:
http://order.imagers.com/direct-to-board/anchortest.lasso

The Foamcore link is what I'm trying to make work with the anchor.

thanks,
kim

jscheuer1
07-27-2010, 12:12 AM
The anchor isn't on the page yet. So you cannot navigate to it that way.

You could try a poll. Put this script in the head of your order.imagers.com/direct-to-board/anchortest.lasso page:


<script type="text/javascript">
function pollAnchor(anchor){
if(!document.getElementsByName(anchor)[0]){
setTimeout(function(){pollAnchor(anchor);}, 300);
return;
} else {
location.hash = '#' + anchor;
}
}
</script>

Then for your link:


<a href="#" onclick="subnav.expandit('Flatbed Printing Papers'); pollAnchor('Foamcore'); return false;">Foamcore</a>

gryphon61
07-27-2010, 04:16 PM
Ah, I see what you mean, John.
That page isn't actually loaded, so it can't find the anchor.

I tried your polling idea, but it didn't work (assuming I've got it set up correctly).

thanks for your help in understanding this.

jscheuer1
07-27-2010, 04:25 PM
You didn't set it up right, you have:


<script type="text/javascript">
function pollAnchor(anchor){
if(!document.getElementsByName(anchor)0){
setTimeout(function(){pollAnchor(anchor);}, 300);
return;
} else {
location.hash = '#' + anchor;
}
}
</script>

I posted:


<script type="text/javascript">
function pollAnchor(anchor){
if(!document.getElementsByName(anchor)[0]){
setTimeout(function(){pollAnchor(anchor);}, 300);
return;
} else {
location.hash = '#' + anchor;
}
}
</script>

There still could be other problems. But this much has to be fixed first.

gryphon61
07-27-2010, 06:34 PM
Doh! I did copy your code exactly, but I didn't notice the [] symbols. The server I have this on tried to process them and messed up the JavaScript. I've fixed so the server won't do that and your solution looks like it will work great now!

The only thing I notice I can make happen is that when I click the foamcore link, the anchor info stays in the URL when I click on other tab panels. Then if I click the foamcore link again, it pops to the top of the papers panel instead of going back to the anchored point. I guess it may be a glitch with the JS and the ajax tabs code in that exact scenario. Works great otherwise.

Sorry I spaced on checking the code and making my server adjustment on the first try. I really appreciate your assistance and patience with helping me figure it out.

jscheuer1
07-27-2010, 11:37 PM
Two things:


I cannot seem to duplicate the issue you are talking about. Could you please be more precise about what the problem is? What exact sequence of events must I follow to duplicate the problem, and in what browser?


I see you've tried to make the pollAnchor function external. You can. But you must remove the opening and closing script tags.


For number two, in the Assets/PollAnchor.js file, change:


<script type="text/javascript">
function pollAnchor(anchor){
if(!document.getElementsByName(anchor)[0]){
setTimeout(function(){pollAnchor(anchor);}, 300);
return;
} else {
location.hash = '#' + anchor;
}
}
</script>

to:


function pollAnchor(anchor){
if(!document.getElementsByName(anchor)[0]){
setTimeout(function(){pollAnchor(anchor);}, 300);
return;
} else {
location.hash = '#' + anchor;
}
}

Note: This doesn't refer to the on page script. That one needs its script tags to work. But once you fix the external version, you won't need the on page one.

About number one - the hash (#Foamcore) will remain in the address bar until changed. But it shouldn't affect anything. If you want to get rid of it, you would need to have an anchor for each link. Careful though, if you do the page will try to scroll to it. So it better be there and be where you want the page to scroll to. Also, if you had succeeded originally in using href="#Foamcore", then #Foamcore" would still appear in the address bar.

gryphon61
07-28-2010, 02:49 PM
Hi John,

Ah, now that I've tested in other browsers, I see that the issue doesn't happen in IE, Firefox, Opera...
Just in Safari and Google Chrome.
(how 'bout that -- something that works in IE without a hack!) ;-)

In Safari/Chrome, if I click on the Foamcore link it works as it should. But then if I click on one of the ajax tabs at the top of the box area, then click on the foamcore link again, it goes to the top of the papers tab and not to the foamcore link.

Thanks too for the external comment.

jscheuer1
07-28-2010, 03:34 PM
OK, I think I see what's happening. It looks like those browsers are 'thinking', "Well the hash already is #Foamcore, so there's nothing to do."

I'd try (add the highlighted):


function pollAnchor(anchor){
location.hash = '';
if(!document.getElementsByName(anchor)[0]){
setTimeout(function(){pollAnchor(anchor);}, 300);
return;
} else {
location.hash = '#' + anchor;
}
}

gryphon61
07-28-2010, 03:49 PM
Genius! Can't thank you enough for your help!

crimix
01-06-2011, 12:44 PM
hi,

i have a question (in same topic), what if pollAnchor function is included in js scripts and is triggered after ajax external page is loaded.

it checks if there any hash in url, if so it scroll the page to that anchor.



ddajaxtabs.loadpage=function(page_request, pageurl, tabinstance){
var divId=tabinstance.contentdivid
document.getElementById(divId).innerHTML=ddajaxtabssettings.loadstatustext //Display "fetching page message"
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divId).innerHTML=page_request.responseText
ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance)


if (window.location.hash){
var hash = window.location.hash;
hash = hash.replace('#','');

pollAnchor(hash);

function pollAnchor(anchor){
location.hash = '';
if(!document.getElementsByName(anchor)[0]){
setTimeout(function(){pollAnchor(anchor);}, 300);
return;
} else {
location.hash = '#' + anchor;
}
}

}
}


But I cant get it to work.
Do you have any ideas?

jscheuer1
01-07-2011, 04:58 AM
i have a question (in same topic), what if pollAnchor function is included in js scripts and is triggered after ajax external page is loaded. . .

Your code doesn't appear to do anything if there is no hash:



if (window.location.hash){
var hash = window.location.hash;
hash = hash.replace('#','');

hash will be undefined in the highlighted line. There may be an error. Error or not, there's nothing to do. If there is a hash and a named anchor with the hash name exists, it will be passed to the pollAnchor function, which will navigate within the page to the anchor. But presumably it was already there, so there should be no change.

If you want more help, please explain exactly what you want to have happen, tell us what browser(s) you are testing in, and give us a link to the page:

Please post a link to a page on your site that contains the problematic code so we can check it out.