ConvincingMail - Email Marketing SoftwareConvincingMail
 
Email Marketing Software

Welcome Guest Search | Active Topics | Members | Log In | Register

ConvincingMail Email Marketing Software Forum » Convincing Community Discussions » Tools, Servicies and Controls » autosuggest making problem with focus after postback

autosuggest making problem with focus after postback Options · View
Previous Topic · Next Topic
pega_ns
Posted: Saturday, May 09, 2009 4:48:14 AM
Rank: Newbie
Groups: Member

Joined: 5/8/2009
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
Posted: Monday, May 11, 2009 1:43:29 AM
Rank: Newbie
Groups: Member

Joined: 5/8/2009
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
Posted: Monday, May 11, 2009 4:35:41 AM
Rank: Newbie
Groups: Member

Joined: 5/8/2009
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
Posted: Monday, May 11, 2009 11:20:14 AM
Rank: Administration
Groups: Administration

Joined: 11/18/2007
Posts: 73
Points: 131
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
 
pega_ns
Posted: Monday, May 11, 2009 2:40:03 PM
Rank: Newbie
Groups: Member

Joined: 5/8/2009
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
 
Users browsing this topic
Guest

ConvincingMail Email Marketing Software Forum » Convincing Community Discussions » Tools, Servicies and Controls » autosuggest making problem with focus after postback


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.

Main Forum RSS : RSS

Powered by Yet Another Forum.net version 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.
This page was generated in 0.077 seconds.