show div dynamically when user entered number in a textbox - c#

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

Related

ModalPopupExtender hides when dropdown post back works

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>

UpdatePanel triggers UpdateProgress of other usercontrol also in asp.net webform

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>

how do i reference a listview control that is nested in the itemtemplate of another listview control?

I have a listview control that is nested in the item template of another listview control that i'm trying to reference in codebehind using the .FindControl() method, but it keeps returning null. After get this to work, I'll need to reference a ComboBox inside of the inner listview. Here is where I am so far:
ListView lsvTickets
ItemTemplate
Listview lsvActions
ItemTemplate
ComboBox cboAssignees
I'm using the following code to attempt the reference in code behind:
var actions = (RadListView)lsvTickets.FindControl("lsvActions");
But this is returning null. I thought I would only have to do something like this to achieve the final desired result:
var assignees = (RadComboBox)lsvTickets.FindControl("lsvActions").FindControl("cboAssignees")
Can anyone help? What am I doing wrong here? Here's the full layout for those of you it would help:
<rad:RadListView runat="server" ID="lsvTickets">
<ItemTemplate>
<div id="divContainer" class="divContainer">
<div id="divTicketHeader" class="divTicketHeader">
<asp:Table runat="server" ID="tblTicketHead" Width="100%" CellSpacing="0" CellPadding="5" HorizontalAlign="Center">
<asp:TableRow HorizontalAlign="Center">
<asp:TableCell Width="25%">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Subject") %>' Font-Bold="true" />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="Label2" runat="server" Text='<%#Eval("Status.Key") %>' />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="Label3" runat="server" Text='<%#Eval("Ticket.Reported_By") %>' />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="Label4" runat="server" Text='<%#Eval("DateOpened") %>' />
</asp:TableCell></asp:TableRow></asp:Table></div>
<div id="divTicketBody" class="divComments">
<rad:RadListView runat="server" ID="lsvActions" DataSource='<%#Eval("TicketActions") %>'>
<ItemTemplate>
<center>
<div id="divAddComment" style="width: 500px;">
<div id="divCommentControls" style="margin: 8px 0px 8px 0px;">
<rad:RadComboBox runat="server" ID="cboStatus" DataSource='<%#GetStatuses() %>' DataTextField="Status" DataValueField="ID" /> <rad:RadComboBox runat="server" ID="cboAssignTo" DataSource='<%#GetAssignees() %>' DataTextField="Key" DataValueField="Value" />
</div>
<rad:RadTextBox runat="server" ID="txtComment" TextMode="MultiLine" Width="500" Height="100" CssClass="commentBox" /><br />
<div style="height: 35px;">
<div style="float:left"><asp:CheckBox ID="cbMakeITTicket" runat="server" Text="Convert to IT Support Ticket" /></div>
<div style="float:right; margin: 3px 0 0 0; "><rad:RadButton runat="server" ID="btnSubmit" Text="Submit" CssClass="buttonTag" /></div>
</div>
</div>
</center>
<div id="divComment" class="divComment">
<asp:Table runat="server" ID="tblComment" CellPadding="5">
<asp:TableRow>
<asp:TableCell Width="15%" HorizontalAlign="Center">
<rad:RadBinaryImage runat="server" ID="imgCommenter" Width="50" Height="50" /><br />
<asp:Label ID="Label5" runat="server" Text="[action author]" CssClass="commenterText" /><br />
<asp:Label ID="Label6" runat="server" Text='<%#Eval("Action_Date", "{0:MMM d, yyy hh:mm}") %>'
CssClass="commenterText"/><br />
</asp:TableCell><asp:TableCell>
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Description") %>' />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</ItemTemplate>
</rad:RadListView>
</div>
</div>
</ItemTemplate>
</rad:RadListView>
</asp:Content>
You're looking for a combobox in a control that potentially has many lines (thus rows of combobox instances ) - it doesn’t know which one you’re looking for.
Obviously I don’t know what you need to do to the combobox but you should look at
alternate approaches.
Take a look at using the OnItemDataBound event of lsvActions
Then add code such as …
protected void lsvActions_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
GridDataItem item = (GridDataItem)e.Item;
RadComboBox myCBO = (RadComboBox)item.FindControl("cboStatus")
myCBO.Visible = false;
}
}
...also, just a general tip, I usually find using OnNeedDataSource to load RadGrids and ListViews saves a lot of headaches.
Hope that helps.

