locked
Javascript Will Not Work on Page with Ajax Tab Control. Works on Page Without Tab Control. RRS feed

  • Question

  • User-748031297 posted

    Visual Studio 2012.

    I have an ASPX page that has a masterpage behind it.  So the page has all its elements between an <asp:content> and </asp:content>.  I am using the Ajax control toolkit tab control on the page as well, moving stuff from other pages onto tab panels on the newly designed page.  The other pages have javascript, such as found below.  However, it seems that no matter where I place the scripts on the new page (whether just after the <asp:content>, just before the </asp:content>, or somewhere near the control that uses it inside the tab control, the system seems to never sees the script and cannot find the function.  Any ideas of what I can do to solve this issue?  (I have added a comment after the script.  Please read)

    Here is the script in question:

        <script type="text/jscript">
            function calcTotalHours() {
                var TotalHours = document.getElementById('<%= EditForm.Findcontrol("TotalFacHoursTextBox").ClientId %>');
                var Hours = ['<%= EditForm.Findcontrol("SundayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("MondayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("TuesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("WednesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("ThursdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("FridayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("SaturdayHoursTextBox").ClientId %>'];
                var total = 0;
                for (var i = 0; i <= 6; i++) {
                    if (!isNaN(document.getElementById(Hours[i]).value) && document.getElementById(Hours[i]).value != "") {
                        total += eval(document.getElementById(Hours[i]).value);
                    }
                }
                TotalHours.value = total;
            }
        </script>
    

    When I place the script in a separate .js file and code the top of the page this way, it finds the function.  But the values of elements on the page are not found where Hours= is set above.
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
        <script type="text/javascript" src="ReportsScript.js"></script>

    Sunday, August 3, 2014 8:13 PM

All replies

  • User-1716253493 posted

    You can place it in head content

    Sunday, August 3, 2014 9:26 PM
  • User-748031297 posted

    In these instances that will not work, as the pages have a masterpage.  The head section is in the masterpage, but not every page needs the script.  Placing the script in the master is not therefore a solution here.  Thanks.  Any other ideas?

    Monday, August 4, 2014 11:46 AM
  • User-1360095595 posted

    You cannot use <%= in external JS files. Those can only be used in the aspx file itself.

    So you can declare a global js variable(s) in the aspx file, and set it to: var Hours = ['<%= EditForm.Findcontrol("SundayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("MondayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("TuesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("WednesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("ThursdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("FridayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("SaturdayHoursTextBox").ClientId %>'];

    and now you can access Hours in the external JS file.

    Monday, August 4, 2014 11:58 AM
  • User-748031297 posted

    Thanks Metal.  Can you give me some help on what the global declaration looks like in an aspx file?  Is this global variable declared inside a script in the aspx file?  If so, what does it look like?  Thanks.

    I can place this line at the top of my aspx page (just under the <asp: container> tag, and the page comes up.

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

    But if I add any other script like:

        <script type="text/javascript">
            var Hours = ['<%= EditForm.Findcontrol("SundayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("MondayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("TuesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("WednesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("ThursdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("FridayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("SaturdayHoursTextBox").ClientId %>'];
        </script>
        <script type="text/javascript" src="ReportsScript.js"></script>

    The page hangs while loading and I eventually get a break in the debugger telling me it cannot find a data field it has not problem finding when the script is not there.  It does not matter what script is there.


    Monday, August 4, 2014 12:21 PM
  • User-1360095595 posted

    Yes exactly. Just create a JS script block and declare the variable there. You'll then be able to use this variable in the external JS file. 

    Monday, August 4, 2014 12:37 PM
  • User-748031297 posted

    Metal:

    I cannot get it to work.  If I put the declarations at the top of the aspx page, the page hangs then gets an error.  If I place the script with the declaration down closer to the formview that calls the function, the variables are never declated and when the function runs, they are undefined.

    Monday, August 4, 2014 1:24 PM
  • User-1360095595 posted

    Try putting them just before the closing </body> tag. Or if it's in a content page then just before the closing </content> tag. 

    Monday, August 4, 2014 1:33 PM
  • User-748031297 posted

    Metal:

    Other scripts that worked just fine when on pages that had no tab control also do not work now that the formviews and gridviews have been moved inside tabs in an Ajax tab control. I am using the November 2011 version of the Ajax toolkit.  Is this possibly a known problem that was fixed in a later version?

    Monday, August 4, 2014 1:33 PM
  • User-748031297 posted

    Did that and still did not work.  Will try again just to test.

    Monday, August 4, 2014 1:36 PM
  • User-748031297 posted

    Nope.  When placed at bottom, it throws an error (data binding error) when the page tries to load.  Seems random.  But will investigate to see what is happening.

    Monday, August 4, 2014 1:47 PM
  • User-1360095595 posted

    Can you show the html/aspx page where you're trying to do this? I mean if the code is not massive. Including all the js code in the aspx file (not the external js file).

    Edit: correct ask to all. 

    Monday, August 4, 2014 1:52 PM
  • User-1716253493 posted

    Master Page

    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>

    Content Page

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    
        <script type="text/jscript">
            function calcTotalHours() {
                var TotalHours = document.getElementById('<%= EditForm.Findcontrol("TotalFacHoursTextBox").ClientId %>');
                var Hours = ['<%= EditForm.Findcontrol("SundayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("MondayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("TuesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("WednesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("ThursdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("FridayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("SaturdayHoursTextBox").ClientId %>'];
                var total = 0;
                for (var i = 0; i <= 6; i++) {
                    if (!isNaN(document.getElementById(Hours[i]).value) && document.getElementById(Hours[i]).value != "") {
                        total += eval(document.getElementById(Hours[i]).value);
                    }
                }
                TotalHours.value = total;
            }
        </script>
    
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     ........... ABCDEFGHIJKLMNOP ..............
    </asp:Content>

    You can write whatever you want in head section into content1

    Monday, August 4, 2014 9:45 PM
  • User-748031297 posted

    Aned:

    I will give that a try and report.  Thanks.

    Tuesday, August 5, 2014 9:55 AM
  • User-748031297 posted

    Oned:

    When I implemented your suggestion, I then get a data binding error when the page is opened.  It is a formview called EditForm that I have set to enabled=false and visible=false.  It should not databind until later after I programmatically set the selectcommand for the datasource.  Is it possible that because the script references controls in this formview, that when I open the page (and the script is run perhaps) that the script code is forcing the form to databind?  is so, how can I avoid this?

    Tuesday, August 5, 2014 2:37 PM
  • User-748031297 posted

    Okay.  I place the javascript into a content section at the top of my page as follows.  When I open the page, I get the error at the bottom of this post.  The error message points to the first document.getElementById call.  EditForm (a formview) exists on the aspx page.  TotalFacHoursTextBox exists within this formview.  However, the page does open with EditForm disabled and invisible and the panel control in which the EditFrom is found is also disabled.  I enable them later programmatically.  Might this be the cause of them not being "visible" to the script as it is being loaded?  I assume the error is while the script is loading, as it has not been called by anything at this point.

    <asp:Content ID="Content2" ContentPlaceHolderID="head" Runat="Server">
        <script type="text/jscript">
            function calcTotalHours() {
                var TotalHours = document.getElementById('<%= EditForm.Findcontrol("TotalFacHoursTextBox").ClientId %>');
                var Hours = ['<%= EditForm.Findcontrol("SundayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("MondayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("TuesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("WednesdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("ThursdayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("FridayHoursTextBox").ClientId %>', '<%= EditForm.Findcontrol("SaturdayHoursTextBox").ClientId %>'];
                var total = 0;
                for (var i = 0; i <= 6; i++) {
                    if (!isNaN(document.getElementById(Hours[i]).value) && document.getElementById(Hours[i]).value != "") {
                        total += eval(document.getElementById(Hours[i]).value);
                    }
                }
                TotalHours.value = total;
            }
        </script>
    </asp:Content>
    

    System.NullReferenceException was unhandled by user code
      Message=Object reference not set to an instance of an object.
      Source=App_Web_le2ighm8
      StackTrace:
           at ASP.extranet_reports_reports_aspx.__RenderContent2(HtmlTextWriter __w, Control parameterContainer) in C:\Users\Doug\Documents\Visual Studio 2012\WebSites\ExtranetNew\Extranet\Reports\Reports.aspx:line 7
           at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
           at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
           at System.Web.UI.Control.Render(HtmlTextWriter writer)
           at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
           at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
           at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
           at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
           at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
           at System.Web.UI.HtmlControls.HtmlHead.RenderChildren(HtmlTextWriter writer)
           at System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer)
           at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
           at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
           at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
           at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
           at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
           at System.Web.UI.Control.Render(HtmlTextWriter writer)
           at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
           at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
           at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
           at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
           at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
           at System.Web.UI.Page.Render(HtmlTextWriter writer)
           at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
           at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
           at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
           at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
      InnerException:

    Wednesday, August 6, 2014 4:53 PM
  • User603270769 posted

    The Tabs problem is a reported issue in IE8.  Here's one report: https://ajaxcontroltoolkit.codeplex.com/workitem/27597 with a solution (reverting) that is poorly explained. 

    Sunday, August 10, 2014 2:58 PM