Ajax TabContainer mysteriously vanishes during Postback

Question

Ajax TabContainer mysteriously vanishes during Postback

I'm currently working on a GIS web application using C# ASP.net.

Within my project, I have an Ajax TabContainer that houses multiple TabPanels containing various elements like a map window and scale bar from the ESRI WebAdf toolkit.

Below is a simplified version of the table structure...

<table id="MainTable>

<tr>
<td>
   <ajax:TabContainer runat="server" ActiveTabIndex="0" id="TabContainer"  CssClass="ajax__tab_xp">  

    <ajax:TabPanel runat="server" HeaderText="Online Mapping Service" ID="TabPanel1">

</ajax:TabPanel>

<ajax:TabPanel ID="TabPanel2" runat="server" HeaderText="Postcode">


    </ajax:TabPanel>

    <ajax:TabPanel ID="TabPanel3" runat="server" HeaderText="Coordinates">
        <ContentTemplate>                                      



  </ajax:TabPanel>

   </ajax:TabContainer> 

  </td>
  </tr>

  </table>

After a postback event at runtime, the Tabcontainer intermittently disappears. This issue occurs across different browsers.

Attempts to resolve this include...

Setting Z-Index with Relative positioning for the TabContainer

Incorporating a JQuery script to 'show' the TabContainer...

    <script type="text/javascript" language="javascript">

    $(document).ready(function() {
    $("#TabContainer").show();

    });

   </script>

Is there C# code that can be added in the code behind similar to the following?...

Public void page_Load(object sender, EventArgs e)
{
   TabContainer.show()
}

As someone relatively new to programming, I am striving to find a solution to always display or keep the TabContainer on top.

Thank you

c#javascript jquery asp.net css

Answer 1

Answer №1

It seems like there may have been a mistake in your code cleaning process before sharing it here, as the <AjaxToolkit:TabContainer> tags are missing.

To fix this issue, make sure to include the following code in your aspx file:

<AjaxToolkit:TabContainer ID="TabContainer" runat="server">
    <AjaxToolkit:TabPanel ID="TabPanel1" runat="server">
        <ContentTemplate>
            Your ASP/HTML content should be placed here
        </ContentTemplate>
    </AjaxToolkit:TabPanel>
</AjaxToolkit:TabContainer>

Answer 2

It seems like there may have been a mistake in your code cleaning process before sharing it here, as the <AjaxToolkit:TabContainer> tags are missing.

To fix this issue, make sure to include the following code in your aspx file:

<AjaxToolkit:TabContainer ID="TabContainer" runat="server">
    <AjaxToolkit:TabPanel ID="TabPanel1" runat="server">
        <ContentTemplate>
            Your ASP/HTML content should be placed here
        </ContentTemplate>
    </AjaxToolkit:TabPanel>
</AjaxToolkit:TabContainer>

Answer 3

Answer №2

Issue resolved. The problem was identified with the AJAX Toolkit not properly handling client-side postbacks...

<script language="javascript" type="text/javascript">

        // Correcting sys.invalidoperationexception bug
        Sys.Application.initialize = function Sys$_Application$initialize() {
            if (!this._initialized && !this._initializing) {
                this._initializing = true;
                var loadMethodSet = false;
                var initializeDelegate = Function.createDelegate(this, this._doInitialize);
                if (document.addEventListener) {
                    loadMethodSet = true;
                    document.addEventListener("DOMContentLoaded", initializeDelegate, false);
                }
                if (/WebKit/i.test(navigator.userAgent)) {
                    loadMethodSet = true;
                    this._load_timer = setInterval(function() {
                        if (/loaded|complete/.test(document.readyState)) {
                            initializeDelegate();
                        }
                    }, 10);
                }
                else {
                    /*@cc_on@*/
                    /*@if (@_win32)
                    loadMethodSet = true;
                    document.write("<script id=__ie_onload defer src=BLOCKED SCRIPTvoid(0)><\/scr" + "ipt>");
                    var deferScript = document.getElementById("__ie_onload");
                    if (deferScript) {
                        deferScript.onreadystatechange = function() {
                            if (this.readyState == "complete") {
                                initializeDelegate();
                            }
                        };
                    }
                    /*@end@*/
                }

                // If no other method executes initializeDelegate, it is connected to the window's load method.
                if (!loadMethodSet) {
                    $addHandler(window, "load", initializeDelegate);
                }
            }
        }
        Sys.Application._doInitialize = function Sys$_Application$_doInitialize() {
            if (this._load_timer !== null) {
                clearInterval(this._load_timer);
                this._load_timer = null;
            }

            Sys._Application.callBaseMethod(this, 'initialize');

            var handler = this.get_events().getHandler("init");
            if (handler) {
                this.beginCreateComponents();
                handler(this, Sys.EventArgs.Empty);
                this.endCreateComponents();
            }
            this.raiseLoad();
            this._initializing = false;
        }

        Sys.Application._loadHandler = function Sys$_Application$_loadHandler() {
            if (this._loadHandlerDelegate) {
                Sys.UI.DomEvent.removeHandler(window, "load",
                  this._loadHandlerDelegate);
                this._loadHandlerDelegate = null;
            }
            this._initializing = true;
            this._doInitialize();
        }         

