ConvincingMail - Email Marketing SoftwareConvincingMail
 
Email Marketing Software

Welcome Guest! To enable all features please try to register or login.
autosuggest making problem with focus after postback
Options
Previous Topic Next Topic
pega_ns
#1 Posted : Friday, May 08, 2009 11:48:14 PM(UTC)
Rank: Newbie

Groups: Member
Joined: 5/8/2009(UTC)
Posts: 4
Points: 12
I have a problem with focus after postbacks on the page, when there is autosuggest on the page.
I use __doPostBack() function from javascript and use focus() from javascript to focus on the next control on the page. But after 2 postbacks that doesn't work. The whole form seems to have lost focus. I use javascript function to change focus between controls using enter, and it doesn't work after 2 postbacks.
I'm using Visual Studio 2008, ASP .NET 3.5 AJAX Application and autosuggest version 2.2
Here is the code of the small project i made to demonstrate that problem:
Default.aspx
Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FixFocusTest._Default" %>
<%@ Register assembly="ConvincingMail.AdvancedAutoSuggest" namespace="ConvincingMail.AdvancedAutoSuggest" tagprefix="cc3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>FixFocus Test Page 1</title>
    <script src="prototype-1.6.0.2.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        //focus na Enter
        function focusNext(field, event) {
            var mainForm = document.forms[0];
            if (event.keyCode == 13 && event.shiftKey == false) {
                for (i = 0; i < mainForm.elements.length; i++)
                    if ((mainForm.elements[i].tabIndex >= field.tabIndex + 1)
                        && (isVisibleOrDisabled(mainForm.elements[i]) == false)
                        && (isRequiredControl(mainForm.elements[i]) != false)) {
                    mainForm.elements[i].focus();
                    if (mainForm.elements[i].type == "text")
                        mainForm.elements[i].select();
                    break;
                }
                return false;
            }

            if (event.keyCode == 13 && event.shiftKey == true) {
                for (i = mainForm.elements.length - 1; i >= 0; i--) {
                    if (mainForm.elements[i].tabIndex <= field.tabIndex - 1
                        && (isVisibleOrDisabled(mainForm.elements[i]) == false)
                        && (isRequiredControl(mainForm.elements[i]) != false)
                        && (mainForm.elements[i].tabIndex != 0)) {

                        mainForm.elements[i].focus();
                        if (mainForm.elements[i].type == "text")
                            mainForm.elements[i].select();
                        break;
                    }
                }
            }

            return true;
        }

        function isVisibleOrDisabled(field) {
            if (field.style.display == "none" || field.style.visibility == "hidden" || field.disabled == true)
                return true;
            else
                return false;
        }

        function isRequiredControl(ctl) {
            //if ((ctl.type == "text") || (ctl.type == "select-one"))
            if (ctl.type != "hidden")
                return true;
            else
                return false;
        }
        ////////kraj focusNext

        function txtChanged(tBox, evt) {
            if (tBox.value != '')
                __doPostBack(tBox.id, '');

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        Text1: <asp:TextBox ID="TextBox1" runat="server" TabIndex="1"
                ontextchanged="TextBox1_TextChanged"></asp:TextBox>
        <br />
        Text2: <asp:TextBox ID="TextBox2" runat="server" TabIndex="2"
                ontextchanged="TextBox2_TextChanged"></asp:TextBox>
        <br />
        Text3: <asp:TextBox ID="TextBox3" runat="server" TabIndex="3"
                ontextchanged="TextBox3_TextChanged"></asp:TextBox>
        <br />
        Text 4: <asp:TextBox ID="TextBox4" runat="server" TabIndex="4" ></asp:TextBox>
        <br />
        ASG: <asp:TextBox ID="TextBox5" runat="server" TabIndex="5" ></asp:TextBox>
            <cc3:AdvancedAutoSuggestExtender ID="asgEsercizio" runat="server" TargetControlID="TextBox5"
            ServiceUrl="~/WebService1.asmx/GetEsercizio" UpdateField="hf1" ></cc3:AdvancedAutoSuggestExtender>
            <asp:HiddenField ID="hf1" runat="server" />
           
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>



Default.aspx.cs
Code:

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

namespace FixFocusTest
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager.GetCurrent(Page).Scripts.Add(new ScriptReference("FixFocus.js"));
            if (!Page.IsPostBack)
            {
                TextBox1.Attributes.Add("onkeypress", "focusNext(this, event)");
                TextBox2.Attributes.Add("onkeypress", "focusNext(this, event)");
                TextBox3.Attributes.Add("onkeypress", "focusNext(this, event)");
                TextBox4.Attributes.Add("onkeypress", "focusNext(this, event)");
                TextBox5.Attributes.Add("onkeypress", "focusNext(this, event)");

                TextBox1.Attributes.Add("onchange", "txtChanged(this,event)");
                TextBox2.Attributes.Add("onchange", "txtChanged(this,event)");
                TextBox3.Attributes.Add("onchange", "txtChanged(this,event)");

            }
        }

        protected void TextBox1_TextChanged(object sender, EventArgs e)
        {
            string s = "";
        }

        protected void TextBox2_TextChanged(object sender, EventArgs e)
        {
            string s = "";
        }

        protected void TextBox3_TextChanged(object sender, EventArgs e)
        {
            string s = "";
        }
    }
}



