We Keep Coding

how to set focus to a specific section when the page loads and make the browser scroll to that position

I am working with aps.net and vb.net
In my application after submitting the web form (application.aspx) users are redirected into another (application_complete.aspx) page .
The webform in application.aspx page is very long. and user has to scroll down a lot to complete the form and submit. Problem is after submitting the the form (appplication.aspx) the application_complete.aspx page also becomes very long (same size as the application.aspx) although there is not much content in it and makes the browser automatically position at same place (bottom of the page). Therefore user has to scroll up to read the message. which is very irritating for the users. (see picures)
picture1 : (appplication.aspx)
picture2: application_complete.aspx
What I require
I want to make the page (application_complete.aspx) position at the top of the page when it loads and set focus at the message section of that page.
This is my application_complete.aspx page code
<%# Page Title="" Language="VB" MasterPageFile="~/c/MasterPage.master" AutoEventWireup="false" CodeFile="application-complete.aspx.vb" Inherits="c_application_complete" %>
<%# MasterType VirtualPath="~/c/MasterPage.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" Runat="Server">
<h2>Thank you! we have now received your application</h2>
<div class="btn-wrapper">
<a target="_parent" href="<%= Master.EmployerCareersHome %>" class="btn v-view-all">View other open positions</a>
</div>
</asp:Content>
and this is my application_complete.aspx.vb code
Partial Class c_application_complete
Inherits System.Web.UI.Page
End Class
I have tried adding the following script in application_complete.aspx page and by giving a id to the div section.
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript">
$(document).ready(function() {
$("#<%= dvbtn.ClientID %>").focus();
});
</script>
</asp:Content>
and in application_complete.aspx.vb page.
Protected Sub PageLoad(ByVal sender As Object, ByVal e As EventArgs)
Page.SetFocus(dvbtn)
End Sub
but thats not working.
For your information
the whole webform and its all functionality is in a iframe .is it possible to make parent web page scroll to a specific position (at the top) from an iframe.
Though there is not much content in application_complete page still because of long form (in application.aspx page) this page(application_complete) also becomes long.and if someone refreshes it then the page gets back to its original size and focuses on the top position. but refreshing causes the re submission of the form so can't do that.
Looking forward to your help.

In you page put an anchor something like:
<a name="loadtohere" />
Then in your redirect, send the page to:
page.aspx#loadtohere
EDIT:
OK, in your source code file add the html from above:
<a name="loadtohere" />
Then in your code behind:
// Create the redirect link (better way of creating your string)
Dim redirect = String.Format("application-complete.aspx?e={0}&b={1}&i={2}&hp={3}&hI={4}#loadtohere, Vacancy.EmployerID, CInt(Request("b")), Vacancy.ID, Request("hp"), Request("hI"))
// Redirect to the page
Response.Redirect(redirect)
The "loadtohere" text can be changed to whatever you want, it is just the name of the anchor to move the page to when it loads.

The reason that my element wasn't receiving focus was because it is a <div> and not an actual <button> element. <div> elements by default aren't picked up as part of the tab order so they don't generally receive focus at all.
So i solved the focusing problem by adding a tabindex attribute to my div element.
<div class="btn-wrapper" id="dvbtn" runat="server" tabindex="0" autofocus>
<a target="_parent" href="<%= Master.EmployerCareersHome %>" class="btn v-view-all">View other open positions</a>
</div>
and with the script
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript">
$(document).ready(function() {
$("#<%= dvbtn.ClientID %>").focus();
});
</script>
</asp:Content>
setfocus also solved the problem of scrolling.

jqGrid : open a customised form on click of 'Edit' button and after edit refresh that row

I need to open a customized form on click of 'Edit' button which is present on each row of jqGird. Here I know that, I have to open this form on event called 'OnEdit'. To a customized form I will pass information of selected row so that I can edit my information and then I will click on 'Save' button present on my form.
On click of 'Save' button following things should be happened :
1. All modified data will get inserted in database.
2 Selected row should be updated with modified value.
Please tell me how I can do this. Also let me know your suggestions.
Note : I am using ASP .Net MVC website.
Thank You

Basic points:
1) You open/close the gridview and the edit form with Panel
2) You use the OnRowCommand to trigger the edit
3) You have other buttons inside the form to trigger the save/cancel/close
and here is the basic code:
<asp:Panel id="pnlViewList" runat="server">
<asp:GridView ID="gvMyList" OnRowCommand="RowCommand" DataKeyNames="UserId" ..........>
<Columns>
<asp:ButtonField Text="Edit" CommandName="EditMe" />
........rest of your fields.........
</Columns>
</asp:GridView>
</asp:Panel>
<asp:Panel id="pnlEdit" runat="server">
<h2>form edit</h2>
Name : <asp:textbox id="txtName" runat="server" />
........rest of your form.........
</asp:Panel>
and on code behind you capture the edit from the grid view.
protected void RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "EditMe")
{
int iTheIndexNow;
if (int.TryParse(e.CommandArgument.ToString(), out iTheIndexNow))
{
gvMyList.SelectedIndex = iTheIndexNow;
// close the gridview, open the form
pnlEdit.Visible = true;
pnlViewList.Visible = false;
// load the form for editing
LoadLineForEditing(gvMyList.SelectedValue.ToString());
}
}
}

Update panel in IE 10

