How to find Button in ContentPlaceHolder

6 posts, 0 answers
  1. Daniel
    Daniel avatar
    35 posts
    Member since:
    Jan 2011

    Posted 25 Sep 2013 Link to this post

    Hello,

    i think my Problem has something to do with the fact that my button is in a different contentplaceholder.

    I will explain it.

    <asp:Content ID="Content2" ContentPlaceHolderID="cphContent" runat="server">
    <telerik:RadTabStrip ID="radtsVermittlerBearbeiten" runat="server" Skin="Windows7" MultiPageID="rmpVermittlerBearbeiten"
        SelectedIndex="1" CssClass="tabStripVRbeTopBoarder" OnClientTabSelected="OnClientTabSelected">
        <Tabs>
            <telerik:RadTab IsSeparator="true" Width="3px">
            </telerik:RadTab>
            <telerik:RadTab Text="Allgemein" Value="1">
            </telerik:RadTab>
            <telerik:RadTab IsSeparator="true" Width="2px">
            </telerik:RadTab>
            <telerik:RadTab Text="Sparte" Value="2">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="rmpVermittlerBearbeiten" runat="server" SelectedIndex="1">
        <telerik:RadPageView ID="radpvSeparator1" runat="server" Enabled="false"></telerik:RadPageView>
        <telerik:RadPageView ID="radpvAllgemein" runat="server" CssClass="tabStipVRBe">
        </telerik:RadPageView>
        <telerik:RadPageView ID="radpvSeparator2" runat="server" Enabled="false"></telerik:RadPageView>
        <telerik:RadPageView ID="radpvSparte" runat="server" CssClass="tabStipVRBe">
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    </asp:Content>

    I have this RadTabStrip in this ContentPlaceHolderID="cphContent".

    If someone click on any Tab i call this jquery Function:

    function OnClientTabSelected(sender, eventArgs) {
        var tab = eventArgs.get_tab();
        var tabName = tab.get_text();
        switch (tabName) {
            case 'Allgemein':
                break;
            case 'Sparte':
                var radButton = $find("rbtnWeiterSpartenAnlegen");
                radButton.set_visible(true);
                break;
        };
    }

    in case "Sparte" i try to find "rbtnWeiterSpartenAnlegen" which is in a diffrent ContentPlaceHolder

    <asp:Content ID="Content4" ContentPlaceHolderID="cphFooter" runat="server">
    <div class="btnLeiste_zeile">
        <telerik:RadButton ID="rbtnWeiterSpartenAnlegen" runat="server" Text="Weiter" Width="150px"></telerik:RadButton>
    </asp:Content>

    The result is, i get null back. So what to do now?

    I hope someone can help me. Thank you
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Sep 2013 Link to this post

    Hi Daniel,

    Please try the following JavaScript to access the RadButton.

    JavaScript:
    <script type="text/javascript">
        function OnClientTabSelected(sender, eventArgs) {
            var tab = eventArgs.get_tab();
            var tabName = tab.get_text();
            switch (tabName) {
                case 'Allgemein':
                    break;
                case 'Sparte':
                    var RadButton = document.getElementById('<%= Page.Master.FindControl("cphFooter").FindControl("rbtnWeiterSpartenAnlegen").ClientID %>');
                    //your code
                    break;
            }
        }
    </script>

    Thanks,
    Shinu.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    35 posts
    Member since:
    Jan 2011

    Posted 26 Sep 2013 Link to this post

    mh, i'm still getting null back.

    Maybe it's Important for you to see the whole master page:

    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="onlineHypBO.master.vb" Inherits="onlineHypBO.onlineHypBO" %>
     
     <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="css/bo.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="css/lightbox.css" media="screen"/>
        <link href="css/flexslider.css" rel="stylesheet" type="text/css" />
     
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <script src="js/ohbo.js" type="text/javascript" charset="utf-8"></script>
     
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
     
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="frmOnlineHypBO" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI"
                        Name="Telerik.Web.UI.Common.Core.js">
                    </asp:ScriptReference>
                    <asp:ScriptReference Assembly="Telerik.Web.UI"
                        Name="Telerik.Web.UI.Common.jQuery.js">
                    </asp:ScriptReference>
                    <asp:ScriptReference Assembly="Telerik.Web.UI"
                        Name="Telerik.Web.UI.Common.jQueryInclude.js">
                    </asp:ScriptReference>
                </Scripts>
            </telerik:RadScriptManager>
        <div class="content">
            <asp:ContentPlaceHolder ID="cphContent" runat="server">
            </asp:ContentPlaceHolder>
        </div>
       <div id="navBeta">
            <asp:ContentPlaceHolder ID="cphHelp" runat="server">
            </asp:ContentPlaceHolder>
        </div>
     
        <footer>
            <asp:ContentPlaceHolder ID="cphFooter" runat="server">
            </asp:ContentPlaceHolder>
        </footer>
     
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/lightbox-2.6.min.js"></script>
     
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>                    window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
     
        <script src="js/plugins.js"></script>
     
        <script src="js/unslider.js" type="text/javascript"></script>
     
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                $(document).ready(function () {
                    $(function () {
                        if (window.chrome) {
                            $('.SliderVorschau li').css('background-size', '100% 100%');
                        }
                        $('.SliderVorschau').unslider({
     
                            speed: 1000,
                            delay: 20000,
                            complete: function () { },
                            keys: true,
                            dots: true,
                            fluid: false
                        });
                    });
                });
            </script>
            <script>
                var unslider = $('.SliderVorschau').unslider();
     
                $('.unslider-arrow').click(function () {
                    var fn = this.className.split(' ')[1];
     
                    //  Either do unslider.data('unslider').next() or .prev() depending on the className
                    unslider.data('unslider')[fn]();
                });
            </script>
        </telerik:RadScriptBlock>
        </form>
    </body>
    </html>
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Sep 2013 Link to this post

    Hi Daniel,

    I assume that you are setting the visible property of RadButton as false. Then it is not possible to access the RadButton inside the OnClientTabSelected event. One suggestion is that you can set the display property of RadButton in CSSClass. Please try the following Code that I tried.

    JavaScript:
    <script type="text/javascript">
        function OnClientTabSelected(sender, eventArgs) {
            var tab = eventArgs.get_tab();
            var tabName = tab.get_text();
            switch (tabName) {
                case 'Allgemein':
                    break;
                case 'Sparte':
                    var RadButton = $find("<%=rbtnWeiterSpartenAnlegen.ClientID %>");
                    //or
                    var RadButton = document.getElementById('<%= Page.Master.FindControl("cphFooter").FindControl("rbtnWeiterSpartenAnlegen").ClientID %>');
     
                    RadButton.removeCssClass("notvisibileradbtn");
                    RadButton.addCssClass("visibleradbtn");
                    break;
            }
        }
    </script>

    CSS:
    <style type="text/css">
        .notvisibileradbtn
        {
            display: none !important;
        }
        .visibleradbtn
        {
            display: block !important;
        }
    </style>

    Thanks,
    Shinu.
  6. Daniel
    Daniel avatar
    35 posts
    Member since:
    Jan 2011

    Posted 27 Sep 2013 Link to this post

    Hi Shinu,

    Unfortunately not. I had read this before here in the forum, so I fixed it already.
    But it's still the same problem.

    My Button's look like this:

    <asp:Content ID="Content4" ContentPlaceHolderID="cphFooter" runat="server">
    <div class="btnLeiste_zeile">
        <telerik:RadButton ID="rbtnSpeichern" runat="server" Text="Speichern" Width="150px"></telerik:RadButton>
        <telerik:RadButton ID="rbtnWeiterSpartenAnlegen" runat="server" Text="Weiter" Width="150px"></telerik:RadButton>
        <telerik:RadButton ID="rbtnWeiterSpartenBearbeiten" runat="server" Text="Weiter" Width="150px" OnClientClicking="CHRParmQS"></telerik:RadButton>
       <telerik:RadButton ID="rbZurück" runat="server" Text="Zurück" Width="150px"></telerik:RadButton>
    </div>
    </asp:Content>

    What you think. I need to find another solution? Or there is actually a way to fix this Problem?

    Thank you for your help!

    Daniel
  7. Daniel
    Daniel avatar
    35 posts
    Member since:
    Jan 2011

    Posted 27 Sep 2013 Link to this post

    Hi,

    i have still no idea what it is.

    I just wanted to share MY solution.

    I created a div like this:

    <asp:Content ID="Content4" ContentPlaceHolderID="cphFooter" runat="server">
        <div class="btnLeiste_zeile">
            <div id="divrbtnWeiterSpartenAnlegen" style="display:none;"><telerik:RadButton ID="rbtnWeiterSpartenAnlegen" runat="server" Text="Weiter" Width="150px"></telerik:RadButton></div>
        </div
    </asp:Content>

    function OnClientTabSelected(sender, eventArgs) {
        var tab = eventArgs.get_tab();
        var tabName = tab.get_text();
        switch (tabName) {
            case 'Allgemein':
                break;
            case 'Sparte':
                $("#divrbtnWeiterSpartenAnlegen").css("display", "block");
                break;
            case 'Kontakt':
                break;
            case 'Slider':
                break;
            case 'Menü':
                break;
        };
    }

    This works for my.
    Anyway i'm still interested at a solution.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017