How to Use Loader image in ajax - ajax

<asp:UpdatePanel ID="uppnl_Select_File_Format" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="button-bg-2">
<div class="button-text-2">
<asp:LinkButton ID="btnCreate" ValidationGroup="CreateVersion" runat="server" OnClick="btn_Create_OnClick"
CausesValidation="true">Add Title</asp:LinkButton>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnCreate" />
<asp:AsyncPostBackTrigger ControlID="ddlstMedia" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="upprogpnl" runat="server" AssociatedUpdatePanelID="uppnl_Select_File_Format">
<ProgressTemplate>
<asp:Image ID="img_Loading" runat="server" ImageUrl="~/App_Themes/Admin/LoadingImages/loading1.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
Loader image is not shown when button click event ...
Please reply me clearly, i'm a beginner......

thisi is the code for showing loader gif in time of processing
<ProgressTemplate>
<div Style="z-index: 105; left: 450px;position: absolute; top: 230px" >
<center>
<img id="imgloader" runat="server" src="images/loading.gif" />
</center>
</div>
</ProgressTemplate>
.

Related

How to locate a control within a child control

<asp:ListView ID="lvSharingList" runat="server" OnItemDataBound="lvSharingList_ItemDataBound">
<LayoutTemplate>
<table id="tblList" runat="server" style="width: 100%;">
<tr runat="server" id="itemPlaceHolder" style="border: 1px solid rgb(208, 208, 208);"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server" id="tableRow" class="trShareItem" style="border: 1px solid rgb(208, 208, 208);">
<td runat="server" id="tableCell">
<div style="width: 10%; float: left; padding: 5px 5px; margin: 5px 5px; border: 1px solid rgb(208, 208, 208);">
<asp:Label Visible="false" ID="lblGroupId" Text='<%# Eval("GroupId") %>' runat="server"></asp:Label>
<asp:Label Visible="false" ID="lblShareId" Text='<%# Eval("ShareId") %>' runat="server"></asp:Label>
<asp:Image ID="imageForFriend" runat="server" CssClass="fromUsername" AlternateText='<%# Eval("Username") %>' />
<br />
<a href="#" id="aUsername2" runat="server" title='<%# Eval("Username") %>'></a>
</div>
<div style="width: 45%; float: left; padding: 5px 5px; margin: 5px 5px; border: 1px solid rgb(208, 208, 208);">
<asp:Label ID="lblPost" Text='<%# Eval("Post")%>' runat="server" CssClass="sharedPost"></asp:Label><br />
<abbr id="abbrId" class="timeago" title='<%# DataBinder.Eval(Container.DataItem, "PostedDate", "{0:M/d/yyyy hh:mm:ss tt}") %>' runat="server"></abbr>
<asp:Label runat="server" ID="lblImgFlag" Text='<%# Eval("imgFlag") %>' Visible="false"></asp:Label>
<asp:Image ID="imagePhoto" runat="server" CssClass="sharePhotoFile" />
<asp:Literal ID="literal" runat="server" Text='<%# Eval("video") %>'></asp:Literal>
</div>
<div style="width: 38%; float: left; height: 100%;">
<div>
<fieldset>
<legend>Comments</legend>
<asp:UpdatePanel ID="UpdatePanelToResetComment" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtShareComment" runat="server" CssClass="txtShareCommentClass"></asp:TextBox>
<asp:Button ID="btnComment" UseSubmitBehavior="false" runat="server" Text="Comment" CssClass="btn btn-small btn-primary" OnClick="btnComment_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ListView ID="listViewShareComments" runat="server">
<LayoutTemplate>
<ul id="itemPlaceHolder" runat="server">
</ul>
</LayoutTemplate>
<ItemTemplate>
<asp:Label ID="lblUsernameID" runat="server" Text='<%# Eval("Username") %>' CssClass="txtShareCommentClass"></asp:Label> :
<asp:Label ID="txtShareCommentID" runat="server" Text='<%# Eval("Comment") %>' CssClass="txtShareCommentClass"></asp:Label>
</ItemTemplate>
<ItemSeparatorTemplate>
<br />
</ItemSeparatorTemplate>
</asp:ListView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnComment" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</fieldset>
</div>
</div>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
I have the above example and I would like to know the best approach to locate a control within a child control. In the above example I have a ListView control that has a tableRow followed by tableCell. I have a listview within the tableCell. Why cant I locate the child listview directly from the page control? Why do I have to locate each runat=server control and then find the child control?
The following way works fine! I would like to know is there a better way to locate the child listview control?
HtmlTableCell tCell = (HtmlTableCell)lblShaId.Parent;
UpdatePanel updatePanel1 = (UpdatePanel)tCell.FindControl("UpdatePanel1");
ListView listViewShareComments1 = (ListView)updatePanel1.FindControl("listViewShareComments");
listViewShareComments1.DataSource = userMethods.GetAdminGroupShareComments(Convert.ToInt32(lblShaId.Text));
listViewShareComments1.DataBind();
It's just the way FindControl was implemented in ASP.Net - c.f. Better way to find control in ASP.NET for a more detailed discussion on some of the likely reasons it was implemented this way as well as some techniques on how to search for a control in a recursive manner.

CKEditor disappears on partial postback

