Hi there,
I have a problem with my tab control. due to the nature of the content of the third tab (a google map) i need to load that tab first (map doesn't centre properly if it is not the active tab - but that is a subject for another post...). However that is not the tab i want active when the page is renders it is actually the first tab with the summary info on that I want users to see first.
So a little bit of javascript the body OnLoad event fires off the tab panel header tab's .click() method. All fine and dandy in IE but FireFox and Opera don't want to play. I assume I am calling the method on the wrong control but it looked right from digging around in the .axd files. The offending line is below:
<
bodyonload="showFirstTab();">
<
scriptlanguage="javascript"type="text/javascript">function showFirstTab()
{
if (document.all("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab"))
{
document.getElementById(
"__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab").click();}
}
</script> Does anyone know the correct syntax, another way to achieve the same result or alternatively how to fix my Google map!
Also a good reference on the events (and order they fire) and methods would be really helpful.
Cheers,
Lucy
I believe the suspect line in your code that is causing problems is:
if (document.all("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab"))
Basically IE supports this, but FireFox (and some other common browsers don't). What you should do is something more like:
var ele=document.getElementById("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab");
if(ele)
ele.click();
Thanks for the reply. I had already discarded that line of code as bogus but even removing the if statement the .click() method does not work. The error returned is
the source line is:
document.getElementById("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab").click();
Error:
document.getElementById("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab").click is not a function
Any thoughts?
Cheers,
Lucy
Alright, here is what I figured out. Basically, I was able to get it working in the SampleWebSite. But to do it I created a button:
<
inputtype="button"onclick="DoIt();"/>
And then script:
<script>
function
DoIt() {
document.getElementById('__tab_ctl00_SampleContent_Tabs_Panel3').click();
}
</script>
This actually worked. But when I tried to do it onload, it failed. It seems you can't do that (maybe the controls aren't loaded?). I then and the onload call setTimeout(XXXX, 100) and had it call the click event in the 100ms timeout, this worked. So now I'm REALLY convinced it's a timing issue. Hope this gives you some traction.
Hi guys,
In the first post, Lucy sad about a problem with GMAP and TabPanel (map doesn't centre properly if it is not the active tab).
Are there any solution for this issue?
Thanks for helps!
Wilder Lopes
WebDeveloper
Rio de Janeiro/Brazil
Hi guys,I'm afraid the solution was lateral thinking! i.e. ditch the AJAX toolkit tab container and write my own. This is simply some HTML tags to control layout,image buttons (with javascript for mouse events - ignore the intellisense errors the page will compile fine) to do the post backs and a multiview to control the content shown. This works great - no problems with google maps now! Another bonus is that that pages load far faster now since only the data for the relevant tab is rendered on request as opposed to all of them. The down side is that there is a server request every time the user clicks on a tab as opposed to a quick javascrip show / hide on the browser. For me with data rich pages (especially that Google map!) this works out fine.Sorry no solution using the tab container itself.Cheers,Lucy
Sorry forgot to add link to see it in action:See www.ideasforthekids.co.uk for this in action. Do a search and the tabs are on the attraction page (tab graphics are being improved as we speak). http://www.ideasforthekids.co.uk/attraction.aspx?attID=7d21af2f-7c88-4e9a-82c7-85b6b5797d53
Felipe Oriani:
