UpdatePanel, Timer and TexBox Problem - asp.net

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always" >
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="300" ontick="Timer1_Tick"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Send" />
</ContentTemplate>
</asp:UpdatePanel>
Problem is that TextBox1’s cursor is not blinking it is static but you can write in it. It gives the impression that it freezed. Why cursor is not blinking?

You should set your timer interval near as 1000 milliseconds. That should solve your blinking problem.

When the post-back completes you can run a piece of JavaScript which will remove the focus from the textbox (e.g. it will no longer accept text) and then you can immediately re-focus on the textbox (so it will accept text again). This may "reset" the cursor so that it displays properly.
Try adding this to your ASPX, preferably outside of the UpdatePanels:
<script type="text/javascript">
function fixTextBoxFocus()
{
var textBox = document.getElementById("<%= TextBox1.ClientID %>");
textBox.blur(); //Remove the focus from the text box.
textBox.focus();//Re-focus on the textbox.
}
</script>
And then, in your code-behind (replace MyPage with the name of your page's class):
protected void Timer1_Tick(object sender, EventArgs e)
{
this.ClientScript.RegisterStartupScript(typeof(MyPage), "fixTextBoxFocus", "fixTextBoxFocus();", true);
}
Now, when the partial-post-back occurs, this script will be executed each time. Give it a try and let me know if it helps to fix the issue.

Placing a timer inside an updatepanel will result in a repeat refresh of that update panel. SInce you have placed the timer interval as 300 milliseconds. That may be the problem.
What you need to think about -
Do you really want to place the timer in the update panel?
Do you really need to keep the interval as 300 milli seconds.
Will it not be possible to move the textbox outside the updatepanel?

Related

How DropDownList's SelectedIndexChanged() works without PostBack?

DropDownList's SelectedIndexChanged() Event fills the ListBox on the page. Obviously this posts the page back to the server. Is there any way to make it happen without full postback?
protected void ddlTablo_SelectedIndexChanged(object sender, EventArgs e)
{
List<string> list = new List<string>();
ListBox1.Items.Clear();
var columnNames= from t in typeof(Person).GetProperties() select t.Name;
foreach (var item in columnNames)
{
list.Add(item);
}
ListBox1.DataSource = list;
ListBox.DataBind();
}
You could put the DropDownList into an <asp:UpdatePanel> and set the trigger to the SelectedIndexChanged event of the DropDownList.
Something like this (don't forget the script manager)
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drop1" runat="server" OnSelectedIndexChanged="ddlTablo_SelectedIndexChanged" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostbackTrigger ControlID="drop1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
You can send ajax call, using asp.net UpdatePanel or use jQuery ajax. This wont do postback and your whole page wont get refreshed.
The UpdatePanel is quite straight forward and easy to use. ASP.net ajax will generate the asyn calls for you whereas jQuery ajax will probably need you to render html using javascript.
In the code snippet below, add this parameter: AppendDataBoundItems="True"
<asp:DropDownList ID="ddlGroupNameFilter"
runat="server"
AutoPostBack="true"
AppendDataBoundItems="true"
OnSelectedIndexChanged="ddlLeadgroupName_SelectedIndexChange">
</asp:DropDownList>

RadioButtonList inside UpdatePanel inside Repeater, Can I?

I have a repeater with a RadioButtonList inside the ItemTemplate, but when the RadioButtonList.OnSelectedIndexChanged event fires it generates a full postback. What have I done wrong in my code below? How can I get the OnSelectedIndexChanged to generate an Async Postback?
<asp:UpdatePanel runat="server" ID="UpdatePanel2">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="sqlOptions">
<ItemTemplate>
<asp:UpdatePanel runat="server" ID="pnlA">
<ContentTemplate>
<strong>
<%# Eval("Name") %></strong><br />
<asp:RadioButtonList ID="RadioButtonList1"
DataSourceID="sqlOptionValues" runat="server"
DataTextField="id" DataValueField="Id" AutoPostBack="true"
OnSelectedIndexChanged="LoadPrice"
ValidationGroup="options" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ForeColor="Red" runat="server"
ControlToValidate="RadioButtonList1"
ErrorMessage="Required Field"
ValidationGroup="options" />
<asp:SqlDataSource ID="sqlOptionValues" runat="server"
ConnectionString="<%$ ConnectionStrings:
ConnectionString6 %>"
SelectCommand='<%# "SELECT DISTINCT OptionValue.Name,
OptionValue.Id FROM CombinationDetail
INNER JOIN OptionValue
ON CombinationDetail.OptionValueId = OptionValue.Id
WHERE (OptionValue.OptionId =" +
Eval("Id") + ")" %>'>
</asp:SqlDataSource>
<br />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
Many thanks for any help :)
This is a real-world use case. I have a page with Repeaters, Ajax Accordions inside of other Accordions, Update Panels inside other Update panels, you name it. The page works great, except when I want to update one of the Accordion panels with my RadioButtonList (RBL). Even with the RBL inside an update panel, it causes a postback of the entire page. I tried everything. I finally realized it wasn't me when I noticed my buttons would work just fine. I figure it must be a bug in either the framework or the Ajax Control Toolkit. I did find people reference this link all over the web (http://blog.smarx.com/posts/the-case-of-the-radiobuttonlist-half-trigger.aspx), but this link from 2007 is dead now and probably no longer applicable, so that's no help.
What I ended up doing was going with what works - that submit button. All I did was add an onclick attribute to the RBL to call a hidden button. Now you don't want to set the button to Visible=false because then the button won't appear in the generated markup. Instead, set the button's style to display:none; so that no one will see this hack, because yes, that's what this workaround is - it's a hack, but simple and just as effective as what you'd expect. Don't forget to remove the Autopostback="True" from your RBL.
CAVEAT: Because I'm using a hacked button for the onclick event, it's possible for the user to click in the area of the RBL, but not actually select an item. When this happens, our onclick triggers an AsyncPostBack and the codebehind logic will be processed, so please keep that in mind. To give you an idea of what I mean: all the Page_Load() events will be called, but rbl_Questions_SelectedIndexChanged() won't be if they happen to click in the area of the RBL without actually selecting an item. For my purposes this causes no issues in my logic and has no effect on the user.
Here's the Code:
Somewhere In the .Aspx Page:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="rbl_Questions" runat="server"
OnSelectedIndexChanged="rbl_Questions_SelectedIndexChanged">
</asp:RadioButtonList>
<asp:Button ID="btn_rbl_Questions" runat="server" style="display:none;"/>
<asp:Label ID="lbl_Result" runat="server" Text="" Visible="false">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
In the Page_Load() event:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack == false)
{
//Instead of using the AutoPostback of the RBL, use this instead.
rbl_Questions.Attributes.Add("onclick",
"document.getElementById('"
+ btn_rbl_Questions.ClientID
+ "').click();");
//Bind your RBL to a DataSource, add items programmatically,
// or add them in the aspx markup.
}
}
In the rbl_Questions_SelectedIndexChanged() event:
protected void rbl_Questions_SelectedIndexChanged(object sender, EventArgs e)
{
//Your code here.
//My code unhid the lbl_Result control and set its text value.
}
Update 05/24/2011
The above "hack" is no longer necessary (I am leaving it above since this was marked as the answer by the author). I have found the best way to do this, thanks to this SO Answer:
Updatepanel gives full postback instead of asyncpostback
The code is much simpler now, just remove what I put in the Page_Load() method and remove the Button I used in the Aspx page and add ClientIDMode="AutoID" and AutoPostBack="True" to the control you want the UpdatePanel to capture.
Somewhere In the .Aspx Page:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="rbl_Questions" runat="server"
ClientIDMode="AutoID" AutoPostBack="true"
OnSelectedIndexChanged="rbl_Questions_SelectedIndexChanged">
</asp:RadioButtonList>
<asp:Label ID="lbl_Result" runat="server" Text="" Visible="false">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
MS changed how ClientID's are generated in .net 4.0 from "AutoID" to "Predictable" and I guess the ScriptManager or UpdatePanel's weren't updated correctly to use it. I can't find documentation on why that is anywhere or if it was left that way by design.
I seriously don't miss winforms.
Try this:
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="pnlA">
You'll also need to setup
<Triggers>
//radio buttons
</Triggers>
Not sure how you'll do that since it's a dynamically built list.

