Javascript not working in ASCX – ASP NET User Control

Question

Background: I have an asp:UpdatePanel that contains an ajax:TabContainer with a series of ajax:TabPanel(s). Each TabPanel contains a Web User Control. The following shows the structure:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">

    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="CustomerTabs" />
    </Triggers>

    <ContentTemplate>
        <ajax:TabContainer ID="CustomerTabs" OnDemand="true" runat="server" AutoPostBack="true" EnableTheming="true" OnActiveTabChanged="CustomerTabs_ActiveTabChanged">

            <ajax:TabPanel ID="Tab1" runat="server" CssClass="TabCss" HeaderText="Heading 1" OnClientClick="TabChanged" TabIndex="1">
                <ContentTemplate>
                    <uc1:UcOne ID="UcOne1" runat="server" />
                </ContentTemplate>
            </ajax:TabPanel>

            <ajax:TabPanel ID="Tab2" runat="server" CssClass="TabCss" HeaderText="Heading 2" OnClientClick="TabChanged" TabIndex="2">
                <ContentTemplate>
                    <uc1:UcTwo ID="UcTwo1" runat="server" />
                </ContentTemplate>
            </ajax:TabPanel>

            <ajax:TabPanel ID="Tab3" runat="server" CssClass="TabCss" HeaderText="Heading 3" OnClientClick="TabChanged" TabIndex="3">
                <ContentTemplate>
                    <uc1:UcThree ID="UcThree1" runat="server" />
                </ContentTemplate>
            </ajax:TabPanel>

        </ajax:TabContainer>
    </ContentTemplate>
<asp:UpdatePanel>

The third tab contains a webuser control (UcThree) which contains some basic jquery/javascript. The javascript is placed the bottom of the usercontrol page as follows:

<script type="text/javascript">
  $(function() {

    var $items = $('#vtab>ul>li');
    $items.click(function() {
      $items.removeClass('selected');
      $(this).addClass('selected');

      var index = $items.index($(this));
      $('#vtab>div').hide().eq(index).show();
    }).eq(0).click();

  });
</script>

The problem: When the aspx page is loaded that displays the tabs and the third tab is clicked, the javascript code does not take effect; it doesn’t find the elements and apply the formatting. When the aspx page is loaded that displays the tabs and the third tab is clicked and then the page is refresh the page, the javascript works as intended.

How can the javascript take effect without having to refresh the page after the tab is clicked?

solved problem using thread: http://stackoverflow.com/questions/338702/how-to-call-a-client-side-javascript-function-after-a-specific-updatepanel-has-b — mwhib, Sep 12 '16 at 18:25

score 0 · Answer 1 · answered Sep 09 '16 at 20:01

From your javascript code it appears you're trying to implement an Immediately Invoked Function Expression (IIFE) but aren't passing any arguments. Also, I'm not sure why you'd add the $ in front. What I think you want is:

    (function($) {

    var $items = $('#vtab>ul>li');
    $items.click(function() {
      $items.removeClass('selected');
      $(this).addClass('selected');

      var index = $items.index($(this));
      $('#vtab>div').hide().eq(index).show();
    }).eq(0).click();

  })(jQuery);

Try fixing that first and see what happens.

above code doesn't work in the scenario. The issues seems to be with the asp .net controls hiding those elements at page load so they aren't accessible when the document is ready. For more info on $ syntax see: http://api.jquery.com/ready/ — mwhib, Sep 09 '16 at 20:58

Javascript not working in ASCX – ASP NET User Control

1 Answers1