<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="divFilters">
<div class="subHeaderWrapper">
<span class="subHeaderLeft">
<img id="imgCtrlContainer" onclick="toggle_visibility('divContainer1','imgCtrlContainer','span_min.png','span_max.png','true');" name="Expand and Collapse1" alt="Expand / Collapse" src="../Style/UX/Images/span_min.png" style="display: none;" />
</span>
<span class="widgtTitle">
<asp:Label ID="lblFilters" EnableTheming="false" runat="server" Text="Filters"></asp:Label>
</span>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="subHeaderWrapper" id="divSubHeaderWrapper" runat="server">
<span class="subHeaderLeft"></span>
<span class="widgtTitle">
<asp:Label ID="lblObservation" EnableTheming="false" runat="server" Text="Observation"></asp:Label>
</span>
<a **href="#divFilters"** id="filterAnchor" class="filtersPopup" style="text-decoration: none;">
<img style="border-bottom: medium none; border-left: medium none; border-top: medium none; border-right: medium none" id="util1" class="filterIcon" onmouseover="mouseOverUtl('util1')" title="Filter" onmouseout="mouseOutUtl('util1')" name="Util1" runat="server" alt="Utility" src="../Images/icon_dash_filters.png" />
</a>
</div>
<asp:Griview...>
</asp:Gridview>
Above is my code written in the asp:UpdatePanel tag.While going from the anchor tag to the div "divFilter" the href="#divFilters" mentioned is not working.The same page when taken to another aspx page without giving updatepanel works fine. But I need to get it done under UpdatePanel only
Related
I have link buttons for showing gridview and list view and also I have paging using datalist control all these being within the updatepanel.
Paging and listview link button and gridview link button working fine in the first load but the problem is when I'm doing any action within update panel like moving to next page or change gridview to listview then the <a> tag link within the repeator control is not working.
I have order buton inside the repeator control this will give the modal pop up for quantity selection and add to cart option but <a> tag not working it does not show modal.
This <a> tag is not working:
<a class="cur-pointer order button"
data-uid="<%#Container.DataItem("unit")%>"
data-uname="<%#Container.DataItem("UnitName")%>"
data-price="<%#Container.DataItem("price")%>"
data-pro-name="<%#Container.DataItem(productName)%>"
data-iid="<%#Container.DataItem("ItemId")%>">
<strong>
<asp:Literal runat="server" Text="<%$Resources:Resource,Order %>"></asp:Literal>
</strong>
</a>
full code here :
<div class="row" style="padding: 0px 0px 41px 0px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="sort-grid">
<div class="col-md-4 ">
<div class="sorting hiddenview">
<asp:LinkButton ID="gridlink" runat="server" CssClass="icongridlist"><i class="gridicon"></i></asp:LinkButton>
<asp:LinkButton ID="listlink" runat="server" CssClass="icongridlist"><i class="fa fa-list" style="color:#fff;"></i></asp:LinkButton>
</div>
</div>
<div class="col-md-4 col-md-offset-4">
<div class="sorting pagingdropdownmob">
<%-- style="width: 91px;"--%>
<h6>Show</h6>
<asp:DropDownList runat="server" ID="dropdownlist" Style="width: 42px;" AutoPostBack="True" OnSelectedIndexChanged="lbtnFirst_Click">
<%--AppendDataBoundItems = "true"--%>
<asp:ListItem Selected="True" Text="10" Value="10"></asp:ListItem>
<asp:ListItem Text="15" Value="15"></asp:ListItem>
<asp:ListItem Text="30" Value="30"></asp:ListItem>
<asp:ListItem Text="45" Value="45"></asp:ListItem>
</asp:DropDownList>
<div class="clearfix"></div>
</div>
<div class="sorting paginglistmob">
<h6>Page: </h6>
<%-- <asp:LinkButton ID="lbtnFirst" runat="server" CausesValidation="false" OnClick="lbtnFirst_Click" ></asp:LinkButton> --%>
<asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click"><i class="fa fa-caret-left hoverclr"></i></asp:LinkButton>
<span>
<asp:DataList ID="dlPaging" runat="server" RepeatDirection="Horizontal" OnItemCommand="dlPaging_ItemCommand"
OnItemDataBound="dlPaging_ItemDataBound" Style="display: inline-block;">
<ItemTemplate>
<asp:LinkButton ID="lnkbtnPaging" runat="server" Style="color: #000;" CommandArgument='<%# Eval("PageIndex") %>'
CommandName="Paging" Text='<%# Eval("PageText") %>'></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
<asp:LinkButton ID="lbtnNext" runat="server" CausesValidation="false"
OnClick="lbtnNext_Click"><i class="fa fa-caret-right hoverclr"></i></asp:LinkButton></span>
<%-- <asp:LinkButton ID="lbtnLast" runat="server" CausesValidation="false" OnClick="lbtnLast_Click">Last</asp:LinkButton></span>--%>
</div>
</div>
<div class="clearfix"></div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="row">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<div class="single-pro">
<asp:PlaceHolder ID="phItem" runat="server" Visible="false">
<asp:Repeater ID="rptItem" runat="server">
<ItemTemplate>
<div class="col-md-3 col-sm-6 product-men">
<%-- col-md-4 col-sm-6--%>
<div class="men-pro-item simpleCart_shelfItem">
<div class="men-thumb-item">
<a href="javascript:void(0);">
<img alt="" class="pro-image-front" src="<%#Container.DataItem("ImageSrc")%>">
<img alt="" class="pro-image-back" src="<%#Container.DataItem("ImageSrc")%>">
</a>
<div class="men-cart-pro" style="padding-bottom: 8px;">
<div class="inner-men-cart-pro">
<asp:LinkButton runat="server"><i class="glyphicon glyphicon-zoom-in"></i> View</asp:LinkButton>
</div>
</div>
</div>
<%--men thumb item--%>
<div class="item-info-product ">
<h5 style="font-size: 16px; font-weight: 900; padding-left: 0px; padding-right: 0px; height: 42px; line-height: 17px;" class="m-none h-initial"><strong><%#Container.DataItem(productName)%></strong></h5>
<%--height:33px;--%>
<div class="info-product-price">
<strong><span class="item_price"><%#Container.DataItem("price")%> </span><%=GetGlobalResourceObject("Resource", "Currency")%><span> /<%#Container.DataItem("UnitName")%></span>
</div>
<div class="snipcart-details top_brand_home_details item_add single-item link-product-add-cart ">
<a class="cur-pointer order button" data-uid="<%#Container.DataItem("unit")%>" data-uname="<%#Container.DataItem("UnitName")%>" data-price="<%#Container.DataItem("price")%>" data-pro-name="<%#Container.DataItem(productName)%>" data-iid="<%#Container.DataItem("ItemId")%>"><strong>
<asp:Literal runat="server" Text="<%$Resources:Resource,Order %>"></asp:Literal></strong> </a>
</div>
</div>
<%-- item info product--%>
</div>
<%-- menproitem--%>
</div>
<%--colmd3--%>
</ItemTemplate>
</asp:Repeater>
</asp:PlaceHolder>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="row">
Because the Repeater is in an UpdatePanel, you need to rebind the data attributes after Async PostBack. Because the PostBack updates the UI and previous bindings are lost.
<script type="text/javascript">
$(document).ready(function () {
bindDataAttributes();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
bindDataAttributes();
});
function bindDataAttributes() {
//call the jquery function that binds data-uid etc here
}
</script>
You need to populate the repeater on each postback. The best place for this is the OnInit event.
In my ASP.NET web project, i am using a web user control in a web form to generate insert/update/delete operations for the data in the web form.
<asp:UpdatePanel runat="server" ID="ctlUcusUpdatePanel">
<ContentTemplate>
<uc1:UcusBilgileriEditor runat="server" ID="ctlUcusBilgileriEditor" />
<%-- Here I have a grid to display data--%>
</ContentTemplate>
</asp:UpdatePanel>
Here is my user control:
<asp:UpdatePanel ID="ctlEditorUpdatePanel" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="ctlEditorContentPanel" Visible="false">
<div class="panel panel-primary" id="ctlUcusBilgiModal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; width: 100%; display: none">
<div class="panel-heading">
<div class="panel-title">
<hzg:HZGLiteral runat="server" ID="ctlModalTitle"></hzg:HZGLiteral>
</div>
</div>
<div class="panel-body" style="padding: 20px 20px 2px 2px;">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Genel</li>
<li class="">Uçuş Detayları</li>
<li class="">Açıklamalar</li>
</ul>
<div class=tab-content>
<div class="form-group col-sm-1">
<label class="control-label" for="<%= ctlFlightMoveType.ClientID %>">
<asp:Literal runat="server" ID="ctlFLightMoveLiteral" meta:resourcekey="ctlFlightMoveTypeLiteral" />
</label>
<hzg:HZGRadioButtonList ID="ctlFlightMoveType"
AutoPostBack="true"
CellPadding="3"
RepeatColumns="5"
RepeatDirection="Vertical"
TextAlign="Right"
runat="server"
DataValueField="INISMI"
EnumType="HZG.Core.Model.Enums.FlightMove"
OnSelectedIndexChanged="ctlFlightMoveType_SelectedIndexChanged">
</hzg:HZGRadioButtonList>
</div>
</div>
</div>
<div class="panel-footer" style="text-align: right">
<hzg:HZGButton ID="ctlSaveButton" runat="server" ButtonDesign="success" ButtonSize="small" Text="Kaydet" OnClick="ctlSaveButton_Click" meta:resourcekey="ctlSaveButton" RolePermission="Admin,PowerUser,User" />
<hzg:HZGButton ID="ctlDeleteButton" runat="server" ButtonDesign="danger" ButtonSize="small" Text="Delete" OnClick="ctlDelete_Click" meta:resourcekey="ctlDeleteButton" OnClientClick='<%$ Resources:GlobalResource, AreYouSure%>' RolePermission="Admin,PowerUser,User" />
<hzg:HZGButton ID="ctlCloseButton" runat="server" ButtonDesign="primary" ButtonSize="small" Text="İptal" OnClick="ctlCloseButton_Click" meta:resourcekey="ctlCloseButton" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
When I click on a radiobutton in my RadiButtonList, ctlFlightMoveType_SelectedIndexChanged event is triggered; and when this happens, i want only my user control to postback but my web form postback and the user control is closed.
I dont want the webform to postback, i want only user control. How can i do this?
Please, read the AJAX overview, you can also read up about ScriptManager and UpdatePanel. Using UpdatePanel you can achieve the feature described in your question.
On your user control update panel make sure you have childrenastriggers=true. And on the script manager declaration (in your main page) make sure you have enablepartialupdates selected.
If it's still forcing a full post back, chances are you have some iffy html somewhere on the page.
I use JQuery ThickBox 3.1 , and here is my code
<telerik:RadListView runat="server" ID="myDataList" AllowPaging="true"
DataKeyNames="id" ItemPlaceholderID="PlaceHolder1"
NeedDataSource="list_DataRebind">
<LayoutTemplate>
<div class="sushibar">
<asp:Panel ID="SushiPanel" runat="server">
<div class="sushi">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
<telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="4" PagedControlID="myDataList">
<Fields>
<telerik:RadDataPagerButtonField />
<telerik:RadDataPagerPageSizeField />
<telerik:RadDataPagerSliderField />
</Fields>
</telerik:RadDataPager>
</asp:Panel>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="imageDiv">
<span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
<%#Eval("Title") %></span>
<br />
<a href='<%#Eval("ImagePath")%>' title='<%#Eval("Title")%>' class="thickbox" >
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
</ItemTemplate>
</telerik:RadListView>
Popup box with Image and Title show correctly , but I have another field(<%#Eval("Description")%>) to show with it !
I found how to show Inline Content in Thickbox ,
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a
caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"
class="thickbox">Show hidden modal content.</a>
But I don't know how to use this in a ListView !
:D , I found the answer ! Just put the contents ( Image + Description ) to hidden division (style with Display:none) and set this div id to inlineId .
<ItemTemplate>
<div class="imageDiv">
<span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
<%#Eval("Title") %></span>
<br />
<div id="popUpRegion" style="display: none">
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="500px" height="600px" />
<p>
<%#Eval("Description")%></p>
</div>
<a href="#TB_inline?height=800&width=600&inlineId=popUpRegion" title='<%#Eval("Title")%>'
class="thickbox">
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
</ItemTemplate>
I have an ASP.NET 3.5 form with several fields and a sub form inside a ModalPopup. The problem I'm having is with a RequiredFieldValidator inside the ModalPopup. For some reason it is preventing post back inside the ModalPopup. Both the validator and the submit buttons have the same ValidationGroup that is unique to them. Here is the markup for the sub form:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="RoomBuilder.ascx.cs" Inherits="Admin_Controls_RoomBuilder" %>
<link href="../../../../style/FlexStyle.css" rel="stylesheet" type="text/css" id="style"
runat="server" visible="false" />
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="form" style="width: 420px; height: 500px; padding: 3px; position: relative;
text-align: center;">
<div style="width: 280px">
<div class="item smalltitle ">
Title:
</div>
<div class="item">
<asp:TextBox ID="txtTitle" runat="server" Width="250px"></asp:TextBox>
</div>
<div class="item smalltitle gapontop">
Description:
</div>
<div class="item">
<asp:TextBox ID="txtDesc" runat="server" Width="250px" Height="40px" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="item gapontop">
<div class="smalltitle floatLeft" style="width: 120px;">
Room Number
</div>
<div class="smalltitle floatLeft" style="width: 120px;">
Phone
</div>
</div>
<div class="item">
<div class="floatLeft" style="width: 120px;">
<asp:TextBox ID="txtRoomNo" runat="server" Width="100px"></asp:TextBox>
</div>
<div class="floatLeft" style="width: 120px;">
<asp:TextBox ID="txtPhone" runat="server" Width="100px"></asp:TextBox>
</div>
</div>
<div class="item smalltitle gapontop ">
Type:
</div>
<div class="item">
<asp:TextBox ID="txtType" runat="server" Width="250px"></asp:TextBox>
</div>
<div class="item smalltitle gapontop ">
Number of Seats:
<asp:RequiredFieldValidator ID="RequiredFieldValidatortxtNoSeats" runat="server" ErrorMessage="*"
ControlToValidate="txtNoSeats" ValidationGroup="roomVal"></asp:RequiredFieldValidator>
</div>
<div class="item">
<asp:TextBox ID="txtNoSeats" runat="server" Width="50px"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Not a number"
ControlToValidate="txtNoSeats" ValidationGroup="roomVal" ValidationExpression="[0-9]*"></asp:RegularExpressionValidator>
</div>
</div>
<!-- ************************************ -->
<div class="topBorder" style="width: 100%; height: 35px; position: absolute; bottom: -8px;
right: 2px; text-align: right; padding-top: 11px;">
<asp:Button ID="btnCancel" runat="server" CssClass="button" Text="Cancel" CausesValidation="false"
OnClick="btnCancel_Click" ValidationGroup="roomVal" />
<asp:Button ID="btnSave" runat="server" CssClass="button" Text="Save" OnClick="btnSave_Click" CausesValidation="true" ValidationGroup="roomVal" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
When the validator is removed (or CausesValidation is set to false), the sub form posts. RegularExpressionValidators don't have this problem. I've run FireBug, but I'm not seeing any obvious errors.
Is there something I'm missing?
Oh my god I'm so stupid!! >:(
Found the reason for the problem. There was another copy of the same control nested inside another control. And (of course) having the same ValidationGroup name as my first control all Required Field Validators fail to work!
Argh! Candidate for a Daily WTF!
Sorry to have wasted everybody's time :(
Can you please check if your Button (or some other control) that open the popup and the modaldialog extender are outside the update panel?
I got strange problems with modalpopup too. I would suggest you to try something different, for example a numericupdown control from the ajaxcontroltoolkit, if you already use it. So you don't need any validator for this.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<div class="item smalltitle gapontop ">
Number of Seats:
</div>
<div class="item">
<asp:TextBox ID="txtNoSeats" runat="server" Width="50px"></asp:TextBox>
<cc1:NumericUpDownExtender ID="txtNoSeatsExt" runat="server"
Enabled="true" Minimum="1" Maximum="100" TargetControlID="txtNoSeats" Width="50" />
</div>
I am using DataList control to show three products per line horizontally. But there is layout problem and it pushes up the product image container element like the below :
Data List Layout problem http://www.pixelshack.us/images/wwmlzkvhxsr7b2l0ptcl.jpg
Here is the code :
<asp:DataList ID="dlProducts" runat="server" RepeatColumns="3" RepeatLayout="Table"
DataSourceID="ObjectDataSourceCategories" RepeatDirection="Horizontal" CellSpacing="10" CellPadding="0" HorizontalAlign="Center" ItemStyle-Wrap="true">
<ItemTemplate>
<a href='<%# "Items.aspx?catId=" + (string)Eval("id") %>'>
<asp:Image ID="Image1" CssClass="photo-border photo-float-left" runat="server" Width="165px"
Height="120px" ImageUrl='<%# "ProductImages/Thumbnails/" + (string)Eval("ImageUrl") %>'
AlternateText='<%#(string)Eval("ImageAltText")%>' /></a>
<br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# "Items.aspx?catId=" + (string)Eval("id") %>'
Text='<%# Eval("Title").ToString()%>' Font-Bold="true" />
</ItemTemplate>
</asp:DataList>
How can I get over the problem ?
Thanks in advance.
I was having a similar issue. I ended up having to break the linked image and and text into their own div and style them accordingly:
<ItemTemplate>
<div class="outer">
<div class="top">
<asp:HyperLink id="hlImage" runat="server" CssClass="Font7">
</asp:HyperLink>
</div>
<div class="bottom">
<asp:Label id="lbText" runat="server" CssClass="Font7"></asp:Label>
</div>
</div>
</ItemTemplate>
I'm sure there are cleaner ways to do this and this is just example of what the HTML output might look like. This is just "off the cuff" but if you put in an empty htm file it will display.
<div style="width: 100px;">
<!-- first row -->
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="height:50px; background-color:Aqua; vertical-align:bottom;">
<span>text</span>
</div>
</div>
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="background-color: Aqua;">
<span style="height:50px; vertical-align:bottom;">text</span>
</div>
</div>
<!-- second row -->
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="height:50px; background-color:Aqua; vertical-align:bottom;">
<span>text</span>
</div>
</div>
</div>
You can most likely use RepeatLayout="Flow" ItemStyle="float:left;" in your DataList control to help as well.
I'm not sure off the top of my head how to fix this, but I would start by putting each item in a <div> or <span> and use CSS classes, instead of the control's styling. E.g.:
<Item Template>
<div class="myClass">...</div>
</Item Template>
Using this with Firebug to then debug is usually easier than figuring out how you're violating the control's height, etc.