When UpdatePanel make PostBack to another one

I have a complicated case, so I can't post it.
I have two UpdatePanels with two UserControls inside them, like the following:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<A:u1 ID="u1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<A:u2 ID="u2" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
In this sample, the PostBack in u1 doesn't effect on u2. but in my code the PostBack in the first UserControl made a PostBack in the second.
What are the expected reasons ??
Thanks for the help.
This is by design: when a partial postback occurs, the whole page is rendered again even if only part of the resulting markup is sent to the client. Thus, both your user controls go through their lifecycles again, even if only u1 is updated.
If you want to detect that case, you can use the IsInAsyncPostBack property:
protected void Page_Load(object sender, EventArgs e)
{
if (ScriptManager.GetCurrent(Page).IsInAsyncPostBack) {
// This is a partial postback.
}
}

Show loading message on SelectedIndexChanged event of drop down list

I'm trying to show message "Loading..." when a user select an item in the dorp down list.
Mark up:
<asp:Label ID="lbl_LoadingMessage" runat="server" ></asp:Label>
<asp:DropDownList ID="ddl_Chapter" runat="server" AutoPostBack="True">
</asp:DropDownList>
Code behind:
Protected Sub LoadMessage()
lblLoading.Text = "Loading..."
End Sub
Protected Sub ddl_Chapter_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddl_Chapter.SelectedIndexChanged
LoadMessage()
Dim redirectURL As String = "~/chapter.aspx?bid=" & BookId.ToString
Server.Transfer(redirectURL)
End Sub
The method I'm using above is not working. When I select a new item from the drop down list, it works as expected except the message "Loading..." is not showing at all. Any suggestion or code sample? Thank you.
You will have to do this on the client side using javascript.
At the moment, your dropdown menu is causing a postback. when the drop down menu is changed, the page post backs then the entire page life cycle is run through. When the event ddl_Chapter_SelectedIndexChanged is run, you set the text of the loading label, but you never reload the page (which would have your loading message) - instead you server.transfer to a new page.
If you use jQuery, you could set the labels text value as soon as the dropdown is changed
something like:
$('#the_full_renedered_ID_of_ddl_Chapter').change(function () {
$('#the_full_renedered_ID_of_lbl_LoadingMessage').html("Loading...")
});
Or use javascript:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" /></script>
<script type="text/javascript">
$(document).ready( function() {
$("#<%= ddl_Chapter.ClientID %>").change(function()
{
window.alert("Loading");
});
});
</script>
The whole event will execute before the page re-rendering will take place.
If you are going to be doing extra processing between the LoadMessage() and the Server.Transfer try using AJAX UpdateProgress panel and adding your "loading..." message to that and add your dropDownList to a UpdatePanel.
This way depending on what code needs executing in your SelectedIndexChanged event it will show the "loading..." message before it via a partial page postback.
e.g
<asp:ScriptManager id="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress id="UpdateProgress1" runat="server" associatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<p>Loading....</p>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel id="UpdatePanel1" runat="server" childrenAsTriggers="true">
<ContentTemplate>
<asp:DropDownList id="DropDownList1" runat="server" autoPostBack="true">
<asp:ListItem selected="True" value="1">Book 1</asp:ListItem>
<asp:ListItem value="2">Book 2</asp:ListItem>
<asp:ListItem value="3">Book 3</asp:ListItem>
<asp:ListItem value="4">Book 4</asp:ListItem>
<asp:ListItem value="5">Book 5</asp:ListItem>
</asp:DropDownList>
<asp:Label id="lblSelected" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
This way the "loading..." message will be displayed for the duration of the processing of what you are trying to achieve in your SelectedIndexChanged event. If this is simply for display reasons javaScript would be your best bet.

