Possible Bug in TabPanel in Safari? RSS

2 replies

Last post Jun 26, 2007 01:28 PM by rwc_chris

‹ Previous Thread|Next Thread ›

rwc_chris

Member

34 Points

28 Posts

Possible Bug in TabPanel in Safari?

Jun 22, 2007 03:19 PM|LINK

I am using two tab panels on an INTRAnet web site (can't give access to you, sorry). It's been working great. Only I just discovered there is a bug when viewing in Safari. It appears that the first panel on the page will not render the contents of any of the tabs other than the first. What is strange is the the right hand tab panel (see picture) DOES render all of it's tabs contents.

Here's all the code:

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableEventValidation="false" %>



<%@ Register src="Controls/Blogfeed.ascx" TagName="Blogfeed" TagPrefix="uc13" %>

<%@ Register src="Controls/RWCPhotosTab.ascx" TagName="RWCPhotosTab" TagPrefix="uc12" %>

<%@ Register src="Controls/IntranetTools.ascx" TagName="IntranetTools" TagPrefix="uc11" %>

<%@ Register src="Controls/UserLinks.ascx" TagName="UserLinks" TagPrefix="uc9" %>

<%@ Register src="Controls/CMSCourses.ascx" TagName="CMSCourses" TagPrefix="uc8" %>

<%@ Register src="Controls/FooterNav.ascx" TagName="FooterNav" TagPrefix="uc7" %>

<%@ Register src="Controls/FlickrPhotos.ascx" TagName="FlickrPhotos" TagPrefix="uc6" %>

<%@ Register src="Controls/CampusNews.ascx" TagName="CampusNews" TagPrefix="uc4" %>

<%@ Register src="Controls/CampusCalendar.ascx" TagName="CampusCalendar" TagPrefix="uc3" %>

<%@ Register src="Controls/MyIntranet.ascx" TagName="MyIntranet" TagPrefix="uc2" %>

<%@ Register src="Controls/StandardNav.ascx" TagName="StandardNav" TagPrefix="uc1" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Roberts Wesleyan College INTRAnet [Remix]</title>

    <link href="css/Screen.css" rel="stylesheet" type="text/css" />

    <link href="css/menu.css" rel="stylesheet" type="text/css" />  

    <!--[if lt IE 7.]>

    <script defer type="text/javascript" src="js/pngfix.js"></script>

    <![endif]-->

    <script type="text/javascript" src="js/BrowserDetect.js"></script>

</head>

<body>



<script type="text/javascript">



       // INITIALZATION ////////////////////////////////////////////////////

       

       window.onload = function() {

            init();

       }



       function init() {

            detectSafari();

            showLatestNews();

            checkScreen();

            checkEmail();

       }

       

       // if the screen size is smaller than 801, then make sure that the width gets set to 900

       // note: this is an IE 6 hack.

       function checkScreen() {

            if (screen.width < 801) {

                var standardWidth = "900px";

                $get('intranet-wrapper').style.width = standardWidth;

                $get('intranet-global-header').style.width = standardWidth;

            }

       }

       

       function detectSafari() {

            if (BrowserDetect.browser == 'Safari') {

                if (BrowserDetect.version < 313) {

                    document.getElementById("warning").style.display = "block";

                    document.getElementById("warning").innerHTML = 'You are running an unsupported version of Safari. This page will not render correctly.  Please <a href=\'http://www.apple.com/support/downloads/safariupdate201.html\'>upgrade</a> to the latest version.  If you cannot upgrade Safari then please install Firefox - <a href=\'http://www.mozilla.com/en-US/firefox/\'>click here</a>.  You can access your e-mail by <a href=\'https://mail.roberts.edu\'>clicking here</a>.';

                }

            }

       }

       

       function checkEmail() {

            var wRequest =  new Sys.Net.WebRequest();

            wRequest.set_url("AJAX_Callbacks/ajaxEmail.aspx");

            wRequest.set_httpVerb("GET");

            wRequest.add_completed(showEmailNumber);

            wRequest.invoke();

       }

       

       function showEmailNumber(e) {

            var content = $get('number_of_emails');

            if (e._xmlHttpRequest.responseText > 0) {

                content.innerHTML = '(' + e._xmlHttpRequest.responseText + ')';

            }

       }

       

       

       

       // TAB MANAGEMENT ////////////////////////////////////////////////////

       function ActiveTabChangedMain(sender, e) {

       

           //alert(sender.get_activeTabIndex());

            var CurrentTab = $get('<%=MainTab.ClientID%>');

            CurrentTab.innerHTML = sender.get_activeTabIndex();

        }

        

        function ActiveTabChangedSub(sender, e) {

        

           //alert(sender.get_activeTabIndex());

           var CurrentTab = $get('<%=SubTab.ClientID%>');

           CurrentTab.innerHTML = sender.get_activeTabIndex();

        }

        

        function selectMainTab(id) {

            var tabBehavior = $get('<%=tcMain.ClientID%>').control;

            if (tabBehavior.get_activeTabIndex() != id) { tabBehavior.set_activeTabIndex(id); }

        }

        

        // CALENDAR POPUP MANAGEMENT ////////////////////////////////////////////////////

        function showEvent(event_id) {

             // set to the calendar tab

            var tabBehavior = $get('<%=tcSide.ClientID%>').control;

            if (tabBehavior.get_activeTabIndex() != 2) { tabBehavior.set_activeTabIndex(2); }

            

            // call the popup

            getCalendarEvent(event_id);

        }

        

        function getCalendarEvent(event_id) {

            var wRequest =  new Sys.Net.WebRequest();

            wRequest.set_url("AJAX_Callbacks/ajaxCalendarOutput.aspx?event_id=" + event_id);

            wRequest.set_httpVerb("GET");

            wRequest.add_completed(showCalendarEvent);

            wRequest.invoke();

        }

        

        function showCalendarEvent(e) {

            var extender = $find('<%=CampusCalendar1.FindControl("mpeCalendarEvent").ClientID%>');

            var content = $get('<%=CampusCalendar1.FindControl("lblEventContent").ClientID%>');

            content.innerHTML = e._xmlHttpRequest.responseText;

            extender.show();

        }

        

        function updateCalendar(e) {

            var content = $get('<%=CampusCalendar1.FindControl("lblCalendarResults").ClientID%>');

            content.innerHTML = '<img src="images/ajax-loader.gif"> Loading...';

        }

        

        

         // NEWS POPUP MANAGEMENT ////////////////////////////////////////////////////

        function showNews(id) {

        

            // set to the calendar tab

            var tabBehavior = $get('<%=tcSide.ClientID%>').control;

            if (tabBehavior.get_activeTabIndex() != 1) { tabBehavior.set_activeTabIndex(1); }

            

            // call the popup

            getNewsItem(id)

        }

        

        function getNewsItem(id) {

            var wRequest =  new Sys.Net.WebRequest();

            wRequest.set_url("AJAX_Callbacks/ajaxNewsOutput.aspx?id=" + id);

            wRequest.set_httpVerb("GET");

            wRequest.add_completed(showNewsItem);

            wRequest.invoke();

        }

        

        function showNewsItem(e) {

            var extender = $find('<%=CampusNews1.FindControl("mpeNewsEvent").ClientID%>');

            var content = $get('<%=CampusNews1.FindControl("lblNewsContent").ClientID%>');

            content.innerHTML = e._xmlHttpRequest.responseText;

            extender.show();

        }

        

        // PHOTO POPUP MANAGEMENT ////////////////////////////////////////////////////

        function showPhoto(id) {

            getPhotoItem(id)

        }

        

        function getPhotoItem(id) {

            var wRequest =  new Sys.Net.WebRequest();

            wRequest.set_url("AJAX_Callbacks/ajaxPhotos.aspx?id=" + id);

            wRequest.set_httpVerb("GET");

            wRequest.add_completed(showPhotoItem);

            wRequest.invoke();

        }

        

        function showPhotoItem(e) {

           

            var content = $get('<%=RWCPhotosTab1.FindControl("lblPhotoContent").ClientID%>');

            

            //panel.style.height = "100px";

            //panel.style.width = "100px";

            

            content.innerHTML = e._xmlHttpRequest.responseText;

            

            

            

            // wait 500 ms to show the image so that it can download 

            setTimeout("showPhotoAfterWait()", 500);

        }

        

        function showPhotoAfterWait() {

            var panel = $get('<%=RWCPhotosTab1.FindControl("pnlPhoto").ClientID%>');

            var extender = $find('<%=RWCPhotosTab1.FindControl("mpePhoto").ClientID%>');

            

            var photo = $get('photo-popup-picture');

            var newImg = new Image();

            newImg.src = photo.src;

            

            panel.style.height = newImg.height + "px";

            panel.style.width = newImg.width + "px";

            

            extender.show();

        }

        

        function closePhoto() {

            var extender = $find('<%=RWCPhotosTab1.FindControl("mpePhoto").ClientID%>');

            extender.hide();

        }

        

        // BLOG FEED FUNCTIONS ////////////////////////////////////////////////////

        

        function overRow(e) {

            e.className = 'highlightRow';

        }

        function outRow(e) {

            e.className = 'normalRow';

        }

        

        // LASTES NEWS ON FRONT PAGE //////////////////////////////////////////////

        

        function showLatestNews() {

            var newsArea = $get('intranet-latest-news-items');

            newsArea.innerHTML = $get('news-tab-news-items').innerHTML;

        }



    </script>

    

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        

        <uc1:StandardNav ID="StandardNav1" runat="server" />

        <div id="intranet-wrapper">

        

        <div id="warning"></div>

        

        <div id="intranet-header">

            <div id="intranet-header-right">

                <asp:Label ID="lblLogin" runat="server" Text=""></asp:Label> | 

                <asp:LinkButton ID="lbFeedback" runat="server">Leave Feedback</asp:LinkButton>

            </div>

            <a href="Default.aspx" title="Intranet Home Page"><img src="images/logo.png" border="0" alt="Intranet, Roberts Wesleyan College" width="227" height="48" /></a>

        </div>

        <asp:Panel ID="pnlImpersonate" runat="server" Width="100%" Visible="false" CssClass="impersonate-panel">

            <asp:Label ID="lblImpersonateNotice" runat="server" Text=""></asp:Label> | 

            <asp:LinkButton ID="lbEndImpersonate" runat="server">End Impersonate</asp:LinkButton>

        </asp:Panel>

     

            <div id="intra-content-wrapper">

            <div id="intra-content-right">

             

                

            

                <ajaxToolkit:TabContainer ID="tcSide" runat="server" OnClientActiveTabChanged="ActiveTabChangedSub">

                

                  <ajaxToolkit:TabPanel ID="tpPhotos" runat="server" HeaderText="Photos" >

                        <ContentTemplate>

                            <!--<uc6:flickrphotos id="FlickrPhotos1" runat="server"></uc6:flickrphotos>-->

                             <uc12:RWCPhotosTab ID="RWCPhotosTab1" runat="server" />

                        </ContentTemplate>

                    </ajaxToolkit:TabPanel>

                

                 <ajaxToolkit:TabPanel ID="tpNews" runat="server" HeaderText="News">

                        <ContentTemplate>

                            <uc4:CampusNews ID="CampusNews1" runat="server" />

                        </ContentTemplate>

                    </ajaxToolkit:TabPanel>

                

                    <ajaxToolkit:TabPanel ID="tpCalendar" runat="server" HeaderText="Calendar">

                        <ContentTemplate>

                      

                            <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                                <ContentTemplate>                             

                                        <uc3:CampusCalendar ID="CampusCalendar1" runat="server" />

                                    </ContentTemplate>

                            </asp:UpdatePanel>



        

                        </ContentTemplate>

                

             

                    </ajaxToolkit:TabPanel>

                    

                    

                 

                   

                </ajaxToolkit:TabContainer>

                

                

                

               

            

            </div>

        

     

            <div id="intra-content-left"> 

            

         

                

            <ajaxToolkit:TabContainer ID="tcMain" runat="server" OnClientActiveTabChanged="ActiveTabChangedMain">

            

                <ajaxToolkit:TabPanel ID="tpMyIntranet" runat="server" HeaderText="Home">

                    <ContentTemplate>

                       <uc2:MyIntranet ID="MyIntranet1" runat="server" />

                       

                    </ContentTemplate>

                </ajaxToolkit:TabPanel>

                

                 <ajaxToolkit:TabPanel ID="tpCMS" runat="server" HeaderText="Courses" >

                    <ContentTemplate>

                       <uc8:CMSCourses ID="CMSCourses1" runat="server" />

                       <div class="tab-permalink">

                            <a href="default.aspx?goto=courses">Tab Permalink</a>

                       </div>

                    </ContentTemplate>

                </ajaxToolkit:TabPanel>

                

                <%--  <ajaxToolkit:TabPanel ID="tpEmail" runat="server" HeaderText="Email" >

                    <ContentTemplate>

                    

                      <asp:UpdatePanel ID="UpdatePanel3" runat="server">

                        <ContentTemplate>

                        

                        <asp:Label ID="lblPersonalEmail" runat="server" Text=""></asp:Label>

                            <asp:Timer ID="timerEmail" runat="server" Interval="300000">

                            </asp:Timer>

                         </ContentTemplate>

                    </asp:UpdatePanel>

                    

                    </ContentTemplate>

                </ajaxToolkit:TabPanel>

                

                 <ajaxToolkit:TabPanel ID="tpPersonalCalendar" runat="server" HeaderText="Calendar" >

                    <ContentTemplate>

                        <asp:Label ID="lblPersonalCalendar" runat="server" Text=""></asp:Label>

                    </ContentTemplate>

                </ajaxToolkit:TabPanel>--%>

                

                

                

                  <ajaxToolkit:TabPanel ID="tpBlogArchive" runat="server" HeaderText="Blogs" >

                    <ContentTemplate>

                        

                        <uc13:Blogfeed ID="Blogfeed1" runat="server" />

                        <div class="tab-permalink">

                            <a href="default.aspx?goto=blog">Tab Permalink</a>

                       </div>

                    </ContentTemplate>

                </ajaxToolkit:TabPanel>

                

                 <ajaxToolkit:TabPanel ID="tpLinks" runat="server" HeaderText="Links" >

                    <ContentTemplate>

                        

                          <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                        <ContentTemplate>

                        

                        <uc9:UserLinks ID="UserLinks1" runat="server" />

                        

                         </ContentTemplate>

                    </asp:UpdatePanel>

                        <div class="tab-permalink">

                            <a href="default.aspx?goto=links">Tab Permalink</a>

                       </div>

                    </ContentTemplate>

                </ajaxToolkit:TabPanel>

                

                  <ajaxToolkit:TabPanel ID="tpTools" runat="server" HeaderText="Tools" Enabled="false" >

                    <ContentTemplate>

                        

                      <uc11:IntranetTools ID="IntranetTools1" runat="server" />

                        

                    </ContentTemplate>

                </ajaxToolkit:TabPanel>

            

            </ajaxToolkit:TabContainer>

            

            

            

            

            

            <uc7:FooterNav ID="FooterNav1" runat="server" />

               

                

                

              

            

          </div>

          </div>

          

           <asp:Label ID="MainTab" runat="server" CssClass="invisible" />

            <asp:Label ID="SubTab" runat="server"  CssClass="invisible" />

          

           <%-- <asp:Panel ID="pnlFeedback" runat="server" Height="175px" Width="350px" CssClass="feedback-popup">

                <h1>Give us some Feedback</h1>

                <p>What do you like about the Intranet?  What could be enhanced or improved?  Are there any additional features you'd like to see?</p>

                <asp:TextBox ID="txtFeedback" runat="server" Height="60px" Width="300px" TextMode="MultiLine"  ></asp:TextBox>

                <asp:Button ID="btnFeedbackSend" runat="server" Text="Send Feedback" />

                <asp:Button ID="btnFeedbackCancel" runat="server" Text="Cancel" />

            </asp:Panel>

            

            <ajaxToolkit:ModalPopupExtender ID="mpeFeedback" runat="server" 

                BackgroundCssClass="modalBackground" 

                 PopupControlID="pnlFeedback"

                 TargetControlID="lbFeedback" 

                 CancelControlID="btnFeedbackCancel" 

                  >

            </ajaxToolkit:ModalPopupExtender>--%>

          

          

          <div id="intranet-footer-wrapper">

             <div id="intranet-footer">

            © <%=Year(Now()) %> - Roberts Wesleyan College | <a href="AcceptableUsePolicy.aspx">Acceptable Use Policy</a> | <a href="Disclaimer.aspx">Disclaimer</a>

            </div>

          </div>

        </div>

      </form>

  </body>

</html>

    Dim myLogin As New edu.roberts.its.LoginManagement

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        'Check these regardless of postback

        'If username is not set then load it in.
        If Not (Session("username") <> "") Then
            Session("username") = myLogin.FormattedUserName(Request.ServerVariables("LOGON_USER"))
        End If

        Dim dbIntranet As New IntranetHandler(Session("username"))

        'If account type is not set then load it in.
        If Not (Session("accounttype") <> "") Then
            'Get Student/Faculty information
            If dbIntranet.AccountType = 1 Then
                Session("accounttype") = "employee"
            Else
                Session("accounttype") = "student"
            End If
        End If


        If Not IsPostBack Then

            'CheckCompatability()

            If Session("accounttype") = "employee" Then
                'If they are an employee check to see if they have impsonation rights
                Me.tpTools.Enabled = dbIntranet.canImpersonate(Session("username"))
            End If

            'Dim strCalendarResponse As String
            'Dim strEmailResponse As String
            'Dim myExchange As New IntranetExchangeAccess

            Me.lblLogin.Text = "Logged in as <strong>" & dbIntranet.Name & "</strong>"

            ' Disable certain features for Guest Account
            If dbIntranet.Name = "Guest Account" Then
                Me.tpPhotos.Enabled = False
                Me.tpLinks.Enabled = False
                Me.tpCMS.Enabled = False
            End If

            LoadUserSettings()

            'Get Personal Calendar
            'strCalendarResponse = myExchange.getUserCalendar(Session("username"), 5)
            'Me.lblPersonalCalendar.Text = strCalendarResponse
            ''If the reponse starts with Sorry then disable the tab
            'If (Left(strCalendarResponse, 5) = "Sorry") Then
            '    Me.tpPersonalCalendar.Enabled = False
            'End If

            'Get Personal Email
            'strEmailResponse = myExchange.getUserInbox(myLogin.FormattedUserName(Request.ServerVariables("LOGON_USER")))
            'Me.lblPersonalEmail.Text = strEmailResponse
            ''Me.tpEmail.HeaderText = "Email (" & myExchange.intUnreadMessages & ")" 'this must be called AFTER getUserInbox
            ''If the reponse starts with Sorry then disable the tab
            'If (Left(strEmailResponse, 5) = "Sorry") Then
            '    Me.tpEmail.Enabled = False
            'End If

            'Me.tpPersonalCalendar.Enabled = False
            'Me.tpEmail.Enabled = False

            'Activate the right tab
            If Request.QueryString("goto") = "courses" Then Me.tcMain.ActiveTabIndex = 1
            If Request.QueryString("goto") = "blog" Then Me.tcMain.ActiveTabIndex = 4
            If Request.QueryString("goto") = "links" Then Me.tcMain.ActiveTabIndex = 5

            DetectImpersonation()

            SetTabs()

            ' Me.tpPhotos.enabled = False

        End If

    End Sub

    Private Sub SetTabs()
        If IsNumeric(Request.QueryString("maintab")) Then
            Me.tcMain.ActiveTabIndex = Request.QueryString("maintab")
            Me.MainTab.Text = Request.QueryString("maintab")
        End If

        If IsNumeric(Request.QueryString("subtab")) Then
            Me.tcSide.ActiveTabIndex = Request.QueryString("subtab")
            Me.SubTab.Text = Request.QueryString("subtab")
        End If

    End Sub

- Reply
David Anson

Star

8728 Points

1847 Posts

AspNetTeam

Re: Possible Bug in TabPanel in Safari?

Jun 22, 2007 08:18 PM|LINK

It might be easier to tell what's going on with a simplified example - please try to remove everything that's not needed to demonstrate the problematic behavior.

http://dlaa.me/
http://blogs.msdn.com/b/delay/

This posting is provided "AS IS" with no warranties, and confers no rights.
- Reply
rwc_chris

Member

34 Points

28 Posts

Re: Possible Bug in TabPanel in Safari?

Jun 26, 2007 01:28 PM|LINK

I found the problem. Believe it or not is was an unclosed Div tag that was causing the entire problem. Added the div and the problem disappeared.

‹ Previous Thread|Next Thread ›

Possible Bug in TabPanel in Safari? RSS

2 replies

rwc_chris

Possible Bug in TabPanel in Safari?

David Anson

Re: Possible Bug in TabPanel in Safari?

rwc_chris

Re: Possible Bug in TabPanel in Safari?

Powered by MSDN

Follow Us On:

Microsoft

FRAMEWORKS

TECHNOLOGIES

vNEXT

Possible Bug in TabPanel in Safari? RSS

2 replies

rwc_chris

Possible Bug in TabPanel in Safari?

David Anson

Re: Possible Bug in TabPanel in Safari?

rwc_chris

Re: Possible Bug in TabPanel in Safari?

Powered by MSDN

Follow Us On:

Microsoft