</script>

Answer 4

Issue resolved. The problem was identified with the AJAX Toolkit not properly handling client-side postbacks...

<script language="javascript" type="text/javascript">

        // Correcting sys.invalidoperationexception bug
        Sys.Application.initialize = function Sys$_Application$initialize() {
            if (!this._initialized && !this._initializing) {
                this._initializing = true;
                var loadMethodSet = false;
                var initializeDelegate = Function.createDelegate(this, this._doInitialize);
                if (document.addEventListener) {
                    loadMethodSet = true;
                    document.addEventListener("DOMContentLoaded", initializeDelegate, false);
                }
                if (/WebKit/i.test(navigator.userAgent)) {
                    loadMethodSet = true;
                    this._load_timer = setInterval(function() {
                        if (/loaded|complete/.test(document.readyState)) {
                            initializeDelegate();
                        }
                    }, 10);
                }
                else {
                    /*@cc_on@*/
                    /*@if (@_win32)
                    loadMethodSet = true;
                    document.write("<script id=__ie_onload defer src=BLOCKED SCRIPTvoid(0)><\/scr" + "ipt>");
                    var deferScript = document.getElementById("__ie_onload");
                    if (deferScript) {
                        deferScript.onreadystatechange = function() {
                            if (this.readyState == "complete") {
                                initializeDelegate();
                            }
                        };
                    }
                    /*@end@*/
                }

                // If no other method executes initializeDelegate, it is connected to the window's load method.
                if (!loadMethodSet) {
                    $addHandler(window, "load", initializeDelegate);
                }
            }
        }
        Sys.Application._doInitialize = function Sys$_Application$_doInitialize() {
            if (this._load_timer !== null) {
                clearInterval(this._load_timer);
                this._load_timer = null;
            }

            Sys._Application.callBaseMethod(this, 'initialize');

            var handler = this.get_events().getHandler("init");
            if (handler) {
                this.beginCreateComponents();
                handler(this, Sys.EventArgs.Empty);
                this.endCreateComponents();
            }
            this.raiseLoad();
            this._initializing = false;
        }

        Sys.Application._loadHandler = function Sys$_Application$_loadHandler() {
            if (this._loadHandlerDelegate) {
                Sys.UI.DomEvent.removeHandler(window, "load",
                  this._loadHandlerDelegate);
                this._loadHandlerDelegate = null;
            }
            this._initializing = true;
            this._doInitialize();
        }         

</script>

Ajax TabContainer mysteriously vanishes during Postback

Answer №1

Answer №2

Similar questions

Using relative paths to showcase images in Node.js

Tips for designing a horizontal sub-navigation menu using CSS?

How can we set up a Vue.js component before incorporating it into a template?

JavaScript - Assigning a class to an element based on an array

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

Closing the Angularstrap dropdown when clicking elsewhere

What is the best way to add multiple elements to an array simultaneously?

Implementing CSS keyframes when a specified PHP condition is satisfied

Animate the background of a table cell (td) in React whenever a prop is updated

Utilizing jQuery to target elements by their class name within a specific component

Getting Javascript as a string using Selenium in Python

Accessing elements from a controller in a nested ng-repeat in AngularJS

What is the best way to eliminate any remaining space after using the string.Replace() function to remove hyphens?

Discovering the geometric boundaries of a body of text

Can you please rewrite this sentence for me?

Angular8 Chart.js customizes the Y axis tick labels

How can I adhere to Angular 2's naming convention for Input and Output as suggested by the styleguide?

Alter the position of the anchor object in the center using JavaScript upon page load

Issue with tensorflow.js multiple regression stochastic gradient descent optimization

Trouble with CSS styling arising when launching the MVC application on IIS