This is a migrated thread and some comments may be shown as answers.

How to find Button in ContentPlaceHolder

5 Answers 524 Views

Button

This is a migrated thread and some comments may be shown as answers.

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

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.

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

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.

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

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.