AJAX ModalPopupExtender does not show - ajax

I have a website where I use AJAX ModalPopupExtender to show error messages. It works fine on one of the pages.
I had to create another page for a new functionality and there the same code does not work, whatever I do.
I have created some simplified code to test this in general, but so far no cigar. This is my code:
the html:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>xxx</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="Test_Main" class="main">
<asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager>
<table border="0" cellpadding="0" width="970px" >
<tr>
<td rowspan="1" vertical-align="top" style="height: 80px">
<div class="header">
<h1><asp:Label id="lblOrder" width="930px" runat="server" Text="Order" style="margin-left: 10px"></asp:Label></h1>
</div>
</td>
</tr>
<tr>
<td rowspan="1" vertical-align="top" class="auto-style1" width="970px" >
<asp:UpdatePanel id="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc2:TestOrder id="TestOrder1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
<div>
<asp:Button ID="Testbutton" runat="server" Text="Fenstertest" OnClick="Button_Test_Click"/>
</div>
</div>
<cc1:ModalPopupExtender ID="Testpanel" runat="server" BackgroundCssClass="ModalBackground" Enabled="true" TargetControlID="Testbutton"
PopupControlID="Panel1" CancelControlID="btnClose" BehaviorID="ModalBehaviourID">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPanel" Style="display: none">
Test modal<br />
<asp:Button ID="btnClose" runat="server" Text="Close Modal" />
</asp:Panel>
</form>
</body>
</html>
and here is the code behind:
protected void Button_Test_Click(object sender, EventArgs e)
{
Testpanel.Show();
}
When I debug through the code, I see that the show method is executed, but then nothing is visible on the screen. When I execute without debugging, I see a short flickering, but no modal window.
My other page still works properly with that same method, this drives me crazy.
Does anyone see what is wrong here? Thanks for your help.

Related

Updatepanel wont call the control event method

I have a web page that has a masterpage. It has two drop downs. On Selected index chagne of dropdown1, I am calling the dropdown1_selectedindex changed. But nothing happens when I change the selection in the first drop down. I have placed the script manager in the master page. Update panel in the control page. The update panel encloses both the drop downs. Pelase help me. I am a starter and I thought this will be pretty straight forward. What am I missing here?
This is the .aspx
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.master" CodeBehind="Emailer.aspx.cs" Inherits="ServiceAlertEmailerGUI.Emailer" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<%-- <h2>
Welcome to ASP.NET!
</h2>--%>
<%-- <p>
To learn more about ASP.NET visit www.asp.net.
</p>--%>
<%-- <p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>--%>
<script type="text/javascript">
function HandleIT() {
alert("called");
}
</script>
<asp:Label ID="Label1" runat="server" Text="Status:"></asp:Label>
<asp:RadioButton ID="RadioButton1" Text="New Alert" GroupName="Status" runat="server" />
<asp:Label ID="Label2" runat="server" Text="Select Application: "></asp:Label>
<asp:UpdatePanel runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddApplicationList" runat="server"
OnSelectedIndexChanged="ddApplicationList_SelectedIndexChanged">
</asp:DropDownList>
<br />
<asp:RadioButton ID="RadioButton2" GroupName="Status" Text="Update" runat="server" />
<asp:Label ID="Label3" runat="server" Text="Select Service: "></asp:Label>
<asp:DropDownList ID="ddServcieList" runat="server" >
</asp:DropDownList>
</ContentTemplate>
<%--
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddApplicationList" EventName="ddApplicationList_SelectedIndexChanged" />
</Triggers>
--%>
</asp:UpdatePanel>
<br />
<asp:RadioButton ID="RadioButton3" GroupName="Status" Text="Resolved" runat="server" /><br />
<asp:RadioButton ID="RadioButton4" GroupName="Status" Text="Resolved (No Email)" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Build Template" Width="144px" />
<br />
<asp:RadioButton ID="RadioButton5" GroupName="Status" Text="Root Cause" runat="server" /><br />
<br />
</asp:Content>
Here is master page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ServiceAlertEmailerGUI.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="AjaxManager" EnablePageMethods ="true" EnablePartialRendering = "true" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div class="title">
<h1>
Service Alert Emailer
</h1>
</div>
<%-- <div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>--%>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Emailer"/>
<%--<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>--%>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
Thanks guys for trying to help.
I figured out the mistake in the trigger. In the trigger, eventname should be the event name SelectedIndexChanged rather that ddApplicationList_SelectedIndexChanged.
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddApplicationList" EventName = "SelectedIndexChanged"/>
</Triggers>
sorry I lost the other link that gave me this answer.

