scroll position on Ajax's Timer OnTick event - asp.net

Inside the one of contentPlaceHolder of the masterpage I'm using Iframe. And In Iframe suppose, IfrmPage.aspx I'm using update panel where timer control is updating the page for each certain duration.
So, what I'm trying to do is settng the focus on textbox after OnTick event. I'm using following line:
ScriptManager1.SetFocus(this.txtMessage.ClientID);
This works correctly. However, Main page or I should say masterpage's scrollbar changes their position which is annoying.
Please share your valuable experience.
thanks.

Have you tried using MaintainScrollPositionOnPostback on the page declaration of IfrmPage.aspx?

After seaching on the google I found the answer.
Now I'm setting the focus to txtMessage(textbox) using javascript and remove this code:
ScriptManager1.SetFocus(this.txtMessage.ClientID);
final answer is here:
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
if (args.get_panelsUpdated().length > 0) {
$get('txtMessage').focus();
}
}
</script>

Related

ClientScript.RegisterClientScriptBlock not working

I have a popup in my page which I am trying to show on dropdownlist selected index changed event.
Here is register statement
ClientScript.RegisterClientScriptBlock(GetType(),"id", "ShowApplicationPopUp()",true);
Here is my javascript function
function ShowApplicationPopUp() {
$('#NewCustomerMask').show("slow");
$('#NewCustomerApplicationPopUp').show("slow");
}
Both of my divs are initially hidden by using display:none; statement.
The problem is when my dropdownlist is changed the popup is not seen at all.I tried putting an alert statement to check if the function is called , and the alert statement is fired.Any ideas as to what I am doing wrong.
Any suggestions are welcome.
Thanks.
When you use RegisterClientScriptBlock the Javascript code is inserted early in the page, so it will run before the elements are loaded.
Use RegisterStartupScript instead, which places the code at the end of the form.
I too could not get this code to work but thanks to the above I now have working code. Note, I have a linkbutton inside an Ajax Update Panel.
in my code behind aspx.cs page is:
protected void OpenButton_Click(object s, EventArgs e)
{
// open new window
string httpLink = "../newWindow.aspx";
ScriptManager.RegisterStartupScript(this, GetType(), "script", "openWindow('" + httpLink + "');", true);
}
in my apsx page is first the link to jQuery source, then second the JavaScript for the openWindow function:
<script src="../js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
function openWindow(url) {
var w = window.open(url, '', 'width=1000,height=1000,toolbar=0,status=0,location=0,menubar=0,directories=0,resizable=1,scrollbars=1');
w.focus();
}
</script>
and the link that makes it all happen:
<asp:LinkButton Text="Open New Window" ID="LnkBtn" OnClick="OpenButton_Click" runat="server" EnableViewState="False" BorderStyle="None"></asp:LinkButton>
Im not a jQuery expert and must attribute some of this to the following blog:
https://blog.yaplex.com/asp-net/open-new-window-from-code-behind-in-asp-net/

Update pannel not working

Dear all.
I have an update panel and nested repeaters in it. I have image which when i click shows the other nested repeaters data and so on. The rows are shown and hidden using the client script written on code behind.
The Page is working fine , but it refreshes the page every time i click to show data. If i put page in update panel, the page stops showing rows.
How to register the javascript with update panel.
Best Regards
Imran
This is how to register your javascript with the updatePanel: You place your javascript globally, out side UpdatePanel so your libraries loaded, and then using this code you initialized it on every update panel, if needed.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
}
</script>

Scroll to top of page after ASP.Net Ajax Async-Postback without JQuery

I need to scroll to the top of the page after an Async Postback in an update panel. I've tried a couple of methods, and while they all scroll to the top of the page, they all get "overriden" by ASP.Net Ajax which returns the page to where it was when the postback occurs. I have already set MaintainScrollPositionOnPostBack="false" in the Page directive.
Have you tried window.scrollTo(0, 0); ?
If you have, perhaps combine in with setTimeout
window.setTimeout("window.scrollTo(0, 0)", 3000);
Although I expect this might produce some ugly jumping around.
An alternative would be to hook into the EndRequest event handler
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args)
{
window.scrollTo(0, 0);
}