JQuery to enable,disable textbox is not working consistently

I have a DropDownList as a custom control inserted into a subform which is within a popup window on my main page. I have coded unique CssClass identifiers for both the DropDownList and the textbox I am trying to enable/disable. I only want the textbox enabled for DropDownList values 317 and 318, all others should disable the textbox. Here is the problem... If I bring up my popup window and select an action other than 317/318, it disables the textbox as expected. Then if I change my mind and select 317 or 318 it DOES NOT enable the textbox. This seems real strange that it partially works.
I have the following jquery code in my main page:
<script language="javascript" type="text/javascript">
var _CASE_RESERVE_ACTION = "317";
var _LEGAL_RESERVE_ACTION = "318";
function pageLoad() {
$(".statusActionDDLCssClass").change(function() {
var value = $(this).val();
if (value == _CASE_RESERVE_ACTION || value == _LEGAL_RESERVE_ACTION)
$(".statusActionAmountCssClass").attr('enabled', 'enabled');
else
$(".statusActionAmountCssClass").attr('disabled', 'disabled');
});
}
</script>
Here is the custom control with the DropDownList:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="StStatusActionLookup.ascx.cs" Inherits="Company.Solutions.Web.Controls.StStatusActionLookup" %>
<div id="mainControlContainer" style="width:99%; padding:8px;">
<div id="comboContainer" style="float:left; padding-top:12px;padding-left:5px; padding-right:5px; padding-bottom:3px;">
<asp:UpdatePanel ID="update1" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chkComments" EventName="CheckedChanged" />
<asp:AsyncPostBackTrigger ControlID="chkDenials" EventName="CheckedChanged" />
<asp:AsyncPostBackTrigger ControlID="chkOther" EventName="CheckedChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddlLookup" width="240px" CssClass="statusActionDDLCssClass" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="filterContainer" style="text-align:left;padding-left:6px;width:275px">
<fieldset style="width:260;">
<legend>Filters</legend>
<asp:CheckBox ID="chkComments" runat="server" Text="Comments" AutoPostBack="true" />
<asp:CheckBox ID="chkDenials" runat="server" Text="Denials" AutoPostBack="true" />
<asp:CheckBox ID="chkOther" runat="server" Text="Other" AutoPostBack="true" />
</fieldset>
</div>
</div>
And here is my subform with the text box (txtStatusActionAmount):
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="StatusActionAddSubform.ascx.cs"
Inherits="Company.Solutions.Web.Controls.StatusActionAddSubform" %>
<%# Register TagPrefix="st" TagName="StatusActionLookup" Src="~/Controls/StStatusActionLookup.ascx" %>
<div class="NinetyNinePercentWide">
<div class="NinetyNinePercentWide EightPixelBottomMargin">
<div class="RowHeader" style="padding-top: 20px;">
<span>Action:</span>
</div>
<div>
<xy:StatusActionLookup ID="statusActionLookup1" runat="server" />
</div>
</div>
<div class="NinetyNinePercentWide EightPixelBottomMargin">
<div class="quarterWidthDiv">
<span>New Status:</span>
<asp:Literal runat="server" Text=" " ID="spc2" />
<asp:DropDownList runat="server" ID="ddlNewStatus">
<asp:ListItem Selected="True" Value="" Text="" />
<asp:ListItem Value="01" Text="Open" />
<asp:ListItem Value="02" Text="Closed" />
</asp:DropDownList>
</div>
<div class="quarterWidthDiv">
<span>Date:</span>
<asp:Literal runat="server" Text=" &nbsp" ID="spc1" />
<asp:TextBox ID="txtStatusActionDate" runat="server" Columns="10" MaxLength="10"
Style="width: 35%;" CssClass="statusActionDate" />
<cc1:CalendarExtender ID="txtStatusActionDate_CalendarExtender" runat="server" Enabled="True"
TargetControlID="txtStatusActionDate" />
<cc1:MaskedEditExtender runat="server" ID="txtStatusActionDate_MaskedEditExtender"
Enabled="True" Mask="99/99/9999" MaskType="Date" TargetControlID="txtStatusActionDate"
UserDateFormat="MonthDayYear" />
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txtStatusActionDate"
Type="Date" Operator="DataTypeCheck" ErrorMessage="Invalid Date" > </asp:CompareValidator>
</div>
<div class="quarterWidthDiv">
<asp:Label runat="server" ID="lblStatusActionAmount" AssociatedControlID="txtStatusActionAmount"
Text="Amount:" />
<asp:TextBox ID="txtStatusActionAmount" runat="server" Style="width: 30%;" CssClass="statusActionAmountCssClass" />
</div>
<div class="quarterWidthDiv">
<asp:Label runat="server" ID="lblClaimant" AssociatedControlID="ddlClaimant" Text="Claimant:" />
<asp:DropDownList ID="ddlClaimant" runat="server" onchange="mailOrStatusActionTextChanged()">
<asp:ListItem Selected="True" Value="" Text="" />
<asp:ListItem Value="1" Text="Primary" />
<asp:ListItem Value="2" Text="Secondary" />
</asp:DropDownList>
</div>
</div>
<div class="NinetyNinePercentWide EightPixelBottomMargin" style="margin-top: 2px;">
<div class="RowHeader">
<asp:Label runat="server" ID="lblStatusActionReason" AssociatedControlID="txtStatusActionReason"
Text="Reason:" />
</div>
<div style="padding-left: 12px;">
<asp:TextBox ID="txtStatusActionReason" runat="server" TextMode="MultiLine" Rows="2"
MaxLength="25" CssClass="StatusReasonWidth" onchange="mailOrStatusActionTextChanged()" />
<asp:CustomValidator ID="cstmValStatusActionReason" runat="server" ControlToValidate="txtStatusActionReason"
ErrorMessage="String is too long" />
</div>
</div>
</div>
Thank you,
Jim in Suwanee, GA
I don't believe there is a 'enabled' property of form elements, try
$(".statusActionAmountCssClass").attr('disabled', false);
EDIT
Note that the meaning and usage of attr() has changed in jQuery 1.6. While the above will probably still work, make sure to test and understand the difference between attr() and prop()
http://blog.jquery.com/2011/05/03/jquery-16-released/
In the 1.6 release we’ve split apart the handling of DOM attributes
and DOM properties into separate methods. The new .prop() method sets
or gets properties on DOM elements, and .removeProp() removes
properties. In the past, jQuery has not drawn a clear line between
properties and attributes. Generally, DOM attributes represent the
state of DOM information as retrieved from the document, such as the
value attribute in the markup . DOM
properties represent the dynamic state of the document; for example if
the user clicks in the input element above and types def the
.prop("value") is abcdef but the .attr("value") remains abc.
$(".statusActionAmountCssClass").attr('disabled', true) won't work
use :$(".statusActionAmountCssClass").attr('disabled', 'disabled')
and $(".statusActionAmountCssClass").removeAttr('disabled', 'disabled')
this will work
This is how i do it.
$("input[name='votingmode']").change(function () {
if ($("input[name='votingmode']:checked").val() == '1') {
$("#plusplus").attr("disabled", "disabled");
$("#minusminus").attr("disabled", "disabled");
} else if ($("input[name='votingmode']:checked").val() == '3') {
$("#plusplus").removeAttr("disabled", "disabled");
$("#minusminus").removeAttr("disabled", "disabled");
});

Binding a certain value on a control in a ListView's Insert template

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.

Categories