Chrome not loading page properly after back button clicked

[gib65]

Hello,

I'm having an issue in Chrome. I have a page that loads and runs some javascript. Everything seems to load fine. But then when I click on a link, go to the next page, and then hit the back button on the browser, the page doesn't load properly. I was able to debug my javascript in Chrome and it gets to a point where it makes an AJAX call to the server but then disappears. It put breakpoints in both the success callback function and the fail callback function, but neither get hit. I can't debug the C# ajax handler code as Chrome's debugger doesn't have access to that. I can debug the C# code in Visual Studios running IE, but the problem doesn't happen in IE.

Does anyone know what might be going on?

[james438]

It might be good to see the code in question. Different browsers load the page differently when using the back button. Sometimes they cache the page and sometimes they reload the page. I believe still others only partially reload the page, which is what is happening here.

Please post the code in question here so that it can be tested out on our end. It wouldn't hurt to post the link to your site within noparse /noparse tags so that others can test it out as well.

[gib65]

Thanks for the feedback James, but unfortunately I cannot post a link. It's a private website and is protected. You wouldn't be able to get in.

But here's some of the code:

This is the first page (the one that works the first time but doesn't work when you go back to it via the back button):

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Learning.Master" CodeBehind="SelectCourse.aspx.cs" Inherits="AHSLearning.SelectCourse" %>
<%@ Register Src="~/SelectCourseControl2.ascx" TagName="SelectCourseControl2" TagPrefix="uc" %>
<%@ Register Src="~/KeyInitiativesControl.ascx" TagName="KeyInitiativesControl" TagPrefix="uc" %>
<%@ Register Src="~/ResourcesControl.ascx" TagName="ResourcesControl" TagPrefix="uc" %>
<%@ Register Src="~/EducatorsCornerControl.ascx" TagName="EducatorsCornerControl" TagPrefix="uc" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link type="text/css" rel="stylesheet" href="CSS/SelectCourse.css" />
    <link type="text/css" rel="stylesheet" href="CSS/SelectCourseControl2.css" />
    <link type="text/css" rel="stylesheet" href="CSS/KeyInitiativesControl.css" />
    <link type="text/css" rel="stylesheet" href="CSS/EducatorsCornerControl.css" />
    <link type="text/css" rel="stylesheet" href="CSS/ResourceControl.css" />
    <link type="text/css" rel="stylesheet" href="CSS/quadrant.css" />
    <script type="text/javascript" src="Scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript" src="Scripts/Application.js"></script>
    <script type="text/javascript" src="Scripts/CoursesPage.js"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <table id="CourseTable" class="CourseTable" border="0">
        <tr class="Header">
            <td id="TopLeftCell" valign="top"><uc:SelectCourseControl2 id="SelectCourseControl2" runat="server" /></td>
            <td id="TopRightCell" valign="top"><uc:KeyInitiativesControl id="KeyInitiativesControl" runat="server" /></td>
        </tr>
        <tr class="Header">
            <td id="BottomLeftCell" valign="top"><uc:ResourcesControl id="ResourcesControl" runat="server" /></td>
            <td id="BottomRightCell" valign="top"><uc:EducatorsCornerControl id="EducatorsCornerControl" runat="server" /></td>
        </tr>
<%--        <tr>
            <td colspan="2" style="text-align: left;">
                <img src="Images/SocialNetworkLinks.png" border="0" align="right" />
                <br />
                <hr />
                <span align="left">Version 0.3</span>
            </td>
        </tr>--%>
    </table>

    <asp:HiddenField ID="PageNameHiddenField" ClientIdMode="Static" Value="SelectCourse" runat="server" />

    <script type="text/javascript">
        $(function ()
        {
            LearningApp.CoursesPage("<%=UniqueID%>");
        });
    </script>

</asp:Content>

Here is the second page:

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Learning.Master" CodeBehind="SelectCourseType.aspx.cs" Inherits="AHSLearning.SelectCourseType" %>
<%@ Register Src="~/SelectCourseControl2.ascx" TagName="SelectCourseControl2" TagPrefix="uc" %>
<%@ Register Src="~/SelectCourseTypeControl.ascx" TagName="SelectCourseTypeControl" TagPrefix="uc" %>
<%@ Register Src="~/ResourcesControl.ascx" TagName="ResourcesControl" TagPrefix="uc" %>
<%@ Register Src="~/OutcomesControl.ascx" TagName="OutcomesControl" TagPrefix="uc" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link type="text/css" rel="stylesheet" href="CSS/SelectCourse.css" />
    <link type="text/css" rel="stylesheet" href="CSS/SelectCourseControl2.css" />
    <link type="text/css" rel="stylesheet" href="CSS/SelectCourseTypeControl.css" />
    <link type="text/css" rel="stylesheet" href="CSS/OutcomesControl.css" />
    <link type="text/css" rel="stylesheet" href="CSS/ResourceControl.css" />
    <link type="text/css" rel="stylesheet" href="CSS/quadrant.css" />
    <script type="text/javascript" src="Scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript" src="Scripts/Application.js"></script>
    <script type="text/javascript" src="Scripts/CoursesPage.js"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <table id="CourseTable" class="CourseTable" border="0">
        <tr class="Header">
            <td id="TopLeftCell" valign="top"><uc:SelectCourseControl2 id="SelectCourseControl2" runat="server" /></td>
            <td id="TopRightCell" valign="top"><uc:SelectCourseTypeControl id="SelectCourseTypeControl" runat="server" /></td>
        </tr>
        <tr class="Header">
            <td id="BottomLeftCell" valign="top"><uc:ResourcesControl id="ResourcesControl" runat="server" /></td>
            <td id="BottomRightCell" valign="top"><uc:OutcomesControl id="OutcomesControl" runat="server" /></td>
        </tr>
<%--        <tr>
            <td colspan="2" style="text-align: left;">
                <img src="Images/SocialNetworkLinks.png" border="0" align="right" />
                <br />
                <hr />
                <span align="left">Version 0.3</span>
            </td>
        </tr>--%>
    </table>

    <asp:HiddenField ID="PageNameHiddenField" ClientIdMode="Static" Value="SelectCourseType" runat="server" />

    <script type="text/javascript">
        $(function ()
        {
            LearningApp.CoursesPage("<%=UniqueID%>");
        });
    </script>

</asp:Content>

They both use the same javascript:

LearningApp.CoursesPage = function (pageID)
{
    var _data;
    _pageID = pageID;

    /*
        Populates the Courses menu item.
    */
    var PopulateCoursesMenu = function (callback, callback2)
    {
        // Get all the user's courses
        LearningApp.doCallback(pageID,
            {
                command: "GetCourses"
            },
            function (data)
            {
                _data = data;
...
});
}
}

If I put a break point at LearningApp.doCallback(pageID,

it gets hit every time (first page, second page, and back to the first page).

If I put a break point in the callback here: _data = data;

it gets hit when I load the first page for the first time, the second page, but not the first page when I hit the back button.

There are two ajax handlers, one per page, and they happen to be the C# codebehind of each page. I put a breakpoint in both and the first one gets hit when I visit the first page for the first time, the second one gets hit when I go to the next page, and neither get hit when I return to the first page via the back button.