|
-
Apr 23rd, 2013, 09:07 AM
#1
Thread Starter
Member
Toggle hide in Telerik Splitter Pane using jQuery UI
jQuery toggle is not firing the show/hide in my ASP web app that uses Telerik RadSplitter Panes to organize a listbox on the left pane and jQuery tabs in the main right pane. Is ASP or Telerik interfering with the script? I couldn't ascertain the later using Firebug. The way it should work is a user will only see one tab (the other four are hidden) that will appear when a user clicks on a listbox item. Then, when a user selects/clicks one of the four tabs, a div will appear. Currently, the tabs are always shown and the div stays hidden. The toggle is not working for the div and the hide is not hiding the tabs. My code follows, showing only two tabs for this example:
Code:
<telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None">
<telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22">
<telerik:RadSlidingPane ID="Location" Title="Location" runat="server" Width="250" EnableResize="True" EnableDock="True">
<div id="DivCo" align="center">
<br />
<p />
<asp:ListBox ID="ListBox" runat="server" AutoPostBack="True"
Width="100%" Height="150px"
onselectedindexchanged="LeftNavdropdwn_SelectedIndexChanged" DataTextField="OfficeName"
DataValueField="loc_id" onclick="ListBox_SelectedItemChanged">
</asp:ListBox>
<br />
<%-- darklayer div for disabling content via jQuery--%>
<div id="darklayer" align="center" >
<p align="center">
<a href="javascript:$('#file_upload').uploadifive('upload')">Upload</a>
|
<a href="javascript:$('#file_upload').uploadifive('clearQueue')">Clear Queue</a>
</p>
<br />
<input id="file_upload" name="file_upload" type="file" multiple="true" width="100%" class="filesinUpload"/>
<asp:TextBox ID="hiddenqueue" runat="server" ></asp:TextBox>
</div>
</div>
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadPane ID="MiddlePane" runat="server" Scrolling="None">
<%--jQuery Tabs & Gridviews--%>
<div id="OutDiv" style="margin:0px;border-width:0px; padding:0px;border:none;">
<ul>
<li><a href="#Welcometab">Welcome</a></li>
<li><a href="#pnlAjax">Send</a></li>
</ul>
<telerik:RadAjaxPanel id="pnlWelcome" runat="server" height="100%" width="485px">
<div id="Welcometab" >
</div>
</telerik:RadAjaxPanel>
<div id="AjaxtabEvents" >
<telerik:RadAjaxPanel ID="pnlAjax" runat="server" height="100%" width="485px">
</telerik:RadAjaxPanel>
</div>
</div>
</telerik:RadPane>
</telerik:RadSplitter>
<script type="text/javascript">
// Hide the file selection control until the user selects a tab.
$('#darklayer').hide();
// Hide the tabs until the user makes a selection in the listbox
$('.AjaxtabEvents').hide();
// Show Tabs when listbox selections are made from the listbox
$('#<%=Listbox %>').bind('click', function (e) {
$e.preventDefualt();
$('.AjaxtabEvents').toggle();
});
// Show the controls from first click onwards, since the activeTab() value will be assigned
// from first click onwards. Do this for each tab in the tabcontainer
$('.AjaxtabEvents').bind('click', function (e) {
// If the active tab variable is empty, the user has not clicked on a tab
if ($find('#ctl00_CenterContent_OutboundTabContainer').get_activeTab() === '') {
$e.preventDefualt();
$('#darklayer').toggle();
}
//so continue hiding
});
</script>
Tags for this Thread
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|