How to not focus when using Ajax Timer Control in asp.net

when i using ajax control but control tick every 1 secound and when i click other control the control not focus in selection my control when timer tick
That particular timer must be placed inside the update panel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
Here's another way to do it:
http://mattberseth.com/blog/2008/05/bug_bash_enablingdisabling_the.html
This is how I approached it (note that the server-side tags for Timer1 and the "txtSymbol" textbox are approached differently):
<asp:Content ID="HeadContent" runat="server" ContentPlaceHolderID="HeadContent">
<link rel="stylesheet" type="text/css" href="/Website1/Styles/lessantique.css" />
<script type="text/javascript">
function pageLoad(sender, args){
// fetch the timer components
var timer = $find('<%= this.Timer1.ClientID %>');
// fetch the INPUT element
var textbox = $get('Content1_txtSymbol');
$addHandler(textbox, 'focus', Function.createDelegate(this, function(){
// disable the Timer so we don't refresh the page
// while the user is entering the data
timer._update(false, timer.get_interval());
}));
$addHandler(textbox, 'blur', Function.createDelegate(this, function(){
// re-enable the Timer
timer._update(true, timer.get_interval());
}));
}
</script>
</asp:Content>
regarding the server side code for the timer listed in the previous response, that approach did not work for me since I have more than one update panel, where the text box is not in the same panel that uses the timer. In that case I followed the advice at http://forums.asp.net/t/1632054.aspx/1, where a new panel is implemented, as such:
<asp:UpdatePanel runat="server" ID="UpdatePanel3" UpdateMode="Conditional" ChildrenAsTriggers="false" >
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Enabled="true"
Interval="2000" OnTick="Timer1_Tick" />
</ContentTemplate>
</asp:UpdatePanel>
Despite the above not producing errors, the results were still unsatisfactory, therefore the client-side approach.

Resources