ASP.NET UpdatePanel stopping JQuery from working

I have an update panel on my page with some links that have onClick events that trigger a JQuery box to pop up. This works fine unless an AJAX postback has occurred. I saw some code on another post:
Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1', 'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);
which I have used but it doesn't seem to be working. I keep getting AsyncDone is not defined. Does anyone have any ideas as to what I can do to sort the issue out please?
Details: ASP.NET 2, IIS7
Thanks in advance.
The problem is that when the updatepanel fires, it replaces a chunk of html in the dom, which means it replaces the elements that you have bound the click event to.
To bypass this look at jquery .live() or .delegate() which keeps looking for events matching the selector you provide, or if you want to bind to content every time the update panel refreshes content look that the jQuery updatepanel plug-in.
I sorted this by not using the document.ready in jQuery. Instead I used:
function pageLoad(sender, args) { //code }
I haven't seen any adverse effects yet so hopefully this will sort my issue.
I used update panel just only to stop the whole page refresh in asp.net which even included the jquery.But after using the update panel somewhat the problem was solved but created another problem. jquery script was not working inside the updatepanel.
This issue is now solved.
Example: In case of jquery Date picker, Usual call of Jquery script appears like this :
<script type="text/javascript">
$(function() {
$("#datepickers").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
});
</script>
Even I had used the same code as
Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1',
'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);
Solution Appears here: http://kopila.com.np/
But it didnt worked for me.Later I came to know that The jquery script wont work after partial postback i.e.our ajax request.If we try to call any JQuery script inside the update panel do whatever script wont work after the first ajax request.
Example: When you are using asp.net update panel call it again as follows:
<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$("#datepickers").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
}
}
</script>
For More Details Go to: http://kopila.com.np

AutoPostback with TextBox loses focus

A TextBox is set to AutoPostback as changing the value should cause a number of (display-only) fields to be recalculated and displayed.
That works fine.
However, when the field is tabbed out of, the focus briefly moves on to the next field, then disappears when the page is redrawn so there is no focus anywhere.
I want the focus to be on the new field, not the textbox I've just changed.
Is there a way to work out which field had the focus and force it to have it again when the page is redrawn?
This is "by design". If you are using ASP.NET 2.0+ you can try calling the Focus method of your TextBox once the postback occurs (preferably in the TextChanged event of the TextBox).
I am not sure if there is any built-in way to track focus but I found this article in CodeProject which should do the trick.
You could also consider refresh display-only fields using AJAX UpdatePanel. This way you won't lose focus from the new field.
Also I have proposed pure server-side solution based on WebControl.Controls.TabIndex analysis, you can use it, if you like.
This is what is happening:
1) TAB on a field - client event
2) Focus on next field - client event
3) Postback - server event
4) Page redrawn - client event new page overrides preious client events
The solution of your problem is to:
a) get the element that has gained focus BEFORE postback
<script>
var idSelected;
$("input").focusin(function () {
idSelected = this.id;
});
</script>
b) store the ClientID (actually in var idSelected) somewhere (i.e. an hidden Textbox, vith ViewState = true) BEFORE postback
** b) get ClientID ** (extract from hidden TextBox and put it in var idSelected) AFTER postback
d) get the element with ClientID and set focus AFTER postback
<script>
$(document).ready(function () {
if (idSelected != null) {
$("#" + idSelected).focus();
idSelected = null;
});
});
</script>
Note: this sample scripts use JQuery.
Remember to put Jquery.js in your solution and a reference in your page
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<asp:ScriptManager runat="server" >
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery.js" ScriptMode="Auto" />
....
Note2: this solution works without AJAX.
Look at this answer: to make Javascript work over Ajax you must use code like this:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function EndRequestHandler(sender, args)
{
MyScript();
}
</script>

Resources