I have a model pop up extender, within this pop up i have a dropdown list with AutopostBack="True". Now when I select one dropdown value the ModalPopupExtender hides. Let me know the reason??? Someone preferred to put update panel but still the problem exists
My pop up controls is,
<cc1:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnableScriptGlobalization="true"></cc1:ToolkitScriptManager>
<asp:HiddenField ID="HiddenField1" runat="server" />
<cc1:ModalPopupExtender ID="ModalPopupExtender3" runat="server"
BehaviorID="modalPopupExtender3"
TargetControlID="HiddenField1"
OkControlID="cancel1"
BackgroundCssClass="modalPopup" >
</cc1:ModalPopupExtender>
<!-- Update section-->
<div id="updatdediv1" visible="false" >
<div class="portlet box blue" id="Div3">
<div class="portlet-title">
<div class="caption"><i class="icon-reorder"></i> Add Salary Component </div>
<div class="tools">
<asp:imagebutton ID="Imagebutton2" runat="server" class="close" ImageUrl="~/jimage/clossse.PNG" />
</div>
</div>
<div class="portlet-bodypop">
<div class="controls">
<label class="control-label">Pay Grade:</label>
<asp:DropDownList ID="ddpaygrade" runat="server" AutoPostBack="true" class="m-wrap large" AppendDataBoundItems="false" ></asp:DropDownList>
</div>
<div class="controls">
<label class="control-label">DA %:</label>
<asp:TextBox ID="txtda" runat="server" class="m-wrap large" ReadOnly="true"></asp:TextBox>
</div>
<div class="controls">
<label class="control-label">Basic:</label>
<asp:TextBox ID="txtbasic" runat="server" class="m-wrap large"></asp:TextBox>
</div>
<div class="controls">
<label class="control-label">Calculated DA:</label>
<asp:TextBox ID="txtcalculatedDA" class="m-wrap large" runat="server" ></asp:TextBox>
</div>
<div class="form-actions1">
<button id="Button2"onclick="myFunction()"" style="display:none" >Save</button>
<asp:Button ID="btnedit2" runat="server" Text="Submit" CssClass="btn blue" ValidationGroup="grp1" />
<asp:Button ID="btncancel3" runat="server" Text="Cancel" CssClass="btn"/>
<asp:Label ID="label1" runat="server" Text="" Visible="false"></asp:Label>
</div>
</div>
</div>
</div>
<!-- temp panel-->
<asp:Panel ID="kj" runat="server" >
<table >
<tr><td class="style9">
<table >
<tr> <td class="style8"> </td> </tr>
<tr >
<td align="left" class="style12">
<asp:Button ID="cancel1" runat="server" Text="Cancel" Style=" display:none"
</td>
</tr>
</table>
</td></tr></table>
</asp:Panel>
If you need the modal popup extender to "survive" the postback, then you will have to manage that yourself. Handle the dropdown's SelectedIndexChanged event and show the popup there:
protected void ddpaygrade_SelectedIndexChanged(object sender, EventArgs e)
{
ModalPopupExtender3.Show();
}
Don't forget to wire-up the event in your markup:
<asp:DropDownList ID="ddpaygrade" runat="server" AutoPostBack="true"
class="m-wrap large" AppendDataBoundItems="false"
OnSelectedIndexChanged="ddpaygrade_SelectedIndexChanged" >
</asp:DropDownList>
Related
I have a search webpage where the user can apply for jobs. The jobs are displayed through repeater control. When the user clicks on apply button I want a modal to popup with two textboxes containing the companies email and the job name. Now when I am not passing passing at that time the modal pops up but when I try to pass values from repeater than the modal doesn't show up. I have searched a lot and even tried something. With what I have tried I am not getting an error but the modal is not showing up. Here is my code
.aspx code for repeater
<asp:Repeater ID="RepterDetails" runat="server" OnItemCommand="RepterDetails_ItemCommand">
<HeaderTemplate>
<table style="border:1px solid; width:800px" cellpadding="2" cellspaing="2">
<tr style=" color:#000000; font-size: large; font-weight: bold;">
<td colspan="2">
<b>JOBS Available</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<table style="border-top:3px solid; width:800px" >
<tr>
<td style="color:black" >
COMPANY:
<asp:Label ID="lblcmp" runat="server" Text='<%#Eval("cmp_name")%>' Font-Bold="true" ForeColor="black"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="color:black">
LOCATION:
<asp:Label ID="lbl_city" runat="server" Text='<%#Eval("city_name") %>' ForeColor="black"/>,
<asp:Label ID="lbl_state" runat="server" Text='<%#Eval("state_name") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td style="color:black">
Job:
<asp:Label ID="lbl_jname" runat="server" Font-Bold="true" Text='<%#Eval("job_name") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td style="color:black">
Job Details:
<asp:Label ID="lbl_jdet" runat="server" Text='<%#Eval("job_details") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td style="color:black">
Experience :
<asp:Label ID="lbl_jexp" runat="server" Text='<%#Eval("experience") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td style="color:black">
Job-Type :
<asp:Label ID="lbl_jobtype" runat="server" Text='<%#Eval("job_type") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="color:black" >Comapny Email: <asp:LinkButton ID="link_cemail" runat="server" CommandName='<%#Eval("cemail") %>' CommandArgument='<%#Eval("cemail") %>' Text='<%#Eval("cemail") %>' ForeColor="black" OnClick="link_cemail_Click" ></asp:LinkButton></td>
</tr>
</table>
<tr>
<td>
<asp:Button runat="server" ID="btn_apply" CommandName="popup" OnClick="btn_apply_Click" Text="apply"/>
<script type="text/javascript">
function openModal() {
$('#exampleModal').modal('show');
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
<ContentTemplate>
<asp:Button runat="server" ID="btn_save" OnClick="btn_save_Click" AutoPostBack="true" Text="Save" Height="34px"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn_save" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Modal code
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Apply for Job</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Company Email : <asp:TextBox ID="txt_email" runat="server" ReadOnly="true" ></asp:TextBox><br /><br />
Job-Name : <asp:TextBox ID="txt_app_jname" runat="server" ReadOnly="true"></asp:TextBox>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button></div>
</div>
This is my code behind
protected void btn_apply_Click(object sender, EventArgs e)
{
RepeaterItem item = (sender as Button).Parent as RepeaterItem;
string cemail = (item.FindControl("link_cemail") as System.Web.UI.WebControls.LinkButton).Text;
txt_email.Text = cemail;
ClientScript.RegisterStartupScript(GetType(), "popup", "openModal()", true);
}
I have tried this and I am not getting any error but my modal is not opening up.
please can someone help me?
This is my advice:
I use for asp.net projects Ajaxtoolkit: http://www.ajaxtoolkit.net/
Then I add in my project the dll
In my aspx page, I added this line to work with ajax controls
For modal scream I did the next:
Used ajx:ModalPopupExtender
Put the modal in asp panel
Resume of my code:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajx" %>
<ajx:ModalPopupExtender ID="mppPagos" runat="server" PopupControlID="pnl_PagosModal" TargetControlID="lk_BusquedaPagos" BackgroundCssClass="modalBackground">
</ajx:ModalPopupExtender>
<asp:HiddenField ID="lbl_IdAbono" Value="0" runat="server"/>
<div class="form-group row">
<div class="control-label col-lg-offset-0 col-md-2 col-lg-2">
<asp:LinkButton runat="server" CssClass="btn btn-success btn-sm" ID="lk_BusquedaPagos" Text=">> Agregar Pagos <<"></asp:LinkButton>
</div>
<div>
<asp:Button ID="btn_EliminarPagosRenta" CssClass="btn btn-success btn-sm" runat="server" Text="Eliminar Pago" OnClick="btn_EliminarPagosRenta_Click" />
</div>
</div>
<asp:Panel ID="pnl_PagosModal" runat="server" CssClass="panel EstiloPanel" ScrollBars="Vertical">
<asp:UpdatePanel ID="upl_ModalPagos" runat="server">
<ContentTemplate>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="close">
<asp:Button ID="btnCerrarModalPago" runat="server" Text="x" CssClass="btn-xs" OnClick="btnCerrarModalPago_Click"/>
</div>
<h5 class="modal-title">Pagos</h5>
<asp:Label ID="lbl_ErrorPagos" runat="server" Text="" ForeColor="Red"></asp:Label>
</div>
<div class="modal-body">
<div class="tab-pane fade in active" id="tab3_1">
<asp:HiddenField ID="HiddenField2" runat="server"/>
<div class="form-group row">
<asp:Label ID="lbl_FormaPago" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Forma de Pago:"></asp:Label>
<div class="col-md-4 col-lg-3">
<telerik:RadComboBox ID="rad_ddl_FormaPago" runat="server" Height="100%" Width="100%" OnSelectedIndexChanged="rad_ddl_FormaPago_SelectedIndexChanged"
ZIndex="10000000" AutoPostBack="true"
EmptyMessage="Seleccionar Forma Pago" MarkFirstMatch="true" EnableLoadOnDemand="true">
</telerik:RadComboBox>
</div>
<asp:Label ID="lbl_NumeroTarjeta" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Número de Tarjeta:"></asp:Label>
<div class="col-md-4 col-lg-3">
<asp:TextBox ID="txtNumeroTarjeta" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group row">
<asp:Label ID="lbl_MontoPago" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Monto Pago:"></asp:Label>
<div class="col-md-4 col-lg-3">
<asp:TextBox ID="txtMontoPago" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<asp:Label ID="lbl_Cambio" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Cambio:"></asp:Label>
<div class="col-md-4 col-lg-3">
<asp:TextBox ID="txtMontoCambio" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group row">
<asp:Label ID="lbl_DescGarantia" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Descripción de garantía:" Visible="false"></asp:Label>
<div class="col-md-4 col-lg-3">
<asp:TextBox ID="txt_DescGarantia" CssClass="form-control" runat="server" Visible="false"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnAgregarPago" runat="server" Text="Agregar Pago" CssClass="btn btn-success btn-sm" OnClick="btnAgregarPago_Click" />
<asp:Button ID="btnAgregarMontoTarjeta" runat="server" Text="Agregar Monto Tarjeta" CssClass="btn btn-success btn-sm" OnClick="btnAgregarMontoTarjeta_Click" />
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
I'm working on product cart page. Below is the code I'm working with. In the list view I'm getting all the products images as buttons. I want to update the carousel when any of the image in the list view clicked.
But When I click the image the page refreshes, I tried using update panel but since the button are dynamic can't able to find a proper way to handle it.
<div class="col-md-8 single-top-in simpleCart_shelfItem">
<div style="align-content: center">
<strong>CLICK THE IMAGE TO SELECT </strong>
</div>
<asp:ListView ID="ImagesList" runat="server"
DataKeyNames="ID"
GroupItemCount="14"
OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" class="data" 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>
<div class="data" data-image='<%#"assets/products/"+Eval("ImageUrl").ToString() %>'
data-name='<%# Eval("Description") %>' data-price='<%# Eval("Price") %>'
data-image1='<%#"assets/products/1_"+Eval("ImageUrl").ToString() %>'
data-image2='<%#"assets/products/2_"+Eval("ImageUrl").ToString() %>'>
<asp:LinkButton ID="GridBtn" runat="server" CssClass="myButton"
CommandName="Change"
OnCommand="btnDetails_Command"
CommandArgument='<%# Eval("Notes") %>'>
<img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="width: 50px; height: 50px" alt="Change" /></asp:LinkButton>
</div>
</td>
</ItemTemplate>
</asp:ListView>
</div>
<div class="col-md-4 single_left pull-left left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<div class="flexslider">
<ul class="slides">
<li id="image3" data-thumb="">
<%--<img id="image3" src="assets/products/1_ZP244.jpg" />--%>
<img id="image" src="assets/products/1_ZP244.jpg" />
<%-- <asp:Image ID="image" src="assets/products/1_ZP244.jpg" runat="server" />--%>
</li>
<li id="image4" data-thumb="">
<%--<img id="image4" src="assets/products/1_ZP244.jpg" />--%>
<img id="image1" src="assets/products/1_ZP244.jpg" />
<%--<asp:Image ID="image1" src="assets/products/1_ZP244.jpg" runat="server" />--%>
</li>
<li id="image5" data-thumb="">
<%--<img id="image5" src="assets/products/1_ZP244.jpg" />--%>
<img id="image2" src="assets/products/1_ZP244.jpg" />
<%--<asp:Image ID="image2" src="assets/products/1_ZP244.jpg" runat="server" />--%>
</li>
</ul>
</div>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" />
</Triggers>
</asp:UpdatePanel>
</div>
<script>
$(".data").mouseover(function () {
var image = $(this).attr('data-image');
var image1 = $(this).attr('data-image1');
var image2 = $(this).attr('data-image2');
var name = $(this).attr('data-name');
var price = $(this).attr('data-price');
var btnID = $(this).attr('ID');
$(".left").find('#image').attr('src', image);
$(".left").find('#image1').attr('src', image1);
$(".left").find('#image2').attr('src', image2);
$(".left").find('#image3').attr('data-thumb', image);
$(".left").find('#image4').attr('data-thumb', image1);
$(".left").find('#image5').attr('data-thumb', image2);
$(".left").find('#name').text(name);
$(".left").find('#price').text(price);
$(".left").find('#price').text(price);
})
</script>
You can register button for async postback inside an updatepanel by add a new OnPreRender event on the button:
protected void btnReloadQty_PreRender(object sender, EventArgs e)
{
ScriptManager scriptMan = ScriptManager.GetCurrent(this.Page);
scriptMan.RegisterAsyncPostBackControl((LinkButton)sender);
}
I have textbox with an id #txtUserEntry where user can put the number of their family member living in their house and a button #btnAddOccupant to click after they put a number in textbox and #divOccupantProfile should show up depends on the number entered so it means 1 family member is equal to 1 #divOccupantProfile
aspx code
<tr>
<td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td>
<td><asp:TextBox ID="txtUserEntry" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
<asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
</tr>
divOccupantProfile
<div id="divOccupantProfile">
<asp:Label ID="OPfamilyname" runat="server" Text="Family Name"></asp:Label>
<asp:TextBox ID="textOPfamilyname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPfirstname" runat="server" Text="First Name"></asp:Label>
<asp:TextBox ID="textOPfirstname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmiddlename" runat="server" Text="Middle Name"></asp:Label>
<asp:TextBox ID="textOPmiddlename" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmaritalstatus" runat="server" Text="Marital Status"></asp:Label>
<asp:DropDownList ID="ddlOPmaritalstatus" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Married</asp:ListItem>
<asp:ListItem>Single</asp:ListItem>
<asp:ListItem>Divorced</asp:ListItem>
</asp:DropDownList><br />
<asp:Label ID="OPoccupation" runat="server" Text="Occupation"></asp:Label>
<asp:TextBox ID="textOPoccupation" runat="server"></asp:TextBox><br />
<asp:Label ID="OPrelationship" runat="server" Text="Relationship"></asp:Label>
<asp:DropDownList ID="ddlOPrelationship" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Wife</asp:ListItem>
<asp:ListItem>Daughter</asp:ListItem>
<asp:ListItem>Son</asp:ListItem>
<asp:ListItem>Father</asp:ListItem>
<asp:ListItem>Mother</asp:ListItem>
<asp:ListItem>House helper</asp:ListItem>
<asp:ListItem>Driver</asp:ListItem>
</asp:DropDownList>
</div>
can someone show me an example how to do this one
something like
$('#btnAddOccupant').click(function(){
var occupants = $('#txtUserEntry').val();
//here some check on occupants.....
for(int i = 0;i<occupants;i++){
$(somewhere).append($('#divOccupantProfile').html());
}
})
Some suggestions:
because you are going to use multiple divOccupantProfile, it's better to use selectors based on the class instead of ID, otherwise in your page you'll have 1+ elements with the same ID.
The $(somewhere)
is the "container" where you want to put all the div related to each occupant profile
Also note that the .html() function will copy the html INSIDE the div, exluding the div itself. So if you want to have N elements formed in this way
<div class="occupantProfile">...</div>
<div class="occupantProfile">...</div>
you have to use
somewhere.append($('<div').append($('.occupantProfile')).html())
Here i have made a sample for what you should find helpful
HTML
<input type="text"http://jsfiddle.net/#save id="txtnum" />
<input type="button" value="click" id="btnSubmit" />
<div id="divOccupantProfile1">Data 1</div>
<div id="divOccupantProfile2">Data 2</div>
<div id="divOccupantProfile3">Data 3</div>
<div id="divOccupantProfile4">Data 4</div>
<div id="divOccupantProfile5">Data 5</div>
CSS
div[id^="divOccupantProfile"] {
display:none;
}
Jquery
$("#btnSubmit").click(function(){
var num = $("#txtnum").val();
$("#divOccupantProfile"+ num).css("display","block");
})
Demo Link
I am working on a webform which has two UpdatePanels; one inside UserControl and other inside the main page. When the pager user-control (< 1 2 3 >) of Main page is invoked it shows the corresponding UpdateProgress of 'Latest News' Section but also shows the Progress Bar of 'Subscribe' User-control.
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.
How can I make changes to this code to show only corresponding progress bar. I have looked over 50 example but nun seems to be matching. 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>
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
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 have a list view with a label that shows "Step #x", another label with the instructions, and then 2 linkbuttons for editing or deleting. At the footer of the ListView is another button "Add New Step" which opens up an empty TextBox and two buttons to save and cancel. I would also like it to increment the label, but I can seem to find the control in the code behind to change it's text. How do I do this?
Here's the asp markup:
<asp:ListView ID="lvSteps" runat="server" DataSourceID="ldsProcessStep" DataKeyNames="ID" InsertItemPosition="None">
<LayoutTemplate>
<div><asp:PlaceHolder ID="itemPlaceholder" runat="server" /></div>
<asp:Button ID="btnAddNewStep" runat="server" Text="Add New Step" OnClick="btnAddNewStep_Click" />
</LayoutTemplate>
<ItemTemplate>
<table width="100%">
<tr>
<td>
<asp:label runat="server" Text='<%# Eval( "StepNumber", "Step #{0}" ) %>' Width="75px" style="font-size:medium; font-weight:bold;" />
</td>
<td>
<div style="text-align:left; width:350px;">
<asp:label runat="server" Text='<% #( Eval("Instruction") ) %>' style="font-size:85%;" />
</div>
</td>
<td>
<div style="width:50px;">
<div><asp:LinkButton Text="Edit" runat="server" CommandName="Edit" style="font-size:75%;" /></div>
<div style="margin-top:5px;"><asp:LinkButton Text="Delete" runat="server" style="font-size:75%;" OnClientClick='<%# CreateConfirmation( Eval("StepNumber") ) %>' /></div>
</div>
</td>
</tr>
</table>
<hr style="width:90%; margin-left:20px;" />
</ItemTemplate>
<InsertItemTemplate>
<table width="100%">
<tr>
<td>
<asp:Label ID="lblNewStepNumber" runat="server" Width="75px" Text="????" style="font-size:medium; font-weight:bold;" />
</td>
<td>
<div style="text-align:left; width:350px;">
<asp:TextBox ID="txtInstruction" runat="server" TextMode="MultiLine" Rows="3" Width="100%" Text='<%# Bind("Instruction") %>' style="font-size:85%;" />
</div>
</td>
<td>
<div style="width:50px;">
<div><asp:LinkButton ID="btnInsert" Text="Save" runat="server" CommandName="Insert" style="font-size:75%;" /></div>
<div style="margin-top:5px;"><asp:LinkButton ID="lnkCancelInsert" Text="Cancel" runat="server" CommandName="Cancel" OnClick="btnCancelInsert_Click" style="font-size:75%;" /></div>
</div>
</td>
</tr>
</table>
</InsertItemTemplate>
</asp:ListView>
And some attempted code:
public void btnAddNewStep_Click( object sender, EventArgs e )
{
lvSteps.InsertItemPosition = InsertItemPosition.LastItem;
lvSteps.FindControl( "btnAddNewStep" ).Visible = false;
//Cannot find control
//lvSteps.FindControl( "lblNewStepNumber" ).Text = "doesn't work"
//Label lbl = (Label)lvSteps.FindControl( "lblNewStepNumber" );
//lbl.Text = "Doesn't work"'
}
I believe lvSteps has a reference to InsertItem (as in lv.InsertItem.FindControl("")), which you can use to find controls in the insert template. For lvSteps.FindControl finds controls created in the layout template. I think ItemDataBound or ItemCreated may also fire for the insert item, but I'm not 100% sure about that.
Property definition is available here: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.insertitemtemplate.aspx
HTH.