We Keep Coding

Asp.NET: How to keep focus on textbox in a nested Update Panel

I am working on making a semi simple post and reply/forum pages in asp.net(with C#). Everything works however when I went to add update panels it makes me want to throw my head into a wall.
I use a DataList to display the posts. I use a form consisting of two textboxes and a button to insert a new post. One textbox if for the name, and the other for the message.
First update panel I added (nested) is to provide a character count for the post. I have a label in the Content and it is triggered by the textboxes textchanged event. The textbox 'txtMessage' also has a java-script function run 'onkeyup' to keep the focus on the textbox when typing. I limit the characters at 1000.
The next update is to surround the DataList so that it does not post back everytime (if not used and the back button is hit it will go back and visually remove each post which is not a good design practice). However when I just put the panel around the DataList it did not postback the insert form so the boxes were not cleared. Which I would like to be done, so I wrapped everything then by this updatepanel, which then made the character count update panel nested by this one. This now works, but the focus is taken off of the txtMessage box each time the textchanged event fires. So the JavaScript is not firing now?
I have moved the opening and closing of the update panel countless times and have tried different fixes, so any further suggestions would help. The code is below.
ForumT.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ForumT.aspx.cs" Inherits="UPE_Site_v1.ForumT" %>
<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headPlaceHolder" runat="server">
<script type="text/javascript">
function reFocus(id) {
__doPostBack(id, '');
document.getElementById(id).blur();
document.getElementById(id).focus();
}
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="server">
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetPosts" TypeName="TimeTrackerRepository" DataObjectTypeName="System.Guid" DeleteMethod="DeletePost"> </asp:ObjectDataSource>
<asp:UpdatePanel ID="upDataList" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:DataList ID="DataList2" runat="server" CellPadding="4" DataSourceID="ObjectDataSource1"
ForeColor="#333333" OnItemCommand="DataList2_ItemCommand" OnItemDataBound="DataList2_ItemDataBound"
DataKeyField="PostID" OnItemCreated="DataList2_ItemCreated">
<AlternatingItemStyle BackColor="White" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#D4EBD4" />
<ItemTemplate>
<div class="row">
<div class="col-xs-12 col-sm-6">
Name: <strong><%# Eval("Name") %></strong>
</div>
<div class="col-xs-12 col-sm-6">
<%# Eval("TimePosted") %>
</div>
<div class="col-xs-12" style="word-break: break-all">
<%# Eval("Message") %>
</div>
</div>
<br />
<asp:Button ID="btnDelete" CssClass="btn btn-warning" runat="server" Text="Delete" CommandArgument='<%# Eval("PostID") %>' CommandName="DeleteItem" />
<asp:LinkButton CssClass="btn btn-primary" ID="lkbtnFullPost" runat="server" Text="See Full Post" CommandArgument='<%# Eval("PostID") %>' CommandName="FullPost"></asp:LinkButton>
</ItemTemplate>
<SelectedItemStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
</asp:DataList>
</div>
<%--</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPost" EventName="Click" />
</Triggers>
</asp:UpdatePanel>--%>
<br />
<br />
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 col-sm-offset-1 col-md-offset-2 col-lg-offset-3">
<p>Add a post to this forum:</p>
<div class="form-group">
<asp:Label ID="Label1" runat="server" Text="Name: "></asp:Label>
<asp:TextBox CssClass="form-control" ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtName"
ErrorMessage="This is a required field." ValidationGroup="Application"
Display="Dynamic" ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
<%--<asp:UpdatePanel ID="upMessage" runat="server" UpdateMode="Conditional">
<ContentTemplate>--%>
<div class="form-group">
<asp:Label ID="Label2" runat="server" Text="Message: "> </asp:Label>
<asp:TextBox onkeyup="reFocus(this.id);" CssClass="form-control" ID="txtMessage" runat="server" TextMode="MultiLine" Rows="4" OnTextChanged="txtMessage_TextChanged"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtMessage"
ErrorMessage="This is a required field." ValidationGroup="Application"
Display="Dynamic" ForeColor="Red">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator runat="server" ControlToValidate="txtMessage"
ErrorMessage="Character limit is 1000 characters."
ValidationGroup="Application" Display="Dynamic" ForeColor="Red"
ValidationExpression=".{0,1000}">
</asp:RegularExpressionValidator>
</div>
<br />
<%--</div>
</div>--%>
<%--</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPost" EventName="Click" />
</Triggers>
</asp:UpdatePanel>--%>
<%--<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 col-sm-offset-1 col-md-offset-2 col-lg-offset-3">--%>
<asp:UpdatePanel ID="upMessage" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblCharacterCount" runat="server">0/1000</asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtMessage" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ValidationGroup="Application" CssClass="btn btn-default" ID="btnPost" runat="server" Text="POST IT" OnClick="btnPost_Click" />
<asp:Label ID="lblError" runat="server" Text="" CssClas="Error" ForeColor="Red"></asp:Label>
</div>
</div>
<br />
<br />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
ForumT.aspx.cs
only including the textchanged event
protected void txtMessage_TextChanged(object sender, EventArgs e)
{
lblCharacterCount.Text = txtMessage.Text.Count().ToString() + "/1000";
if (txtMessage.Text.Count() >= 1000)
{
lblCharacterCount.ForeColor = System.Drawing.Color.Red;
}
else
{
lblCharacterCount.ForeColor = System.Drawing.Color.Black;
}
}
Sorry for the code being a little sloppy. Also side not, I am using bootstrap so that is what all of the div's are for

I was facing the same issue as I needed to set focus on the textbox after postbacks in update panel. So I researched over internet & found this Javascript code. I tried it & it is working perfectly. It adds event listener for update panel for before & after postback. Gets textbox id before postback & set it after completion of postback.
var lastFocusedControlId = "";
function focusHandler(e) {
document.activeElement = e.originalTarget;
}
function appInit() {
if (typeof (window.addEventListener) !== "undefined") {
window.addEventListener("focus", focusHandler, true);
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}
function pageLoadingHandler(sender, args) {
lastFocusedControlId = typeof (document.activeElement) === "undefined"
? "" : document.activeElement.id;
}
function focusControl(targetControl) {
if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
var focusTarget = targetControl;
if (focusTarget && (typeof (focusTarget.contentEditable) !== "undefined")) {
oldContentEditableSetting = focusTarget.contentEditable;
focusTarget.contentEditable = false;
}
else {
focusTarget = null;
}
targetControl.focus();
if (focusTarget) {
focusTarget.contentEditable = oldContentEditableSetting;
}
}
else {
targetControl.focus();
}
}
function pageLoadedHandler(sender, args) {
if (typeof (lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
var newFocused = $get(lastFocusedControlId);
if (newFocused) {
focusControl(newFocused);
}
}
}
Sys.Application.add_init(appInit);
Just use this code in your script on aspx page.

You say your javascript is not working. When using update panels and js you will need to rebind your js subscribed events.
Reference: jQuery $(document).ready and UpdatePanels?

how use PopupControlExtender with conditions

i have an asp.net Button, i want when a user click on that button:
if there is any Session["id"] for that user, user will be redirect to
another page
2.if not show a PopupControlExtender and show some link
to user
we cant use PopupControlExtender in code behind how i should check this condition ?
thx
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
<br />
<asp:Panel ID="Panel1" runat="server" BackColor="#9933FF" BorderColor="#6666FF"
Height="132px" Width="329px">
<asp:Button ID="Button2" runat="server" Text="Button" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Panel>
<asp:PopupControlExtender ID="PopupControlExtender1" runat="server"
TargetControlID="Button1" PopupControlID="Panel1"
>
</asp:PopupControlExtender>
</ContentTemplate>
</asp:UpdatePanel>

What you can do is conditionally register some javascript for opening the Popup when the button is clicked.
Lets say you define your popup like this:
<ajax:PopupControlExtender ID="popup" runat="server"
TargetControlID="textbox"
BehaviorID="mybehavior"
PopupControlID="panel"
Position="Bottom" />
Then, on the button click event:
if(Session["id"] == null)
{
var script = #"Sys.Application.add_load(function() { $find('mybehavior').showPopup(); });";
ScriptManager.RegisterStartupScript(this, GetType(), "ShowPopup", script, true);
}
else
{
//Redirect;
}

required field validator with javascript confirm function not validating

I am using required field validator, which validates text box and on click of submit button i have to ask for confirm, and I use confirm() function of java script.
Issue is that when I press OK in confirmation box page post backs and required field validator does not stops the page when I left the text box empty.
After reading posts from stackoverflow I used custom validator to stop the page, but I could not here is the code.
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1" ValidationGroup="one" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="one"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick="validate();" ValidationGroup="one" onclick="Button1_Click"/>
<asp:CustomValidator ID="CustomValidator1" ValidateEmptyText="true" runat="server" ValidationGroup="one" ErrorMessage="CustomValidator"></asp:CustomValidator>
<script type='text/javascript'>
function validate() {
var cv = document.getElementById('MainContent_CustomValidator1');
if (cv) {
cv.isValid = confirm('are you sure want to update record ?');
}
} </script>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1" ValidationGroup="one" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="one"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick="return validate();" ValidationGroup="one" onclick="Button1_Click"/>
<asp:CustomValidator ID="CustomValidator1" ValidateEmptyText="true" runat="server" ValidationGroup="one" ErrorMessage="CustomValidator" ClientValidationFunction="TextBox1Client"></asp:CustomValidator>
<script type='text/javascript'>
function validate() {
if(confirm('are you sure want to update record ?')){
return true;
}
else
{
return false;
}
}
//you need to add a custom validot client function also
function TextBox1Client(sender, args) {
//write your custom code here
args.IsValid = false;
//OR
args.IsValid =true;
}
</script>

try this code use Page_ClientValidate
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick="Javascript:if(Page_ClientValidate('one')){return validate();}" ValidationGroup="one" onclick="Button1_Click"/>

correct your code like this
if(confirm('are you sure want to update record ?')==false){
return false;
}
Thanks.

JavaScript is case sensitive, try this:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1" ValidationGroup="one" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="one"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick="validate();" ValidationGroup="one" onclick="Button1_Click"/>
<asp:CustomValidator ID="CustomValidator1" ValidateEmptyText="true" runat="server" ValidationGroup="one" ErrorMessage="CustomValidator"></asp:CustomValidator>
<script type='text/javascript'>
function validate() {
var cv = document.getElementById('MainContent_CustomValidator1');
if (cv) {
cv.IsValid = confirm('Are you sure want to update record?');
}
} </script>
You didn't capitalize the i in IsValid.

Error on Postback

I have a webpage that has a grid on it. When you click edit, a popup modal window opens. Inside the popup modal window, there is a grid and below it a dropdownlist and save button. When you click save, the selected value is inserted in the grid located in the modal window.
Everything works fine for the first time, however if you already close the modal window and you happen to do the process all over again (Click edit on the first grid > modal window shows > selects an item on the ddl > hit save button) a postback error happens. Im using an update panel and I also added a postbacktrigger to the add button inside the modal window..
Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%# Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
Code in the edit button of the first grid (this calls the modal window to open)
protected void grd_depreciation_RowEditing(object sender, GridViewEditEventArgs e)
{
Guid DepID = new Guid(grd_depreciation.DataKeys[e.NewEditIndex].Values[0].ToString());
//Show the Depreciation Modal Popup
EditModalDepPopup.Show();
//btnModalDepreciation_Click(sender,e);
//checks the type of depreciation.. Network or Equipment
DropDownList ddldescriptiondep = (DropDownList)(grd_depreciation.Rows[e.NewEditIndex].Cells[0].FindControl("ddlDescriptionDep"));
var incotype = (ddldescriptiondep.SelectedItem).ToString();
populategrd_Editdepreciation(DepID, incotype);
}
Here's the code in the add button inside the modal window (the one that causes the error):
MarginAnalysi checkmarginanalysisid = MarginAnalysisAssumption_worker.get(a => a.ProjectCode == lbl_projectCode.Text).SingleOrDefault();
DepreciationMatrix tblDepreciationMatrix = new DepreciationMatrix();
tblDepreciationMatrix.DepMatrixID = Guid.NewGuid();
tblDepreciationMatrix.DepID = new Guid(ViewState["DepID"].ToString());
tblDepreciationMatrix.IncCapexOpexID = new Guid(ddDepreciationModalEmpty.SelectedValue);
DepreciationMatrix_worker.insert(tblDepreciationMatrix);
DepreciationMatrix_worker.submit();
EditModalDepPopup.Show();
populategrd_Editdepreciation(new Guid(ViewState["DepID"].ToString()), ViewState["incotype"].ToString());
Code for to populate the grid on modal window:
//Populate Edit Depreciaiton Grid on Modal
public void populategrd_Editdepreciation(Guid DepID, string incotype)
{
ViewState["DepID"] = DepID;
ViewState["incotype"] = incotype;
var x = from a in DepreciationMatrix_worker.get(a => a.DepID == DepID)
select new { a.DepMatrixID, a.IncCapexOpexID };
grd_Editdepreciation.DataSource = x;
grd_Editdepreciation.DataBind();
//Populate dropdownlist on edit depreciation modal
MarginAnalysi checkmarginanalysisid = MarginAnalysisAssumption_worker.get(a => a.ProjectCode == lbl_projectCode.Text).SingleOrDefault();
//Selects eithers Equipment or Network Depreciation
string test = incotype.ToUpper();
if (test.Contains("EQUIPMENT"))
{
var dropdowndepreciationmodal = from a in tblIncCapexOpex_worker.get(a => a.MarginAnalysisID == checkmarginanalysisid.MarginAnalysisID && a.IncCoTypeID == "CAPEX" && a.DepreciationTypeID == "EQUIPMENT")
select new { text = a.Description, value = a.IncCapexOpexID };
populateDropdownlist(ddDepreciationModalEmpty, dropdowndepreciationmodal, true);
}
else
{
var dropdowndepreciationmodal = from a in tblIncCapexOpex_worker.get(a => a.MarginAnalysisID == checkmarginanalysisid.MarginAnalysisID && a.IncCoTypeID == "CAPEX" && a.DepreciationTypeID == "NETWORK")
select new { text = a.Description, value = a.IncCapexOpexID };
populateDropdownlist(ddDepreciationModalEmpty, dropdowndepreciationmodal, true);
}
}
Aspx Code for the Modal Pop out. This code is located inside an updatepanel tag.
<asp:Button ID="btnModalDepreciation" CssClass="popup_ButtonsHide" runat="server"
Text="Click here to show the modal" /><cc1:ModalPopupExtender BehaviorID="test4"
ID="EditModalDepPopup" BackgroundCssClass="ModalPopupBG" runat="server" TargetControlID="btnModalDepreciation"
PopupControlID="DivEditDepTab" Drag="True" PopupDragHandleControlID="DepPopupHeader"
DynamicServicePath="" Enabled="True">
</cc1:ModalPopupExtender>
<div id="DivEditDepTab" style="display: none;" class="popupConfirmation2">
<div class="popup_Container">
<div class="popup_Titlebar" id="DepPopupHeader">
<div class="TitlebarLeft">
Depreciation Items</div>
<div class="TitlebarRight">
</div>
</div>
<div class="popup_Body">
Depreciation Details
<br />
<asp:Table ID="Table25" runat="server" Width="400px">
<asp:TableRow>
<asp:TableCell>
<asp:GridView ID="grd_Editdepreciation" runat="server" AutoGenerateColumns="False"
Width="100%" OnRowCancelingEdit="grd_Editdepreciation_RowCancelingEdit" OnRowDeleting="grd_Editdepreciation_RowDeleting"
OnRowEditing="grd_Editdepreciation_RowEditing" OnRowUpdating="grd_Editdepreciation_RowUpdating"
OnRowDataBound="grd_Editdepreciation_RowDataBound" DataKeyNames="DepMatrixID">
<Columns>
<asp:TemplateField HeaderText="Depreciation" SortExpression="Depreciation">
<EditItemTemplate>
<asp:DropDownList ID="ddDepreciationModal" runat="server" Width="100%">
</asp:DropDownList>
<asp:HiddenField ID="hiddenIncCapexOpexID" runat="server" Value='<%# Bind("IncCapexOpexID") %>' />
</EditItemTemplate>
<ItemTemplate>
<asp:DropDownList ID="ddDepreciationModal" runat="server" Enabled="False" Width="100%">
</asp:DropDownList>
<asp:HiddenField ID="hiddenIncCapexOpexID" runat="server" Value='<%# Bind("IncCapexOpexID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="btnUpdateDepModal" runat="server" CausesValidation="True" CommandName="Update"
Text="Update"></asp:LinkButton> <asp:LinkButton ID="LinkButton2" runat="server"
CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton></EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="btnEditDepModal" runat="server" CausesValidation="False" CommandName="Edit"
Text="Edit"></asp:LinkButton> <asp:LinkButton ID="btnDeleteDepModal" runat="server"
CausesValidation="False" CommandName="Delete" Text="Delete"></asp:LinkButton>
<%-- <cc1:ConfirmButtonExtender ID="confirm1" TargetControlID ="btnDeleteDepModal" ConfirmText="Are you sure you want to delete this?" runat="server">
</cc1:ConfirmButtonExtender>--%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
No Data Found</EmptyDataTemplate>
</asp:GridView>
</asp:TableCell></asp:TableRow>
</asp:Table>
<asp:Table ID="Table26" runat="server" Width="400px">
<asp:TableRow>
<asp:TableHeaderCell>Depreciation</asp:TableHeaderCell></asp:TableRow>
<asp:TableRow>
<asp:TableCell Width="70%">
<asp:DropDownList ID="ddDepreciationModalEmpty" runat="server" Width="100%">
</asp:DropDownList>
</asp:TableCell><asp:TableCell Width="30%">
<asp:Button ID="btnAddDepreciationItem" runat="server" Text="Add" Height="26px" OnClick="btnAddDepreciationItem_Click"
Width="70%" /></asp:TableCell></asp:TableRow>
</asp:Table>
<asp:ValidationSummary ID="ValidationSummary22" runat="server" ValidationGroup="AddDepreciationModal" />
<asp:ValidationSummary ID="ValidationSummary23" runat="server" ValidationGroup="DeleteDepreciationModal" />
</div>
<div class="popup_Buttons">
<asp:Button ID="btnCancelDepreciationModal" runat="server" Text="Close" OnClick="CancelDepreciationItem_Click" /></div>
</div>
</div>

Have a look at my answer to this question to get an idea as to what is wrong.
https://stackoverflow.com/a/8572928/168371
The problem is not in your code but some control which is not inside an update panel and has old values in markup.
Please comment for any further assistance.

previous button shows validations

This is an example of my textbox in my form with a custom validation, I want to disable the validators :
<asp:textbox id="txtFirstName" runat="server" /></td><td>
<script language ="javascript">
function requireFirstName(source, args) {
if (document.getElementById("<%=txtFirstName.ClientID %>").value =="") {
args.IsValid = false;
}
else {
args.IsValid = true;
}
}
</script>
<asp:CustomValidator ID="RequiredValidator1" runat="server"
ErrorMessage="You must enter your first name."
ForeColor="Red" clientvalidationfunction="requireFirstName"
></asp:CustomValidator>
This is my previous button:
<asp:Button ID="PreviousButton" runat="server"
Text="<-- Back to Instructions" OnClick="btnBack_Click"
class="previous" />
<script type="javascript">
document.getElementById("<%=PreviousButton.ClientID%>").disableValidation = true;
</script>
This will not work and still has validators..help

Try setting CausesValidation to false.
<asp:Button ID="PreviousButton" runat="server" Text="<-- Back to Instructions" OnClick="btnBack_Click" class="previous" CausesValidation="false" />

<asp:Button ID="PreviousButton" runat="server" CausesValidation="false"
Text="<-- Back to Instructions" OnClick="btnBack_Click"
class="previous" EnableClientScript="false" />