views:

27

answers:

1

I have a simple page where I want to filter a ListBox based upon a value(s) in a textbox - both are in an UpdatePanel.
This works correctly, however, after the postback the textbox had lost focus...so I set focus back in the page_load. Then I noticed that the cursor was now at the beginning of the text when I want it at the end so the user can carry on typing, so I added an onfocus(...) attribute to the textbox to set the value back to itself (see code below).

This works the first two times, but then it stops setting focus to the textbox?

Markup

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListTest.aspx.cs" Inherits="SalesForceTest.ListTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox runat="server" ID="filter" AutoPostBack="true" onkeyup="__doPostBack(this.id, this.value)" onfocus="this.value = this.value;"  />
                <br />
                <asp:ListBox ID="AccountList" runat="server" Width="185px"></asp:ListBox>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Codebehind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;

namespace SalesForceTest
{
    public partial class ListTest : System.Web.UI.Page
    {
        List<string> allAccounts = new List<string> { "2342", "3434", "2332", "3224", "7899", "8797", "3435" };

        protected void Page_Load(object sender, EventArgs e)
        {
            AccountList.Items.Clear();
            allAccounts.Where(ac => ac.StartsWith(filter.Text)).ToList().ForEach(a => AccountList.Items.Add(a));

            if (Page.IsPostBack)
            {
                if (Request.Form["__EVENTTARGET"] == filter.ID)
                {
                    ScriptManager1.SetFocus(filter);
                }
            }
        }
    }
}

Any help VERY gratefully received :)

A: 

You need to set the cursor/caret position at the end of text using java-script. Use below js function for the setting cursor position:

function setCaretTo(obj, pos) { 
    if(obj.createTextRange) { 
        /* Create a TextRange, set the internal pointer to
           a specified position and show the cursor at this
           position
        */ 
        var range = obj.createTextRange(); 
        range.move("character", pos); 
        range.select(); 
    } else if(obj.selectionStart) { 
        /* Gecko is a little bit shorter on that. Simply
           focus the element and set the selection to a
           specified position
        */ 
        obj.focus(); 
        obj.setSelectionRange(pos, pos); 
    } 
} 

source for above code: http://parentnode.org/javascript/working-with-the-cursor-position/

Now, what you need is ref to your client-side textbox object (document.getElementById) and text length (textbox.value.length). Call the function in the start-up script (registered via ScriptManager.RegisterStartupScript) method.

VinayC
Hmm...I must be missing something!This works for the first two callbacks, just as before, but then stops working?If I move controls outside update panel, then it keeps working all the time. Put them back in UpdatePanel and it works twice then stops????
BlueChippy
My suspicion is on line "if (Request.Form["__EVENTTARGET"] == filter.ID)" - perhaps you can debug and check if code for setting focus gets executed or not.
VinayC
That appears to be being hit every time...its the "set focus" thats not happening. So the postback loses focus from the control and the call to set it back...doesn't.
BlueChippy
I took the TextBox out of the UpdatePanel, but left the ListBox in there...and it now works? Any idea why the update panel is "blocking" the Focus()?
BlueChippy
No idea but googling indicates few folks complaining about ScriptManager.SetFocus not working. Perhaps, you can try registering equivalent script (using ScriptManager.RegisterStartupScript) i.e. document.getElementById(<put filter.ClientID here>).focus();
VinayC