Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

How to find Button in ContentPlaceHolder

5 Answers 419 Views
Button
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 25 Sep 2013, 11:59 AM
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

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 26 Sep 2013, 04:50 AM
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.

0
Daniel
Top achievements
Rank 1
answered on 26 Sep 2013, 07:06 AM
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>
0
Shinu
Top achievements
Rank 2
answered on 27 Sep 2013, 04:56 AM
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.
0
Daniel
Top achievements
Rank 1
answered on 27 Sep 2013, 06:24 AM
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
0
Daniel
Top achievements
Rank 1
answered on 27 Sep 2013, 07:08 AM
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.
Tags
Button
Asked by
Daniel
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Daniel
Top achievements
Rank 1
Share this question
or