I have create a sample program in Asp.net which updates time on a button click. This time is shown in a label. Button and and label both are inside update panel say upd1.
Following is the aspx code
<script type="text/javascript" >
function fnhn() {
__doPostBack("upd1","");
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="ScriptManager1" runat="server" EnablePageMethods ="true" > </asp:ScriptManager>
<div>
<asp:UpdatePanel ID="upd1" runat ="server" ><ContentTemplate >
<asp:label runat="server" id="lbl_c" ></asp:label>
<asp:button runat="server" id="btn_b" Text="Click" />
</ContentTemplate>
</asp:updatepanel>
</div>
</form>
</body>
and following is the source code.
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
lbl_c.Text = Date.Now.ToString
End Sub
End Class
Now problem which i facing is as follows. I am able to update this time on button click without any postback in any browser other than IE 10. In IE10 my whole page gets refresh. which I obviously dont want to happen. Plz help me guys.
In a thread I also come to know about up leveling the user agent of IE10 through following.
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
If Request.UserAgent.ToLower.ToString.Contains("msie 10.0") Then
Page.ClientTarget = "uplevel"
End If
End Sub
Which didnt help me to come out of this issue.
Any comment suggestion and solution is valuable.

Can you check if your IE10 is allowing cookies? If you disabled cookies at some point the session would not be working (if cookie based) and therefore the AJAX would cause a full postback.

Have you tried adding the EnablePartialRendering? This should be the default, but may be overridden elsewhere.
<asp:ScriptManager id="ScriptManager1" runat="server"
EnablePageMethods="true" EnablePartialRendering="true" />

Populate a TextBox from a DropDownList selection ASP.NET/Javascript

I have a DDL and ASP.NET Textbox. I would like to populate the text box with the option I choose from the DDL. I need this to be instant and not use postbacks so it would seem JavaScript would be the obvious choice here. I have done quite a bit of searching but everything I have found seems to be for standard HTML (Selects and Inputs) and these do not appear to work with ASP objects:
<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" DataTextField="FullName" />
<asp:TextBox runat="server" id="txtSalesPerson" />
My DDL is populated from SQL in the code-behind page.
Can somebody assist with the appropriate code I should use? Thanks.

ASP.Net controls render as standard HTML elements on the browser. In script, you can get a reference to them by using the ClientID property of the ASP.Net control.
Put this in a script block in your aspx:
var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');
Now you have references to the DOM objects for the select and input elements that the ASP.Net controls rendered and you can use the techniques you've already learned on the HTML elements.
Additional info
You need to add an onchange attribute to your DropDownList control as such:
<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" onchange="ddlChange();" DataTextField="FullName" />
and then put this script block in your aspx
<script type="text/javascript">
function ddlChange()
{
var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');
textBox.value = ddl.options[ddl.selectedIndex].text;
}
</script>
As you change the dropdown list, you'll see the textbox update. Tested in IE and Chrome.

Since you've pointed out that you're a JavaScript beginner, may i suggest you use an updatepanel control. An updatepanel allows you to execute server code without refreshing the page. Simply place the dropdownList and the textbox in the same updatepanel or in two separate updatepanels and write the code for the textbox to update based on the dropdownlist selection. Make sure to set the dropdownlist to do autopostback.
The asp markup is as follows:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlList" runat="server"
AutoPostBack="True">
<asp:ListItem>-select-</asp:ListItem>
<asp:ListItem>option 1</asp:ListItem>
<asp:ListItem>option 2</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtTextBox" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
The codebehind in vb is as follows:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If ddlList.Text <> "-select-" then
txtTextBox.Text = ddlList.text
End If
End Sub

If you're new to JavaScript, use the jQuery library (simply provide references to the CDN-hosted jQUery files at google.com) and then you can use the following code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$("#DDLSalesPerson").change(function () {
$("#txtSalesPerson").val($(this).val());
});
</script>

Set always Focus on Textbox (ASP.NET, Updatepanel)

Hey,
Before I start to write my problem, I will excuse for my bad English and I hope you can understand me.
I have in a ASP.NET Webapplication an AJAX Updatepanel. In this Updatepanel is a
Textbox for dynamic search results. When I start to write in the Textbox, the results comes like Google suggest.
Now, the focus must be always on the Textbox (inputn field), now metter whereto the User clicks.
Currently the ASP.NET updatepanel refreshed after a few seconds when the User starts to type.
Thanks for help :-)

there is an event when updatepanel finish updated html dom
Sys.WebForms.PageRequestManager.getInstance().add_endRequest
try this
function EndRequestHandler() {
//get focus on the textbox
myTextbox.focus(); }
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

That is pretty fun but here is a possible solution. The idea is: if user gets out of the textbox (onblur), then take him back to the textbox (focusOnTxt function):
<head runat="server">
<title></title>
<script type="text/javascript">
function focusOnTxt(sender) {
sender.focus();
sender.value = sender.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upnl" runat="server">
<ContentTemplate>
<asp:TextBox ID="txt" runat="server"
onblur="focusOnTxt(this)"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
And on Page_Load:
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
txt.Focus();
}
}

A simple SetFocus f.e. in Page.Load should work:
ScriptManager1.SetFocus (TextBox1.ClientID)
UPDATE: according to this post following works...
Add this script into a script block in your page's head:
function SetEnd(TB){
if (TB.createTextRange){
var FieldRange = TB.createTextRange();
FieldRange.moveStart('character', TB.value.length);
FieldRange.collapse();
FieldRange.select();
}
}
Then add the onfocus event to your Textbox:
onfocus="SetEnd(this)"
In your codebehind's Page.Load or TextChanged-Event handler add the standard SetFocus call:
ScriptManager sm = ScriptManager.GetCurrent(this);
sm.SetFocus(myTextBox)