Focus in Textbox when the page is Loaded through Ajax

**acoder** · Feb 26 '07, 07:13 PM

If you are using Ajax, use the onreadystatecha nge event handler. Once the value is 4, you can call a function which deals with the response so include the focus code in that function.

**webhead** · May 11 '07, 07:54 PM

I'm having the same problem but tried doing the focus in the function and it still doesn't work. Here's my javascript:

Code:

function doStuff() {
	recn=document.getElementById('recno').value;
	str = "moreStuff.php?recn="+recn;
	http.open("GET", str, true);
	http.onreadystatechange = handleHttpResponse;
	http.send(null);
	recno.focus();
	}

Is this the wrong place to call for focus, or do I have the call syntax wrong?

**pbmods** · May 11 '07, 11:56 PM

Originally posted by webhead

Is this the wrong place to call for focus, or do I have the call syntax wrong?

The first 'A' in AJAX stands for 'Asynchronous'. In other words, handleHttpRespo nse won't get executed until your AJAX request returns. However, your script will continue to evaluate code until the request returns.

So when you put recno.focus() inside of doStuff:

Originally posted by webhead

Code:

	http.send(null);
	recno.focus();
	}

recno.focus() gets evaluated immediately after http.send gets executed, regardless of whether or (more likely) not the http request has returned.

What you want to do instead is to include recno.focus() inside of handleHttpRespo nse, so that it doesn't get called until your AJAX call returns.

[EDIT:
E.g.:

Code:

function handleHttpResponse(response) {
	.
	.
	.
	//	recno is a global variable, right?
	recno.focus();
}

]

**webhead** · May 12 '07, 12:55 AM

Originally posted by pbmods

The first 'A' in AJAX stands for 'Asynchronous'. In other words, handleHttpRespo nse won't get executed until your AJAX request returns. However, your script will continue to evaluate code until the request returns.

So when you put recno.focus() inside of doStuff:

recno.focus() gets evaluated immediately after http.send gets executed, regardless of whether or (more likely) not the http request has returned.

What you want to do instead is to include recno.focus() inside of handleHttpRespo nse, so that it doesn't get called until your AJAX call returns.

[EDIT:
E.g.:

Code:

function handleHttpResponse(response) {
	.
	.
	.
	//	recno is a global variable, right?
	recno.focus();
}

]

Hi, thanks for your help. But the problem is I have the handleHttpRespo nse code being called by many functions and only want the focus executed in one of them.

Recno is a field in a form, with different fuctions being called depending on which buttons the user clicks.

Basically, I have an accounts receivable app that includes searches by various fields, and when a particular set of records is chosen I have controls for fwd/back and go directly to a record in the set. It's that "goto" box containing the current record number (recno) that I'd like to focus, but only if a search is being done. They can type directly into the box to choose a record. Sorry I can't put it online right now because I wouldn't want some of it available to the public. But there's an identical (exept for no AJAX) search at This Link .

**pbmods** · May 12 '07, 01:53 AM

Originally posted by webhead

But the problem is I have the handleHttpRespo nse code being called by many functions and only want the focus executed in one of them.

You could use a different callback for each AJAX call.

E.g.,

Code:

function initAjax(url, callback) {
	http.open("GET", url, true);
	http.onreadystatechange = callback;
	http.send(null);
}

function doStuff() {
	var recno = document.getElementById('recno');
	
	initAjax("moreStuff.php?recno=" + recno.value, function(response) {
		.
		.
		.
		recno.focus();
	});
}

When initAjax gets called, you create an anonymous function that, (presumably) among other things, calls recno.focus(), and thanks to JavaScript's magical scope implementation, anything declared in doStuff is available to your callback function.

If you wanted to make another AJAX call, but you wanted to do other stuff when the request returned, you'd do this:

Code:

function doOtherStuff() {
	initAjax('yetMoreStuff.php?you=get&the=idea', function(response) {
		.
		.
		.
	});
}