I have a page that shows a ckeditor in an update panel. My page is as follows:
<form id="form1" runat="server">
<cc1:ToolkitScriptManager runat="server" ID="ToolkitScriptManager" EnablePartialRendering="true"></cc1:ToolkitScriptManager>
<div>
<asp:Label ID="Label1" runat="server" Text="Hello"></asp:Label><br />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<script src="../../../../../ckeditor/ckeditor.js" type="text/javascript"></script>
<asp:TextBox class="ckeditor" ID="tbEditorHeader" runat="server" ClientIDMode="Static" TextMode="MultiLine" Columns="80" Rows="4"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Has anyone seen this issue? Any known solutions?
Thanks for the help!!

Ajax UpdateProgress will now show inside a tabContainer

I'm using visualStudio 2010 vb
I have a UpdateProcess inside a TabContainer which I can not manage to make it show a loading image. I've added below the example code. I'm I missing something to make it show?
<asp:TabContainer ID="TabSelection" runat="server" ActiveTabIndex="0"
Width="1126px" Font-Bold="True" TabStripPlacement="Top"
style="margin-right: 34px; margin-top: 49px;" AutoPostBack="True">
<asp:TabPanel runat="server" HeaderText="Scorecard3" ID="TabScorecard3">
<HeaderTemplate>
Scorecard
</HeaderTemplate>
<ContentTemplate>
<asp:UpdateProgress ID="UProc_Scorecard" runat="server" AssociatedUpdatePanelID="UP_Scorecard"
DisplayAfter="1">
<ProgressTemplate>
<asp:Image id="wait" runat="server" ImageUrl="~/Images/wait3.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UP_Scorecard" runat="server">
<ContentTemplate>
… 3 Grids and 3 tables …
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DateSelection"
EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="GroupSelection"
EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Thanks
I've solved the problem by moving the UpdateProgress and the updatePannel outside the TabContainer also I removed the autopostback in the tabcontainer to prevent a postback each time a tab was selected. I hope this helps someone. Example code below...
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdateProgress ID="UProc_TabContainer" runat="server" AssociatedUpdatePanelID="UP_TabContainer"
DisplayAfter="1">
<ProgressTemplate>
<div id="dvProgress" runat="server" style="position: absolute; top: 300px; left: 450px;
text-align: center;">
<asp:Image ID="wait" runat="server" ImageUrl="~/Images/wait3.gif" Height="120px"
Width="128px" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UP_TabContainer" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" BackColor="#66FFFF">
<asp:DropDownList ID="DateSelection" runat="server" AutoPostBack="True" Height="21px"
Width="134px">
</asp:DropDownList>
<asp:DropDownList ID="GroupSelection" runat="server" AutoPostBack="True" Height="21px"
Width="134px" >
</asp:DropDownList>
</asp:Panel>
<asp:TabContainer ID="TabSelection" runat="server" ActiveTabIndex="0" Width="1126px"
Font-Bold="True" TabStripPlacement="Top"
Style="margin-right: 34px; margin-top: 49px;">
<%-- AutoPostBack="True"--%>
<asp:TabPanel runat="server" HeaderText="Scorecard3" ID="TabScorecard3">
<HeaderTemplate>
Scorecard
</HeaderTemplate>
<ContentTemplate>
… grids and charts …
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="Documentation" ID="TabInfo">
<ContentTemplate>
… documentation …
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="Project" runat="server" HeaderText="Project">
<ContentTemplate>
… documentation…
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>

JQuery Validate - DropDown

I'm using the JQuery Validate plugin to validate my form. I'm able to validate text boxes but not DropDown. Can someone let me know how to validate dropdown?
<asp:FormView ID="fv_LeaveRequest" runat="server" DataKeyNames="REQ_ACTION_ID">
<InsertItemTemplate>
<label>Leave Type</label>
<asp:DropDownList ID="ddl_LeaveType" runat="server">
</asp:DropDownList>
<label>Leave Date</label>
<asp:TextBox ID="tb_leaveDate" runat="server" CssClass="date"></asp:TextBox>
<asp:Button ID="LeaveReqBtn" runat="server" Text="Submit Leave Request" CommandName="CustomInsert"
CssClass="button-position" />
</InsertItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="Edit" runat="server" Text="Edit / Change Request" CommandName="Edit" CssClass="button-position btn-padding" />
<label>Leave Type</label>
<asp:DropDownList ID="ddl_LeaveType" runat="server">
</asp:DropDownList>
<label>Leave Date</label>
<asp:TextBox ID="tb_leaveDate" runat="server" CssClass="date"></asp:TextBox>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="Cancel" Text="Cancel" CommandName="Cancel" runat="server" CssClass="button-position btn-padding" />
<label>Leave Type</label>
<asp:DropDownList ID="ddl_LeaveType" runat="server">
</asp:DropDownList>
<label>Leave Date</label>
<asp:TextBox ID="tb_leaveDate" runat="server" CssClass="date"></asp:TextBox>
</EditItemTemplate>
$("#form1").validate({
rules: {
LeaveType: "required",
LeaveDate: "required"
},
messages: {
LeaveType: "Select a value from DropDown",
LeaveDate: "This field is required"
}
});

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>

Resources