• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 509
  • Last Modified:

Javascript and Ajax Updatepanel Postbacks

Hello experts!

Here is the code that is causing me trouble.

function check() {
                  document.getElementById("InputBoxTypeText").focus();
        }

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(check);

Open in new window


My understanding of this is that after a postback, it should set the focus to the text input, however this does not appear to work.  In order to debug, I added an alert() to the javascript:

function check() {
                  alert("test");
                  document.getElementById("InputBoxTypeText").focus();
        }

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(check);

Open in new window


When I run this, the alert comes up and then the focus is set correctly.

Any ideas?  I'm sure i'm missing something fairly obvious...

Thanks,

DT
0
DreadedTuesday
Asked:
DreadedTuesday
  • 5
  • 4
1 Solution
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Call to the check() function probably comes before the InputBoxTypeText element is rendered properly. That explain why it works when add the alert, that delays the call to focus.
Try using the pageLoaded event instead of the endRequest.
0
 
DreadedTuesdayAuthor Commented:
sudaraka,

Thanks for the suggestion; unfortunately I get the same symptoms.

DT
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Is the element InputBoxTypeText on the page and enable when the focus is called? Do you see any JavaScript errors?

Try some thing like below. experiment with the delay to see if delaying the call make it works.
function check() {
                  window.setTimeout(document.getElementById("InputBoxTypeText").focus(), 2000);
        }

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(check);

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
DreadedTuesdayAuthor Commented:
Wow, that seems to do it!  Nicely diagnosed, I had not even considered that.  Looks like my skills are rustier than i thought...
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Glad to hear it worked. But I wouldn't use a delay as a final solution for this as it would still fail in a situation like in a slow internet connection.
You will need to find out an event that make the element focusable and call the check function from there, or make sure the element is focusable when the  pageLoaded or on endRequest events occur.
0
 
DreadedTuesdayAuthor Commented:
Do you have any suggestions?  The text input in question needs to be in focus to accept input from a handheld barcode scanner (it enters data into whatever is in focus at the time).  I have it getting the first one, but when it updates and returns the page it needs to reset the focus so the user doesnt have to manually select the box again.
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Does the page reload after submitting the first one? if so, you can call this code on window.onload or dom ready event.
0
 
DreadedTuesdayAuthor Commented:
the whole page doesnt reload, just the updatepanel.  I have it doign this at the moment:

            var elem = document.getElementById("InputBoxTypeText");
            elem.focus();
            while (elem != document.activeElement) {
                elem = document.getElementById("InputBoxTypeText");
                elem.focus();
            }

Open in new window

0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Nice workaround!
Thanks for the points.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now