[EDIT: Recno. What a great name. Come here, Recno! Here, boy! That's a GOOD boy, Recno! Who wants a treat? Does Recno want a treat? Awww what a cute widdle puppy!]

**webhead** · May 12 '07, 02:03 AM

Originally posted by pbmods

You could use a different callback for each AJAX call.

E.g.,

Code:

function initAjax(url, callback) {
	http.open("GET", url, true);
	http.onreadystatechange = callback;
	http.send(null);
}

function doStuff() {
	var recno = document.getElementById('recno');
	
	initAjax("moreStuff.php?recno=" + recno.value, function(response) {
		.
		.
		.
		recno.focus();
	});
}

When initAjax gets called, you create an anonymous function that, (presumably) among other things, calls recno.focus(), and thanks to JavaScript's magical scope implementation, anything declared in doStuff is available to your callback function.

If you wanted to make another AJAX call, but you wanted to do other stuff when the request returned, you'd do this:

Code:

function doOtherStuff() {
	initAjax('yetMoreStuff.php?you=get&the=idea', function(response) {
		.
		.
		.
	});
}

[EDIT: Recno. What a great name. Come here, Recno! Here, boy! That's a GOOD boy, Recno! Who wants a treat? Does Recno want a treat? Awww what a cute widdle puppy!]

Heck, I though it sounded more like an auto parts store ;-)

Anyway, getting late and I'll see if I can try that tomorrow. Thanks!

**webhead** · May 12 '07, 12:00 PM

I must have something messed up, because now the page won't work at all (shows blank). Here's what I've got:

Code:

function initAjax(url, callback) {
	http.open("GET", url, true);
	http.onreadystatechange = callback;
	http.send(null);
	}

function doStuff() {
	recn=document.getElementById('recno').value;
	initAjax("moreStuff.php?recn="+recn, function(response) {
		http.open("GET", str, true);
		http.onreadystatechange = handleHttpResponse;
		http.send(null);
		recno.focus();
		});
	}

Was I supposed to put something else where you have "function(respo nse)"? Not sure what should go there.

**webhead** · May 12 '07, 12:23 PM

Worked on it some and have this now:

Code:

function initAjax(url, callback) {
	http.open("GET", url, true);
	http.onreadystatechange = callback;
	http.send(null);
	}
function doStuff() {
	recn=document.getElementById('recno').value;
	initAjax("moreStuff.php?recn="+recn, function response(){
		http.open("GET", str, true);
		http.onreadystatechange = handleHttpResponse;
		http.send(null);
		recno.focus();
		});
	}

But now it won't let me change the record number in the box at all, and still doesn't focus.

**pbmods** · May 12 '07, 04:28 PM

Code:

function initAjax(url, callback) {
	http.open("GET", url, true);
	http.onreadystatechange = callback;
	http.send(null);
	}
function doStuff() {
	recn=document.getElementById('recno').value;
	initAjax("moreStuff.php?recn="+recn, function response() {
		recno.focus();
		});
	}

Callback is what initAjax executes when http.onreadysta techange fires, so the anonymous function should only contain what you want to do when your Ajax call returns.

Looking at the code (I've got my AJAX calls so deeply encapsulated, I've forgotten what a basic xmlHttpRequest call looks like), I think the problem is that http is a global variable. You need to create a local variable inside initAjax and create a new xmlHttpRequest instance.

Code:

function initAjax(url, callback) {
	var http = new XMLHttpRequest();
	http.open("GET", url, true);
	http.onreadystatechange = callback;
	http.send(null);
}

Otherwise, every time you call initAjax, http gets destroyed and re-assigned a new request.

**webhead** · May 12 '07, 06:17 PM

Houston, we have focus!

Thanks!

But...

I had it so clicking in the recno box would actually go and find the record. That's what the url pointed to, the Find code. But it doesn't execute the code, just does the focus.

**webhead** · May 12 '07, 06:29 PM

It's looking like the old game of whack-a-mole: I can either get focus or find a record, but as soon as one thing works the other doesn't.

**pbmods** · May 12 '07, 08:25 PM

Originally posted by webhead

I had it so clicking in the recno box would actually go and find the record. That's what the url pointed to, the Find code. But it doesn't execute the code, just does the focus.

Let's have a look at the code.

**webhead** · May 12 '07, 08:59 PM

Here it is:

Code:

/* moreStuff.php */

<?php 
...
$button = $_GET['button']; 
$recn = $_GET['recn'];
...
// FIND SPECIFIC RECORD FROM GOTO BOX
if ($button=="goto") {
	...
	 // find record and track which page we're on
	}
...
?>

<!--  DISPLAY FORM  -->
...
	<img src='icons/goto.png' onClick='getGoto()'>
	<input name='recno' type='text' id='recno' value='<?php echo $page; ?>' size='4'> 
...


/* moreStuff.js */

function handleHttpResponse() {
	if (http.readyState == 4) {
		document.getElementById(theOutput).innerHTML = http.responseText;
		}
	}

function getHTTPObject() {
	var xmlhttp;
	/*@cc_on
	@if (@_jscript_version >= 5)
		try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } 
		catch (e) {
			try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } 
	catch (E) { xmlhttp = false; }
			}
	@else
		xmlhttp = false;
		@end @*/
		if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
			try { xmlhttp = new XMLHttpRequest(); } 
			catch (e) { xmlhttp = false; }
			}
		return xmlhttp;
	}

var http = getHTTPObject(); 

theOutput = 'formbox';
...

function initAjax(url, callback) {
	var http = new XMLHttpRequest();
	http.open("GET", url, true);
	http.onreadystatechange = callback;
	http.send(null);
	}
function getGoto() {
	recn=document.getElementById('recno').value;
	initAjax("moreStuff.php?button=goto&recn="+recn, function response(){
		recno.focus(); 
		});
	}

**pbmods** · May 12 '07, 11:10 PM

Couple of things to change:

Code:

//var http = getHTTPObject(); 
.
.
.
function initAjax(url, callback) {
	var http = getHTTPObject();
.
.
.
	}

function getGoto() {
.
.
.
	initAjax("moreStuff.php?button=goto&recn="+recn, function (response) {
.
.
.
	}

Since you might be making multiple AJAX calls concurrently, you don't want http to be a global. Instead, let initAjax create a new (local) http variable and send the request; that way, even if the first http hasn't returned yet, you can still call initAjax and init another request.

As far as the callback syntax goes, you're creating what's called an anonymous function, so therefore it doesn't have a name.

Code:

function name(args) {implementation}

is actually a synonym for

Code:

name = new Function(args, implementation);

The 'response' in the callback function is an argument that stores the returned object from your Ajax call. XMLHttpRequest does this by default. You could remove 'response' entirely from your anonymous function, if you wanted, though I like to keep it just so that there's that much less work to do if I decide I need to process the response from the server.

This would work equally as well, though:

Code:

initAjax("...", function () {
});

Focus in Textbox when the page is Loaded through Ajax

Focus in Textbox when the page is Loaded through Ajax

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment