I'm working on shopping cart application where I have listed all the products in a ListView. Then on button click of each product the image slider changes. Now I want to make it on mouseover instead of click. Below is the code I have tried to achieve.
ASP
<div class="col-md-12 ">
<div class="col-md-4 single_left pull-left">
<div class="flexslider">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater runat="server" ID="Repeater">
<HeaderTemplate>
<ul class="slides">
</HeaderTemplate>
<ItemTemplate>
<li data-thumb='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>'>
<asp:Image ID="image5" runat="server"
ImageUrl='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>' />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script defer src="assets/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<!-- FlexSlider -->
<div class="caption">
<strong>
<asp:Label ID="lblPrice" runat="server" Text="*"></asp:Label></strong>
<strong>
<asp:Label ID="ItemCode" runat="server" Text="*"></asp:Label></strong>
<p>
<small><strong>
<asp:Label ID="lblDesc" runat="server" Text="*"></asp:Label>
</strong></small>
<br />
<asp:Label ID="lblID" Style="display: none;" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
<small>
<asp:Label ID="lblMsg" runat="server" Text="*" ForeColor="#990000"></asp:Label>
</small>
<br />
</p>
<asp:TextBox ID="txtqty" type="number" class="form-control" Text="0" runat="server"></asp:TextBox>
</div>
<asp:LinkButton ID="btnSubmit" type="submit" CssClass="add-cart item_add" runat="server" OnClick="btnSubmit_Click"><i class="fa fa-save"></i> Add to Cart</asp:LinkButton>
<script>
// Can also be used with $(document).ready()
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
</script>
</div>
<div class="col-md-8 single-top-in simpleCart_shelfItem">
<asp:ListView ID="ImagesList" runat="server"
DataKeyNames="ID"
GroupItemCount="15"
OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" OnSelectedIndexChanged="OnSelectedIndexChanged">
<EmptyDataTemplate>
No Images found.
</EmptyDataTemplate>
<LayoutTemplate>
<table>
<tr runat="server" id="groupPlaceholder" />
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:LinkButton ID="LBtn" runat="server"
CommandName="Change"
OnCommand="btnDetails_Command"
CommandArgument='<%# Eval("Notes") %>'>
<img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="Width:50px;Height:50px" alt="Change" onmouseover="this.OnCommand" />
</asp:LinkButton>
</td>
</ItemTemplate>
</asp:ListView>
</div>
<div class="clearfix"></div>
<!---->
</div>
I must say that your approach of mouseovering which triggers click - seems not as the right solution. ( Just saying)
Anyway - Change your code to :
<asp:LinkButton ... CssClass="myButton"
...
</asp:LinkButton>
Then , via jQuery (which you already use) :
$(function (){
$(".myButton").on('mouseover',function (){this.click()});
});
Related
I'm building a table using a asp:Repeater that is inside an UpdatePanel. A column of this table contains some buttons. When these buttons get pressed, there is a partial refresh (i think..) of the UpdatePanel.
What is strange is that some OTHER buttons that are outside and at the top of the table inside another UpdatePanel stop working.
They works perfectly if i don't click the buttons in the repeater. Otherwise they seem to not respond to click event anymore.
A clarification: The refresh button keep working. But even the simple checkbox does not work anymore.
Here is the code:
<div id="containerNotificationCenterDx">
<!-- Contains the five buttons that stop working -->
<div id="containerNotificationFilter">
<asp:UpdatePanel runat="server" ID="UpPnlBAction" UpdateMode="Conditional" ClientIDMode="static">
<ContentTemplate>
<div class="col11" style="padding-left: 10px">
<asp:CheckBox ID="cbSelectAllNotify" runat="server" CssClass="clickableRight" OnCheckedChanged="SelectAllNotify_CheckedChanged"
AutoPostBack="true" />
<asp:LinkButton runat="server" ID="IndexImgRefreshCM" OnClick="IndexImgRefreshCM_OnClick" CssClass="clickableRight">
<i class="fa fa-refresh"></i> <!-- this always works -->
</asp:LinkButton>
<asp:LinkButton runat="server" ID="IndexImgAddFilterCM" OnClientClick="return ajaxModalPopupAddFilterNotificationCenter();" CssClass="clickableRight">
<span id="spanAddFilter">
<i class="fa fa-filter"></i>
<i class="fa fa-plus"></i>
</span>
</asp:LinkButton>
<asp:LinkButton runat="server" ID="IndexImgRemoveFilterCM" OnClick="IndexImgRemoveFilter_OnClick" Enabled="false" CssClass="clickableRight">
<span id="spanRemoveFilter">
<i class="fa fa-filter"></i>
<i class="fa fa-minus"></i>
</span>
</asp:LinkButton>
<asp:LinkButton runat="server" ID="IndexImgExportCM" OnClientClick="return ajaxModalPopupExportDati();" CssClass="clickableRight">
<i class="fa fa-file-excel-o"></i>
</asp:LinkButton>
<asp:LinkButton runat="server" ID="IndexImgSmistaCM" OnClick="IndexImgSmista_OnClick" CssClass="clickableRight">
<span id="spanSmista">
<i class="fa fa-file-o"></i>
<i class="fa fa-arrow-right"></i>
</span>
</asp:LinkButton>
<asp:LinkButton runat="server" ID="IndexImgDeleteCM" OnClick="IndexImgRemove_OnClick" CssClass="clickableRight">
<i class="fa fa-trash-o"></i>
</asp:LinkButton>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<!-- Main notifications container -->
<div id="containerListNotify" style="padding-left: 5px;">
<asp:UpdatePanel ID="UpdatePanelRepListNotify" runat="server" UpdateMode="Conditional" ClientIDMode="Static">
<ContentTemplate>
<!-- DEFINISCE LA STRUTTURA DELLE NOTIFICHE -->
<asp:Repeater ID="repListNotify" runat="server" OnItemCommand="RepListNotify_ItemCommand"
OnItemDataBound="RepListNotify_ItemCreated">
<HeaderTemplate>
<table id="tableCentroMessaggi" class="table table-hover">
<thead>
<tr id="HeaderMessaggi">
<th>
<asp:Label runat="server" ID="docFascCol" Text='<%#this.getDocFascColText() %>' />
</th>
<th>
<asp:Label runat="server" ID="dataCol" Text='<%#this.getDataColText() %>' />
</th>
<th>
<asp:Label runat="server" ID="eventCol" Text='<%#this.getEventColText() %>' />
</th>
<th>
<asp:Label runat="server" ID="fromCol" Text='<%#this.getSenderColText() %>' />
</th>
<th>
<asp:Label runat="server" ID="objDescCol" Text='<%#this.getObjDescColText() %>' />
</th>
<th>
<asp:Label runat="server" ID="tipologyCol" Text='<%#this.getTipologyColText() %>' />
</th>
<th>
<asp:Label runat="server" ID="senderCol" Text='<%#this.getEmailColText() %>' />
</th>
<th>
<asp:Label runat="server" ID="noteCol" Text='<%#this.getNoteColText() %>' />
</th>
<th>
<asp:Label runat="server" ID="actionsCol" Text='<%#this.getActionsColText() %>' />
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr id="messageRow" runat="server">
<td id="messageDetails">
<div>
<!-- checkbox rimozione notifica -->
<asp:CheckBox ID="IndexChkRemoveNotify" CssClass="clickableLeftN" runat="server" />
<!-- icona dettagli documento/fascicolo -->
<asp:LinkButton runat="server" ID="IndexImgDetailsDocument" CommandName="ViewDetailsDocument" CssClass="clickableRight">
</asp:LinkButton>
<!-- id -->
<br />
<div class="notifyField">
<span class="noLink">
<asp:LinkButton ID="lblNotifyLink" runat="server" Text='<%#this.getLabelFieldLink((NttDataWA.DocsPaWR.Notification) Container.DataItem) %>' CommandName="viewLinkObject" OnClientClick="disallowOpHome('Content2');">
</asp:LinkButton>
</span>
</div>
</div>
</td>
<td id="date">
<asp:Label ID="IndexLblDate" runat="server" Text='<%# Bind("DTA_EVENT") %>'></asp:Label>
</td>
<td id="mexEvent">
<asp:Label ID="Label2" runat="server" Text='<%# GetEvent((NttDataWA.DocsPaWR.Notification) Container.DataItem) %>'></asp:Label>
</td>
<td id="mexSender">
<asp:Label ID="Label3" runat="server" Text='<%# GetSource((NttDataWA.DocsPaWR.Notification) Container.DataItem) %>'></asp:Label>
</td>
<td id="objDescription">
<asp:Label ID="Label4" runat="server" Text='<%# GetObjDesc((NttDataWA.DocsPaWR.Notification) Container.DataItem) %>'></asp:Label>
</td>
<td id="tipology">
<asp:Label ID="Label5" runat="server" Text='<%# GetData((NttDataWA.DocsPaWR.Notification) Container.DataItem, Column.Tipology) %>'></asp:Label>
</td>
<td id="mittente">
<asp:Label ID="Label7" runat="server" Text='<%# GetData((NttDataWA.DocsPaWR.Notification) Container.DataItem, Column.Sender) %>'></asp:Label>
</td>
<td id="note">
<div id="containerNoteNotify" runat="server">
<div class="fieldNotesHome">
<div class="fieldNotesHomeBt">
<div class="weight">
<asp:Label ID="lblNotes" Text='<%$ localizeByText:IndexLblNotes%>' runat="server"
Visible="false"></asp:Label>
</div>
<div style="padding-top: 30px; padding-left: 55px;">
<cc1:CustomTextArea ID="txtNoteNotify" runat="server" TextMode="MultiLine" ClientIDMode="Static"
CssClass="homeNotes">
</cc1:CustomTextArea>
</div>
<div style="text-align: right;">
<asp:Button ID="litSaveNotes" Text='<%$ localizeByText:IndexLitSaveNotes%>' CommandName="SaveNotesNotify"
runat="server" CssClass="buttonNotes" ImageAlign="Right"></asp:Button>
<asp:Button ID="litRemoveNotes" Text='<%$ localizeByText:IndexLitRemoveNotes%>' CommandName="RemoveNotesNotify"
runat="server" CssClass="buttonNotes" ImageAlign="Right"></asp:Button>
</div>
</div>
</div>
</div>
</td>
<!-- these buttons generate the issue -->
<td id="actionsButtons">
<div id="actionsButtonsContainer">
<asp:LinkButton runat="server" ID="btnTypeDocCM" CommandName="ViewDocument" CssClass="clickableLeft"
ToolTip='<%$ localizeByText:IndexBtnTypeDocTooltip%>'>
<i class="fa fa-search"></i>
</asp:LinkButton>
<asp:LinkButton runat="server" ID="btnSignatureDetails" CommandName="SignatureDetails" CssClass="clickable"
ToolTip='<%$ localizeByText:DocumentSignatureDetails%>' Visible="false">
<i class="dettaglioFirma"></i>
</asp:LinkButton>
<asp:LinkButton runat="server" ID="IndexImgAdd" CommandName="AddNote" CssClass="clickableLeft"
Visible='<%#GetEnableNote() %>'>
<span class="fa-stack">
<i class="fa fa-file-o fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x"></i>
</span>
</asp:LinkButton>
<asp:LinkButton runat="server" ID="IndexImgRemoveNotify" CommandName="RemoveNotify" CssClass="clickableRight">
<i class="fa fa-trash-o"></i>
</asp:LinkButton>
</div>
</td>
</tr>
<asp:HiddenField runat="server" ID="NotifyId" Value='<%# Bind("ID_NOTIFY") %>' />
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:HiddenField ID="grid_rowindex" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="HiddenRemoveNotifications" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="HiddenRemoveNotification" runat="server" ClientIDMode="Static" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:HiddenField ID="grid_pageindex" runat="server" ClientIDMode="Static" />
<asp:UpdatePanel ID="upPnlGridIndexes" runat="server" ClientIDMode="Static" UpdateMode="Conditional">
<ContentTemplate>
<div id="navHome">
<asp:PlaceHolder ID="plcNavigator" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
I don't get any error.
Update: All the controls in the "UpPnlBAction" UpdatePanel don't work.
Try to add in update panel ChildrenAsTriggers ="false" then see
https://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.childrenastriggers(v=vs.110).aspx
Check if this solves your problem or not
I have a listview control that is bounded by an entity query. The main listview is bounded to the entity called Article. The second listview(nested one) is bounded to an icollection of Article_Comment. I am trying to get the ID of a article so that I can use it in updating the article comment table. Below is what I have so far.
<asp:ListView ID="listComment" runat="server" DataKeyNames="ArticleID" >
<LayoutTemplate>
<div class="row">
<h3>Comments</h3>
<blockquote>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</blockquote>
</div>
</LayoutTemplate>
<ItemSeparatorTemplate>
<hr />
</ItemSeparatorTemplate>
<ItemTemplate>
<h4 class="text-error"><%#Eval("Title")%></h4>
<br />
<h4 class="text-error"><%#Eval("ArticleID")%></h4
<br />
<p><%#Eval("ArticleContent")%> </p>
<asp:ListView ID="list" runat="server" DataSource='<%# Eval("Article_CommentTable")%>'
InsertItemPosition="LastItem" OnItemCommand="list_ItemCommand" OnItemDataBound="list_ItemDataBound"
DataKeyNames="ArticleID" OnItemInserting="list_ItemInserting">
<LayoutTemplate>
<div class="row">
<h3>Comments</h3>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<ItemTemplate>
<p>
Username : <%#Eval("UserName")%>
<br />
Comments : <%#Eval("Comment")%>
<br />
<%--<asp:Label ID="lblID" runat="server" Text='<%# Bind("ArticleID")%>'></asp:Label>--%>
<asp:HiddenField ID="hid" runat="server" Value='<%# Bind("ArticleID")%>' />
</p>
</ItemTemplate>
<InsertItemTemplate>
<div class="row" runat="server">
<asp:TextBox ID="txtUserName" runat="server" CssClass="form-control" />
<br />
<asp:TextBox ID="txtComment" runat="server" CssClass="form-control" />
<FCKeditorV2:FCKeditor ID="editorArticle" runat="server"
BasePath="~/FCKeditor/" Height="200px" Width="400px"
Value="Start typing here" ToolbarStartExpanded="False">
</FCKeditorV2:FCKeditor>
<br />
<asp:Button ID="btnAddComment" runat="server" CssClass="btn btn-info"
CommandName="insert" Text="Join The Discussion" CommandArgument='<%#Eval("ArticleID")%>' />
</div>
</InsertItemTemplate>
</asp:ListView>
</ItemTemplate>
</asp:ListView>
I am trying to access the ArticleID for each row that a button is clicked. How should I do that?
you can get it in ItemCommand event as listComment.DataKeys[dataItem.DisplayIndex].Value
I have a radlistview which has the datapager enabled...
But when I launch the website it currently loads the first datapage on the listview (i.e the first page of comments). Is there a way to change this so that it opens the last page?
Here is the current radlistview...
<telerik:RadListView ID="RadListViewComments" runat="server" AllowPaging="True" DataKeyNames="ID" DataSourceID="SqlDataSourceComments" PageSize="5">
<LayoutTemplate>
<div class="RadListView RadListViewFloated RadListView_Default">
<div class="rlvFloated rlvAutoScroll">
<div id="itemPlaceholder" runat="server">
</div>
</div>
<telerik:RadDataPager ID="RadDataPager1" runat="server">
<Fields>
<telerik:RadDataPagerButtonField FieldType="Numeric" />
</Fields>
</telerik:RadDataPager>
</div>
<ItemTemplate>
<div class="rlvI" style="width: 700px; margin-bottom: 50px" margin-right: 100%>
<asp:Label ID="ownerLabel" runat="server" Text='<%# Eval("owner") %>' />   -  
<asp:Label ID="dateLabel" runat="server" Text='<%# Eval("commentdate")%>' />
<br />
<asp:Label ID="commentLabel" runat="server" Text='<%# Eval("comment") %>' />
</div>
</ItemTemplate>
<EmptyDataTemplate>
<div class="RadListView RadListView_Default">
<div class="rlvEmpty">
There are no previous comments.</div>
</div>
</EmptyDataTemplate>
</telerik:RadListView>
Thanks
In the code-behind you can fire a command event with the "Last" argument on PageLoad to force it to go to the last page.
See
how change the RadDataPager Page# From CodeBehind (server-side)
http://www.telerik.com/help/aspnet-ajax/datapager-overview.html
I have multiple UpdatePanels on a webpage, one inside UserControl (Purple ColorBox as show in image) and other inside the main page. When the paging user-control (< 1 2 3 >) of Main page is invoked it shows the corresponding UpdateProgress of 'Latest News' Section but also shows the UpdatePanelAnimationExtender of 'Subscribe' User-control.
I am using UpdatePanelAnimationExtender for user-control and UpdateProgress for the Latest-New which is on the main page.
I tried to change the properties but it keeps on coming; if I keep UpdateMode="Conditional" for user control then progress bar goes in loop and show continuously.
Screen Shot
How can I make changes to this code to show only corresponding progress bar. I have looked over 50 example from last few days but nun seems to be working. I would appreciate if someone can help me to get this fixed.
<!-- LatestNewArea -->
<div class="LatestNewArea">
<asp:UpdatePanel ID="updLatestNews" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptLatestNews" runat="server" EnableViewState="False" onitemdatabound="rptLatestNews_ItemDataBound">
<ItemTemplate>
<asp:HyperLink ID="hylLatestNews" CssClass="chylLatestNews" runat="server" NavigateUrl=''>
<div class="LatestNewsWrapper">
<div class="LatestNewsDateBox">
<div class="LNYYYY">
<asp:Label ID="lblYYYY" runat="server" Text="2012"></asp:Label>
</div>
<div class="LNDDMM">
<asp:Label ID="lblDDMM" runat="server" Text="12/08"></asp:Label>
</div>
</div>
<div class="LatestNewsTitle">
<asp:Label ID="lblLatestNewsTitle" runat="server" Text="First News for the Website"></asp:Label>
</div>
<div class="LatestNewsHDate">
<asp:Label ID="Label1" runat="server" Text="Hijri: 15 Rajab 1433"></asp:Label>
</div>
<div class="LatestNewsDesc">
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
</div>
</div>
<div class="LNHLine"> </div>
</asp:HyperLink>
</ItemTemplate>
</asp:Repeater>
<!-- Pager -->
<div class="LatestNewsPagerWrapper">
<div class="LatestNewsPagerInnerWrapper">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="50" AssociatedUpdatePanelID="updLatestNews" >
<ProgressTemplate>
<div id="imgLoadingArticleList" class="imgLoadingArticleList">
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/images/ajax-loader-bar2.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<uc1:PagerControl ID="PagerControl1" runat="server" CssClass="gold-pager" PageMode="LinkButton" />
</div>
</div>
<!-- Pager -->
</ContentTemplate>
</asp:UpdatePanel>
</div>
<!-- LatestNewArea -->
User Control Page Code
<script type="text/javascript">
function onUpdating() {
// get the divImage
var panelProg = $get('divImage');
// set it to visible
panelProg.style.display = '';
// hide label if visible
var lbl = $get('<%= this.pnlSubscribe.ClientID %>');
lbl.innerHTML = '';
}
function onUpdated() {
// get the divImage
var panelProg = $get('divImage');
// set it to invisible
panelProg.style.display = 'none';
}
</script>
<table cellpadding="0" cellspacing="0" class="SubscribeContainer">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="SubscribeWrapper" border="0">
<tr>
<td valign="top">
<asp:UpdatePanel ID="updSubscribe" runat="server" >
<ContentTemplate>
<asp:Panel ID="pnlSubscribe" runat="server" Height="10px">
<div class="SubHeading"><asp:Label ID="lblTitle" runat="server" Text="JOIN US"></asp:Label></div>
<div class="dSubName">
<asp:TextBox ID="txtName" CssClass="txtSubscribe" runat="server" Text="NAME" onfocus="if(this.value=='NAME')this.value='';" onblur="if(this.value=='')this.value='NAME';"></asp:TextBox>
</div>
<div class="dSubEmail">
<asp:TextBox ID="txtEmail" CssClass="txtSubscribe" runat="server" Text="YOUR EMAIL" onfocus="if(this.value=='YOUR EMAIL')this.value='';" onblur="if(this.value=='')this.value='YOUR EMAIL';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmailSub" runat="server" ErrorMessage="*"
ControlToValidate="txtEmail" ValidationGroup="SubEmail" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmailSub" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="SubEmail" ></asp:RegularExpressionValidator>
</div>
<div class="dSubSubmit">
<asp:Button ID="btnSubscribe" CssClass="btnSubscribe" runat="server" ValidationGroup="SubEmail" Text="Subscribe" onclick="btnSubscribe_Click" />
</div>
</asp:Panel>
<div class="dSubMSG">
<asp:Label ID="lblMSG" runat="server" Text=""></asp:Label>
</div>
<div id="divImage" style="display:none" class="dSubAni">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader-sub.png" Visible="true"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="updSubscribe" runat="server">
<Animations>
<OnUpdating>
<Parallel duration="0">
<ScriptAction Script="onUpdating();" />
<EnableAction AnimationTarget="btnSubscribe" Enabled="false" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<ScriptAction Script="onUpdated();" />
<EnableAction AnimationTarget="btnSubscribe" Enabled="true" />
</Parallel>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
</td>
</tr>
</table>
</td>
</tr>
</table>
Other Info: ASP.Net 4.0, C# & Paging control is a user control that uses linkbutton for paging
I tried many solution but non of them worked in a proper way. Finally i decided to replace UpdatePanelAnimationExtender of user control with UpdateProgress as I was able to trap the initiating UpdatePanel for AsyPostback
For some reason i was not able to trap AsyPostback when i used UpdatePanelAnimationExtender
This approach can be used for multiple update panel one need to trap the initiating control for post-back
BELOW IS A WORKING CODE
// Function to hide control on update
function onUpdateOfSubscribe() {
var panelProg = $get('divImage');
// set it to visible
panelProg.style.display = '';
// hide label if visible
var lbl = $get('<%= this.pnlSubscribe.ClientID %>');
lbl.innerHTML = '';
}
//Code to track the initiating event so to associate updateprogress
var currentPostBackElement;
function pageLoad() {
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_initializeRequest(OnInitializeRequest);
}
//On OnInitializeRequest
function OnInitializeRequest(sender, args) {
var manager = Sys.WebForms.PageRequestManager.getInstance();
currentPostBackElement = args.get_postBackElement().parentElement;
var cmdAuthoriseButton = '<%= btnSubscribe.ClientID %>';
if (cmdAuthoriseButton == args._postBackElement.id) {
// Show UpdateProgress for subscribe
onUpdateOfSubscribe();
}
}
</script>
<table cellpadding="0" cellspacing="0" class="SubscribeContainer">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="SubscribeWrapper" border="0" >
<tr>
<td valign="top">
<asp:UpdatePanel ID="updSubscribe" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Panel ID="pnlSubscribe" runat="server" Height="10px">
<div class="SubHeading"><asp:Label ID="lblTitle" runat="server" Text="JOIN US"></asp:Label></div>
<div class="dSubName">
<asp:TextBox ID="txtName" CssClass="txtSubscribe" runat="server" Text="NAME" onfocus="if(this.value=='NAME')this.value='';" onblur="if(this.value=='')this.value='NAME';"></asp:TextBox>
</div>
<div class="dSubEmail">
<asp:TextBox ID="txtEmail" CssClass="txtSubscribe" runat="server" Text="YOUR EMAIL" onfocus="if(this.value=='YOUR EMAIL')this.value='';" onblur="if(this.value=='')this.value='YOUR EMAIL';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmailSub" runat="server" ErrorMessage="*"
ControlToValidate="txtEmail" ValidationGroup="SubEmail" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmailSub" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="SubEmail" ></asp:RegularExpressionValidator>
</div>
<div class="dSubSubmit">
<asp:Button ID="btnSubscribe" CssClass="btnSubscribe" runat="server" ValidationGroup="SubEmail" Text="Subscribe" onclick="btnSubscribe_Click" />
</div>
</asp:Panel>
<div class="dSubMSG">
<asp:Label ID="lblMSG" runat="server" Text=""></asp:Label>
</div>
<div id="divImage" style="display:none" class="dSubAni">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader-sub.png" Visible="true"/>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubscribe" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updSubscribe" >
<ProgressTemplate>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</table>
</td>
</tr>
</table>
I've got a problem here with a div not being placed that way I'd like it to.
This is the ASP code I'm using:
<asp:ListView ID="categoriesListView" runat="server">
<LayoutTemplate>
<div class="main" runat="server">
<div ID="itemPlaceholder" class="sub" runat="server">
</div>
</div>
</LayoutTemplate>
<EmptyDataTemplate>
<div class="main" runat="server">
<div class="sub" ID="itemPlaceholder" runat="server">
No data was returned.
</div>
</div>
</EmptyDataTemplate>
<ItemTemplate>
<asp:Image AlternateText='<%# Eval("CategoryName") %>' ID="Image1" runat="server" ImageUrl='<%# Eval("CategoryImgUrl", "~/Images/{0}") %>' />
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:ListView>
I was expecting results like this:
<div class="main">
<div class="sub">
...
</div>
<div class="sub">
...
</div>
<div class="sub">
...
</div>
...
</div>
The result was one big div "main" containing everything, with no "sub" divs.
If I added the itemPlaceholder one level deeper, the same thing would happen, now with 1 "sub" div and everything pushed in there. How do I solve this?
Change it to look like this:
<LayoutTemplate>
<div class="main" runat="server">
<div ID="itemPlaceholder" runat="server">
</div>
</div>
</LayoutTemplate>
<EmptyDataTemplate>
<div class="main" runat="server">
<div class="sub" ID="itemPlaceholder" runat="server">
No data was returned.
</div>
</div>
</EmptyDataTemplate>
<ItemTemplate>
<div class="sub" >
<asp:Image AlternateText='<%# Eval("CategoryName") %>' ID="Image1" runat="server" ImageUrl='<%# Eval("CategoryImgUrl", "~/Images/{0}") %>' />
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
</div>
</ItemTemplate>