locked
jquery function not working properly with ajax tab container RRS feed

  • Question

  • User851798788 posted

    hi!

    I could really use some help. I have a project where I use some jquery to add an overlay when certain buttons are pushed. and I don't want it to show the overlay when other buttons are pushed. it has worked great until I decided to use the ajax tab container on one of my pages. now, the overlay shows no matter which button the user clicks.

    here is the jquery I am using:

    jQuery(function ($) {
    
        $("<div id='overlay'><img src='Styles/Values.gif' alt='loading image' /></div>").appendTo('body');
    
        $('body a').each(function ()
        { $(this).addClass('is-overlay'); });
    
        $('body input[type=submit]').each(function () {
            if (this.name != 'Btn_Export' && this.name != 'Btn_Export2' && this.name != 'Btn_Export0' && this.name != 'Btn_Export1'
                && this.name != 'BOBTag' && this.name != 'Btn_Export_Tab6')
            {
                $(this).addClass('is-overlay');
            }
        });
    
        $('.is-overlay').bind('click', function () {
            setTimeout(ShowOverlay, 1);
        });
    
    });
    
    function ShowOverlay() 
    {
    
        $('#overlay').show();
    }

    can anyone point me in the right direction as to why this overlay shows up even though the user is clicking on 'Btn_Export_Tab6'? that button happens to be inside the ajax tab container.

    thanks!

    dan

    Thursday, October 24, 2019 3:14 PM

Answers

  • User851798788 posted

    THANK YOU!

    entering debug mode, I was able to solve this issue. I am using ASP buttons as opposed to the HTML buttons you suggested above. I noticed in debug mode, the ASP button ID's are renamed by the ajax tab container. (I have no idea why an ajax element would rename elements inside of it AND not let the coder know.....) so the jquery is working fine, it was my if statement within the jquery that simply was not finding the correct button because the name had been changed.

    so my ASP button that that I named "Btn_Export_Tab6" was renamed by ajax to "TabContainer1$TabPanel1$Btn_Export_Tab6". (again, it makes no sense to me why it is doing that and at the very least why the button properties window would not have shown the new name???)

    once I changed the button id in the IF statement to that name, it works as expected.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 25, 2019 1:33 PM

All replies

  • User-474980206 posted

    Your code adds a click handler to every anchor to open the overlay. You should restrict the selector to only the ones you want.

    Thursday, October 24, 2019 3:28 PM
  • User851798788 posted

    thank you for the quick reply!

    since I was given the jquery by someone else and don't fully understand it myself, are you able to give me an example of what I would need to change?

    Thursday, October 24, 2019 3:31 PM
  • User-474980206 posted

    we would need to know the binding rules required to write a selector that does what you want. the simplest solution is to add a class to the anchors you want to open the overlay, and add to the selector.

    Thursday, October 24, 2019 5:30 PM
  • User851798788 posted

    are you really sure that that would solve the problem? it seems odd that the current jquery works on all other pages I have in the project except this one page where I am using the ajax tab container.....

    Thursday, October 24, 2019 5:32 PM
  • User-474980206 posted

    that's because your ajax tabs are using anchors and get bound to the handlers as your other anchors. if you used <button> instead of <a> for the tabs, you would not have this issue, but again might require changing the tab selectors and maybe the CSS.

    your code:

        $('body a').each(function () { 
            $(this).addClass('is-overlay'); 
        });
    
    
        $('.is-overlay').bind('click', function () {
            setTimeout(ShowOverlay, 1);
        });
    

    makes every anchor an overlay click.

    Thursday, October 24, 2019 7:17 PM
  • User851798788 posted
      $('body a').each(function ()
    

    so, I changed the above to:

     $('button').each(function ()

    and it still fires for all buttons even the ones I have called out to ignore in the IF statement. I am not sure I understand what you mean by changing the tab selectors. can you guide me a little further?

    Thursday, October 24, 2019 10:23 PM
  • User288213138 posted

    Hi DH79,

    As bruce said, you should also added the show the overlay event to other buttons.

    This is my test code, it works fine in my side.

    <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <input type="submit" name="Btn_Export" />
                <input type="submit" name="Btn_Export2" />
                <input type="submit" name="Btn_Export0" />
                <input type="submit" name="Btn_Export7" />
                <ajaxToolkit:TabContainer ID="tc" runat="server" AutoPostBack="true">
                    <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="A" AccessKey="a">
                        <HeaderTemplate>
                            AAA                        
                        </HeaderTemplate>
                        <ContentTemplate>
                            <asp:Panel ID="Panel1" runat="server">
                                <input type="submit" name="Btn_Export_Tab6" />
                            </asp:Panel>
                        </ContentTemplate>
                    </ajaxToolkit:TabPanel>
                    <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="B" AccessKey="b">
                        <HeaderTemplate>
                            BBB                           
                        </HeaderTemplate>
                        <ContentTemplate>
                            <asp:Panel ID="Panel2" runat="server">
                                <input type="submit" name="Btn_Export_Tab6" />
                            </asp:Panel>
                        </ContentTemplate>
                    </ajaxToolkit:TabPanel>
                </ajaxToolkit:TabContainer>
            </div>

    The result:

    I suggest you can view your code steps by setting breakpoints to debug.

    If your still can't solve the question, please post your web form code, I will help you find and solve the problem.

    Best regards,

    Sam

    Friday, October 25, 2019 6:57 AM
  • User851798788 posted

    THANK YOU!

    entering debug mode, I was able to solve this issue. I am using ASP buttons as opposed to the HTML buttons you suggested above. I noticed in debug mode, the ASP button ID's are renamed by the ajax tab container. (I have no idea why an ajax element would rename elements inside of it AND not let the coder know.....) so the jquery is working fine, it was my if statement within the jquery that simply was not finding the correct button because the name had been changed.

    so my ASP button that that I named "Btn_Export_Tab6" was renamed by ajax to "TabContainer1$TabPanel1$Btn_Export_Tab6". (again, it makes no sense to me why it is doing that and at the very least why the button properties window would not have shown the new name???)

    once I changed the button id in the IF statement to that name, it works as expected.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 25, 2019 1:33 PM