Load Content of Database in CKEditor, change it and save it

I try to program a page, where the content of the database will be loaded into the CKEditor then the content can be changed and saved again. The page is devided into different areas and if the user doubleclicks on an area the Editor should appear. With the following Code, Loading the Content and Doubleclick works, but I can't find any solution to save it back to the database:
<%# Page Title="" Language="C#" MasterPageFile="~/Templates/MasterPageBasic.master"
AutoEventWireup="true" CodeFile="EditTemplate.aspx.cs" Inherits="Templates_EditTemplate" %>
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="Styles/EditTemplate.css" rel="stylesheet" type="text/css" />
<script src="Scripts/EditTemplate.js" type="text/javascript" />
</asp:Content>
<asp:Content ID="ContentPlaceHolder2" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
<div id="header1" class="editable">
<asp:FormView ID="FormViewHeader" runat="server" DataSourceID="SqlDataSourceHeader"
DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox ID="HeaderTextBox" runat="server" Text='<%# Bind("Header") %>' />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceHeader" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [Header] FROM [PageContent]"></asp:SqlDataSource>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navbar','',1)"
onmouseover="MM_nbGroup('over','navbar','','',1)" onmouseout="MM_nbGroup('out')">
<img src="Images/Clean-Navigation-Bar-by-willyepp.png" alt="" name="navbar" border="0"
id="Articles" onload="" /></a>
</td>
</tr>
</table>
<div id="sidebarLeft" class="editable">
<asp:FormView ID="FormViewSidebarLeft" runat="server" DataSourceID="SqlDataSourceSidebarLeft"
DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox ID="SidebarLeftTextBox" runat="server" Text='<%# Bind("SidebarLeft") %>' />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceSidebarLeft" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [SidebarLeft] FROM [PageContent]"></asp:SqlDataSource>
</div>
<div id="sidebarRight" class="editable">
<asp:FormView ID="FormViewSidebarRight" runat="server" DataSourceID="SqlDataSourceSidebarRight"
DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox ID="SidebarRightTextBox" runat="server" Text='<%# Bind("SidebarRight") %>' />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceSidebarRight" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [SidebarRight] FROM [PageContent]"></asp:SqlDataSource>
</div>
<div id="content" class="editable">
<asp:FormView ID="FormViewContent" runat="server" DataSourceID="SqlDataSourceContent"
DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox ID="ContentTextBox" runat="server" Text='<%# Bind("Content") %>' />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceContent" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [Content] FROM [PageContent]"></asp:SqlDataSource>
</div>
<div id="footer" class="editable">
<asp:FormView ID="FormViewFooter" runat="server" DataSourceID="SqlDataSourceFooter"
DefaultMode="Edit">
<EditItemTemplate>
<CKEditor:CKEditorControl ID="CKEditorFooter" Text='<%# Bind("Footer") %>' runat="server"
CustomConfigurationsPath="../ckeditor/config.js" ToolbarSet="Footer" EditorAreaCSS="/css/editor.css"
Width="947px" Height="100px">
</CKEditor:CKEditorControl>
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceFooter" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [Footer] FROM [PageContent]"></asp:SqlDataSource>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
</asp:Content>
JS-File
//<![CDATA[
// Uncomment the following code to test the "Timeout Loading Method".
// CKEDITOR.loadFullCoreTimeout = 5;
window.onload = function () {
// Listen to the double click event.
if (window.addEventListener)
document.body.addEventListener('dblclick', onDoubleClick, false);
else if (window.attachEvent)
document.body.attachEvent('ondblclick', onDoubleClick);
};
function onDoubleClick(ev) {
// Get the element which fired the event. This is not necessarily the
// element to which the event has been attached.
var element = ev.target || ev.srcElement;
// Find out the div that holds this element.
var name;
do {
element = element.parentNode;
}
while (element && (name = element.nodeName.toLowerCase()) && (name != 'div' || element.className.indexOf('editable') == -1) && name != 'body')
if (name == 'div' && element.className.indexOf('editable') != -1)
replaceDiv(element, element.id);
}
var cke_header1;
var cke_sidebarLeft;
var cke_sidebarRight;
var cke_content;
function replaceDiv(div, id) {
//First check if an editor is already open, if so close it
if (cke_header1)
cke_header1.destroy();
if (cke_sidebarLeft)
cke_sidebarLeft.destroy();
if (cke_sidebarRight)
cke_sidebarRight.destroy();
if (cke_content)
cke_content.destroy();
switch (id) {
case "header1":
cke_header1 = CKEDITOR.replace(div, {
height: "200", width: "950",
language: 'en',
uiColor: '#350e1e',
toolbar: 'MyToolbar'
});
break;
case "sidebarLeft":
cke_sidebarLeft = CKEDITOR.replace(div, {
height: "690", width: "180",
language: 'en',
uiColor: '#350e1e',
toolbar: 'MyToolbar'
});
break;
case "sidebarRight":
cke_sidebarRight = CKEDITOR.replace(div, {
height: "690", width: "180",
language: 'en',
uiColor: '#350e1e',
toolbar: 'MyToolbar'
});
break;
case "content":
cke_content = CKEDITOR.replace(div, {
height: "690", width: "500",
language: 'en',
uiColor: '#350e1e',
toolbar: 'MyToolbar'
});
break;
}
}
So I tried to use only one FormView, now loading from database and save back works. But the Doubleclick to get the Editor doesn't work anymore. Also I can't save anymore if I add the link to the Javascript file. (I used the same one as below.
Does anyone has a solution for this?
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="Templates/Styles/EditTemplate.css" rel="stylesheet" type="text/css" />
<script src="Scripts/EditTemplate.js" type="text/javascript" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
<asp:FormView ID="FormViewPage" runat="server" DataSourceID="SqlDataSourcePage" DefaultMode="Edit">
<EditItemTemplate>
<div id="header1" class="editable">
<asp:TextBox ID="HeaderTextBox" runat="server" Text='<%# Bind("Header") %>' />
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navbar','',1)"
onmouseover="MM_nbGroup('over','navbar','','',1)" onmouseout="MM_nbGroup('out')">
<img src="Templates/Images/Clean-Navigation-Bar-by-willyepp.png" alt="" name="navbar" border="0"
id="Articles" onload="" /></a>
</td>
</tr>
</table>
<div id="content" class="editable">
<asp:TextBox ID="ContentTextBox" runat="server" Text='<%# Bind("Content") %>' />
</div>
<div id="sidebarLeft" class="editable">
<asp:TextBox ID="SidebarLeftTextBox" runat="server" Text='<%# Bind("SidebarLeft") %>' />
</div>
<div id="sidebarRight" class="editable">
<asp:TextBox ID="SidebarRightTextBox" runat="server" Text='<%# Bind("SidebarRight") %>' Visible="True" />
</div>
<div id="footer" class="editable">
<asp:TextBox ID="FooterTextBox" runat="server" Text='<%# Bind("Footer") %>' />
</div>
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="Aktualisieren" />
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Abbrechen" />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourcePage" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [Header], [Content], [SidebarLeft], [SidebarRight], [Footer] FROM [PageContent]"
UpdateCommand="UPDATE PageContent SET Header = #Header, [Content] = #Content, SidebarLeft = #SidebarLeft, SidebarRight = #SidebarRight, Footer = #Footer">
<UpdateParameters>
<asp:Parameter Name="Header" />
<asp:Parameter Name="Content" />
<asp:Parameter Name="SidebarLeft" />
<asp:Parameter Name="SidebarRight" />
<asp:Parameter Name="Footer" />
</UpdateParameters>
</asp:SqlDataSource>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
</asp:Content>

dropdown list wont populate values from database

Hello everyone i need help. Ive been having this problem for almost a day now. dropdown list won't populate from database
Below is the code i am using:
<%# Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="PhotoAlbum.aspx.vb" Inherits="PhotoAlbum" %>
Members Of Ephesians 5:10 Photo Album!
<asp:SqlDataSource ID="categoriesDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [CategoryID], [Name] FROM [Categories] WHERE ([UserId] = #UserId) ORDER BY [Name]">
<SelectParameters>
<asp:QueryStringParameter Name="UserId" QueryStringField="ID"/>
</SelectParameters>
</asp:SqlDataSource>
<br />
<br />
<h1 style="font-weight:bold">Filter Pictures By Category:
<asp:DropDownList ID="categories" runat="server"
AppendDataBoundItems="True"
DataSourceID="categoriesDataSource" AutoPostBack="True"
DataTextField="Name" DataValueField="CategoryID">
</asp:Content>
i need help pls
set AutoEventWireup="true" in page directive
I quickly created a test page with following code, it works for me:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="testddl.aspx.cs" Inherits="testddl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server"
DataSourceID="SqlDataSource1" DataTextField="CategoryName"
DataValueField="CategoryID">
</asp:DropDownList>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:TESTDBConnectionString %>"
SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories] WHERE ([UserID] = #UserID)">
<SelectParameters>
<asp:QueryStringParameter DefaultValue="1" Name="UserID" QueryStringField="ID"
Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
dbo.Categories:
Screenshot:

How do I get Ajax to work with Telerik DockZone, ListView and DataPager

I'm having a bit of a difficult time trying to figure out exactly how to make a correct Ajax call work with the Telerik DockZone, ListView and DataPager. I'm hoping someone can help out a bit.
I am dynamically adding RadDock in code behind to the Zones.
Here is code for main page (which I have to restructure soon b/c of lots and lots of layout issues with IE and Firefox, but, that's out of context of what I'm asking here!)
<%# Page Language="C#" AutoEventWireup="true" CodeFile="ClientView.aspx.cs" Inherits="News.UI.Form_ClientView" %>
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<html>
<head>
<title></title>
<link href="Styles/ClientView.css" rel="stylesheet" type="text/css" />
<script src="Scripts/ClientView.js" type="text/javascript" ></script>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="clientviewcontent">
<telerik:RadDockLayout runat="server" ID="RadDockLayout1" EnableEmbeddedSkins="true" Skin="Office2007" Visible="true">
<div id="clientviewlayout">
<table class="tbldoclayout">
<tr>
<td class="totop" colspan="3"><telerik:RadDockZone Width="100%" MinHeight="0" BorderStyle="None" runat="server" ID="RadDockZoneTop" Orientation="Vertical" Visible="true"></telerik:RadDockZone></td>
</tr>
<tr>
<td class="tdleft"><telerik:RadDockZone Width="100%" Height="100%" MinHeight="0" BorderStyle="None" BorderWidth="0" runat="server" ID="RadDockZoneV1" Orientation="Vertical"></telerik:RadDockZone></td>
<td class="tdmid"><telerik:RadDockZone Width="100%" Height="100%" MinHeight="0" BorderStyle="None" BorderWidth="0" runat="server" ID="RadDockZoneV2" Orientation="Vertical"></telerik:RadDockZone></td>
<td class="tdright"><telerik:RadDockZone Width="100%" Height="100%" MinHeight="0" BorderStyle="None" BorderWidth="0" runat="server" ID="RadDockZoneV3" Orientation="Vertical"></telerik:RadDockZone></td>
</tr>
</table>
</div>
</telerik:RadDockLayout>
</div>
</form>
</body>
</html>
From here, in the code behind I will add RadDock, example like this:
RadDock dockNews = new RadDock();
dockNews.DockMode = DockMode.Docked;
dockNews.ID = "dockNews";
dockNews.Tag = "dockNews";
dockNews.Title = "News";
dockNews.Skin = "Office2007";
dockNews.Width = Unit.Pixel(200);
dockNews.Style.Add("margin-bottom", "5px");
dockNews.DockHandle = DockHandle.TitleBar;
dockNews.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.All;
Control ctrlNewsRoom = LoadControl("~/ClientView/ctlNewsRoom.ascx");
RadDockLayout1.Controls.Add(dockNews);
RadDockZoneV1.Controls.Add(dockNews);
dockNews.ContentContainer.Controls.Add(ctrlNewsRoom);
Finally, in the "ctlNewsRoom" I have a ListView using a DataPager. What I would like to do is, on the change of pages is that only the one Dock be updated. Right now what is happening is that all Docks on the main page are being updated. I'm thinking (or hoping) that I just don't have everything hooked up together.
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ctlNewsRoom.ascx.cs" Inherits="News.UI.ctlNewsRoom_Control" %>
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadAjaxManagerProxy ID="Proxy" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="dsNews" EventName="dsNews_Selecting">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="dsNews" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<asp:LinqDataSource ID="dsNews" runat="server" OnSelecting="dsNews_Selecting" />
<asp:ListView ID="lvNews" runat="server" DataKeyNames="RecordID" DataSourceID="dsNews">
<LayoutTemplate>
<div id="itemPlaceholderContainer" runat="server">
<div id="itemplaceholder" runat="server"></div>
</div>
<div style="clear: left; text-align:center; vertical-align: middle; float:none;">
<asp:DataPager ID="pageTopics" runat="server" PageSize="3" PagedControlID="lvNews">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="true" ButtonType="Image" ShowPreviousPageButton="false" ShowNextPageButton="false" FirstPageImageUrl="../Images/PagingFirst.gif" />
<asp:NextPreviousPagerField ShowFirstPageButton="false" ButtonType="Image" ShowPreviousPageButton="true" ShowNextPageButton="false" PreviousPageImageUrl="../Images/PagingPrev.gif" />
<asp:NumericPagerField ButtonCount="9" />
<asp:NextPreviousPagerField ShowFirstPageButton="false" ButtonType="Image" ShowPreviousPageButton="false" ShowNextPageButton="true" ShowLastPageButton="false" NextPageImageUrl="../Images/PagingNext.gif" />
<asp:NextPreviousPagerField ShowFirstPageButton="false" ButtonType="Image" ShowPreviousPageButton="false" ShowNextPageButton="false" ShowLastPageButton="true" LastPageImageUrl="../Images/PagingLast.gif" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<div>
<ul id="newsul">
<li id="newstitle"><%# Eval("Name")%></li>
<li id="newspub">
<div style="width:100%;margin:0;padding:0;">
<div style="text-align:left;float:left;">Published: <%# Eval("PublishDate")%></div>
<div style="text-align:right;"><asp:HyperLink runat="server" ID="newNav" ImageUrl="../Images/world_go.png" NavigateUrl='<%# Eval("URL")%>' Target="_blank" /></div>
</div>
</li>
<li id="newsdesc"><%# Eval("Description").ToString()%></li>
</ul>
</div>
</ItemTemplate>
<EmptyDataTemplate>No news found</EmptyDataTemplate>
</asp:ListView>
Below is simple code that loads the data.
using News.UI;
using News.DataModel;
using System.Linq;
using System.Xml.Linq;
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
using System.Xml.XPath;
namespace News.UI
{
public partial class ctlNewsRoom_Control : System.Web.UI.UserControl
{
private SettingManager m_SettingManager;
private GBMDataContext m_Context;
protected void dsNews_Selecting(object sender, LinqDataSourceSelectEventArgs args)
{
args.Result = LoadData();
}
private IList LoadData()
{
m_SettingManager = new SettingManager();
m_Context = m_SettingManager.DataContext;
var q = from tmp in m_Context.NewsRooms where
(!(tmp.RecordExpiration.HasValue) || tmp.RecordExpiration.Value >= DateTime.UtcNow)
orderby tmp.PublishDate descending
select new { tmp.RecordID, Name=tmp.Name.Substring(0,75), PublishDate = tmp.PublishDate.ToShortDateString(), Description=tmp.Description.Substring(0,175), URL=tmp.URL };
return q.ToList();
}
}
}
Your current implementation is too complex and I don't think you need to use the RadAjaxManager control. What you are describing - being able to update a single dock without affecting the rest of the page - can happen by simply wrapping the dock content (the user control) in a RadAjaxPanel. For example:
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<asp:LinqDataSource ID="dsNews" runat="server" OnSelecting="dsNews_Selecting" />
<asp:ListView ID="lvNews" runat="server" DataKeyNames="RecordID" DataSourceID="dsNews">
...
</asp:ListView>
</telerik:RadAjaxPanel>
This way you can be sure that interacting with the content of one dock will not affect the others.

Why won't this XHTML form validate?

Any ideas why this won't validate here:
http://validator.w3.org/#validate_by_input
It seems the form input tags are wrong but reading through the XHTML spec they should validate fine. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span>
</div>
</td>
<td>
<div class="Controls">
<form id="ControlForm" method="get" action="Edit.php">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Try putting a fieldset tag around the inputs. I think the idea of forms in XHTML is that they can't have direct descendants that aren't div, fieldset, etc.
You need to move
<div class="Controls">
so that it's inside the <form tag
This validates nicely
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span></div>
</td>
<td>
<form id="ControlForm" method="get" action="Edit.php">
<div class="Controls">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</div>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
As someone else put it:
[quote]
The validator is telling you that your hidden input element cannot immediately follow the form tag - it needs to have a container element of some kind.
[/quote]
(Source)
I guess a fieldset could help; See The XHTML DTD:
<!ELEMENT form %form.content;>
<!ENTITY % form.content "(%block; | %misc;)*">
<!ENTITY % misc "noscript | %misc.inline;">
<!ENTITY % misc.inline "ins | del | script">
<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl">
<!ENTITY % blocktext "pre | hr | blockquote | address">
No input for you :(
I had the very same problem and it took me some time to figure out. Is this a recent change with the w3c validator? it's just I'm sure some of my pages with forms validated in the past, but now they all seem to through up errors for the same problem.
I used to always do something like:
<div>
<form>
<label></label>
<input />
<label></label>
<input />
<label></label>
<input />
</form>
and get validation errors, so now I just add fieldset or div around all the labels and inputs to get it to validate, like this:
<div>
<form>
<fieldset>or<div>
<label></label>
<input />
<label></label>
<input />
<label></label>
<input />
</fieldset>or</div>
</form>
Seems to work, but I'm sure I didn't have to do this in the past... hmmm?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span>
</div>
</td>
<td>
<form id="ControlForm" method="get" action="Edit.php">
<div class="Controls">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</div>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
Put your div inside your form.
Your input elements should be within a fieldset. This validates and has the added benefit of making the document more accessible to non-visual user agents.
As an aside, your markup is suffering from divitis a bit. You could put classes on the table cells directly rather than nesting div elements within them (I'm not going to comment on the use of tables for layout). Also, you could style the form element directly rather than nesting it within a div.
Anyway, here's your example with a fieldset added so it validates:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span></div>
</td>
<td>
<div class="Controls">
<form id="ControlForm" method="get" action="Edit.php">
<fieldset>
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</fieldset>
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

Resources