Notice that when i remove autosuggest from the page everything works perfectly.
If anyone wants the entire project i can mail them.
Back to top
pega_ns
#2 Posted : Sunday, May 10, 2009 8:43:29 PM(UTC)
Rank: Newbie

Groups: Member
Joined: 5/8/2009(UTC)
Posts: 4
Points: 12
I forgot to include FixFocus.js, here is the code:

Code:

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;
        }

        try {
            targetControl.focus();
        }
        catch (err) {
        }
       
        if (focusTarget) {
            focusTarget.contentEditable = oldContentEditableSetting;
        }
    }
    else {
        try {
            targetControl.focus();
        }
        catch (err) {
        }
    }
}

function pageLoadedHandler(sender, args) {
    if (typeof (lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
        var newFocused = $get(lastFocusedControlId);
        if (newFocused) {
            focusControl(newFocused);
        }
    }
}

Sys.Application.add_init(appInit);
Back to top
pega_ns
#3 Posted : Sunday, May 10, 2009 11:35:41 PM(UTC)
Rank: Newbie

Groups: Member
Joined: 5/8/2009(UTC)
Posts: 4
Points: 12
I think i found a problem.
in AdvancedAutoSuggestBehavior.js:

Code:

if (!this.suggestionsDiv) {
        this.suggestionsDiv = Element.extend(document.createElement('div'));
        this.suggestionsDiv.id = this.suggestionsDivId;
        Element.extend(this.suggestionsDiv);
        this.suggestionsDiv.style.display = 'none';
        this.suggestionsDiv.style.position = 'absolute';
        $$('body')[0].appendChild(this.suggestionsDiv);
    }


When i remove this part: $$('body')[0].appendChild(this.suggestionsDiv); , my example works. But i have no suggestionDiv on the page then :).
Is it possible to ad suggestion div some other way.

P.S. I forgot to mention that the problem was on Internet Explorer(6,7). Everything worked well on Firefox, but i need it to work on IE :).
Back to top
trooper
#4 Posted : Monday, May 11, 2009 6:20:14 AM(UTC)
Rank: Administration

Groups: Administration
Joined: 11/18/2007(UTC)
Posts: 92
Points: 188
Man

Was thanked: 2 time(s) in 2 post(s)
Hi,
can you give me an url where I can look at it online?

you can try to put this html right after the body tag
<div style="display: none; position: absolute; overflow: scroll; height:400px;" id="suggestionsDiv"></div>

please tell me if it helped.

Thanks
Mikhail
Back to top
WWW
pega_ns
#5 Posted : Monday, May 11, 2009 9:40:03 AM(UTC)
Rank: Newbie

Groups: Member
Joined: 5/8/2009(UTC)
Posts: 4
Points: 12
Yes that helped.
I've also tried this:
Replaced:
Code:

$$('body')[0].appendChild(this.suggestionsDiv);


with:
Code:

document.forms[0].appendChild(this.suggestionsDiv);


and it worked.

Thanks again, keep up the good work.
Back to top
Rss Feed  Atom Feed
Users browsing this topic
Guest (2)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

YAFVision Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.5 RC1 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.096 seconds.