Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

Focus in Textbox when the page is Loaded through Ajax

Newbie
  
Join Date: Feb 2007
Posts: 14
#1: Feb 25 '07
Hi,

This is ram.

I am developing a page(usereg.jsp) with two textboxes one for username and another for email. Since i am using this page in main.jsp using Ajax, I am removing the body part in usereg.jsp.

Now i need to focus the cursor in first textbox of usereg.jsp. Since there is no body tag in this jsp i cannot call onload="document.formname.textboxname.focus()".

But i need the focus in textbox when i call this page in main.jsp.

Even i have tried to focus the texbox in usereg.jsp by writing the seperate java script in this page. When i execute just this page(usereg.jsp) the problem of focusing text box is solved,,

But when i call this page in main.jsp along with the java script i wrote, the focus is not reflecting.

Please suggest me where am i going wrong..

my mailid is: ****
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Feb 26 '07

re: Focus in Textbox when the page is Loaded through Ajax

If you are using Ajax, use the onreadystatechange 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.
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#3: May 11 '07

re: Focus in Textbox when the page is Loaded through Ajax

I'm having the same problem but tried doing the focus in the function and it still doesn't work. Here's my javascript:
Expand|Select|Wrap|Line Numbers
  1. function doStuff() {
  2.     recn=document.getElementById('recno').value;
  3.     str = "moreStuff.php?recn="+recn;
  4.     http.open("GET", str, true);
  5.     http.onreadystatechange = handleHttpResponse;
  6.     http.send(null);
  7.     recno.focus();
  8.     }
Is this the wrong place to call for focus, or do I have the call syntax wrong?
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#4: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

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, handleHttpResponse 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:

Quote:

Originally Posted by webhead

Expand|Select|Wrap|Line Numbers
  1.     http.send(null);
  2.     recno.focus();
  3.     }
  4.  

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 handleHttpResponse, so that it doesn't get called until your AJAX call returns.

[EDIT:
E.g.:

Expand|Select|Wrap|Line Numbers
  1. function handleHttpResponse(response) {
  2.     .
  3.     .
  4.     .
  5.     //    recno is a global variable, right?
  6.     recno.focus();
  7. }
  8.  
]
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#5: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by pbmods

The first 'A' in AJAX stands for 'Asynchronous'. In other words, handleHttpResponse 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 handleHttpResponse, so that it doesn't get called until your AJAX call returns.

[EDIT:
E.g.:

Expand|Select|Wrap|Line Numbers
  1. function handleHttpResponse(response) {
  2.     .
  3.     .
  4.     .
  5.     //    recno is a global variable, right?
  6.     recno.focus();
  7. }
  8.  
]

Hi, thanks for your help. But the problem is I have the handleHttpResponse 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's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#6: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by webhead

But the problem is I have the handleHttpResponse 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.,

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     http.open("GET", url, true);
  3.     http.onreadystatechange = callback;
  4.     http.send(null);
  5. }
  6.  
  7. function doStuff() {
  8.     var recno = document.getElementById('recno');
  9.  
  10.     initAjax("moreStuff.php?recno=" + recno.value, function(response) {
  11.         .
  12.         .
  13.         .
  14.         recno.focus();
  15.     });
  16. }
  17.  
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:

Expand|Select|Wrap|Line Numbers
  1. function doOtherStuff() {
  2.     initAjax('yetMoreStuff.php?you=get&the=idea', function(response) {
  3.         .
  4.         .
  5.         .
  6.     });
  7. }
  8.  
[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!]
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#7: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by pbmods

You could use a different callback for each AJAX call.

E.g.,

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     http.open("GET", url, true);
  3.     http.onreadystatechange = callback;
  4.     http.send(null);
  5. }
  6.  
  7. function doStuff() {
  8.     var recno = document.getElementById('recno');
  9.  
  10.     initAjax("moreStuff.php?recno=" + recno.value, function(response) {
  11.         .
  12.         .
  13.         .
  14.         recno.focus();
  15.     });
  16. }
  17.  
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:

Expand|Select|Wrap|Line Numbers
  1. function doOtherStuff() {
  2.     initAjax('yetMoreStuff.php?you=get&the=idea', function(response) {
  3.         .
  4.         .
  5.         .
  6.     });
  7. }
  8.  
[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!
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#8: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

I must have something messed up, because now the page won't work at all (shows blank). Here's what I've got:
Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     http.open("GET", url, true);
  3.     http.onreadystatechange = callback;
  4.     http.send(null);
  5.     }
  6.  
  7. function doStuff() {
  8.     recn=document.getElementById('recno').value;
  9.     initAjax("moreStuff.php?recn="+recn, function(response) {
  10.         http.open("GET", str, true);
  11.         http.onreadystatechange = handleHttpResponse;
  12.         http.send(null);
  13.         recno.focus();
  14.         });
  15.     }
Was I supposed to put something else where you have "function(response)"? Not sure what should go there.
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#9: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

Worked on it some and have this now:
Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     http.open("GET", url, true);
  3.     http.onreadystatechange = callback;
  4.     http.send(null);
  5.     }
  6. function doStuff() {
  7.     recn=document.getElementById('recno').value;
  8.     initAjax("moreStuff.php?recn="+recn, function response(){
  9.         http.open("GET", str, true);
  10.         http.onreadystatechange = handleHttpResponse;
  11.         http.send(null);
  12.         recno.focus();
  13.         });
  14.     }
  15.  
But now it won't let me change the record number in the box at all, and still doesn't focus.
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#10: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     http.open("GET", url, true);
  3.     http.onreadystatechange = callback;
  4.     http.send(null);
  5.     }
  6. function doStuff() {
  7.     recn=document.getElementById('recno').value;
  8.     initAjax("moreStuff.php?recn="+recn, function response() {
  9.         recno.focus();
  10.         });
  11.     }
  12.  
Callback is what initAjax executes when http.onreadystatechange 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.

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = new XMLHttpRequest();
  3.     http.open("GET", url, true);
  4.     http.onreadystatechange = callback;
  5.     http.send(null);
  6. }
Otherwise, every time you call initAjax, http gets destroyed and re-assigned a new request.
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#11: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

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.
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#12: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

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's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#13: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

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.
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#14: May 12 '07

re: Focus in Textbox when the page is Loaded through Ajax

Here it is:
Expand|Select|Wrap|Line Numbers
  1. /* moreStuff.php */
  2.  
  3. <?php 
  4. ...
  5. $button = $_GET['button']; 
  6. $recn = $_GET['recn'];
  7. ...
  8. // FIND SPECIFIC RECORD FROM GOTO BOX
  9. if ($button=="goto") {
  10.     ...
  11.      // find record and track which page we're on
  12.     }
  13. ...
  14. ?>
  15.  
  16. <!--  DISPLAY FORM  -->
  17. ...
  18.     <img src='icons/goto.png' onClick='getGoto()'>
  19.     <input name='recno' type='text' id='recno' value='<?php echo $page; ?>' size='4'> 
  20. ...
  21.  
  22.  
  23. /* moreStuff.js */
  24.  
  25. function handleHttpResponse() {
  26.     if (http.readyState == 4) {
  27.         document.getElementById(theOutput).innerHTML = http.responseText;
  28.         }
  29.     }
  30.  
  31. function getHTTPObject() {
  32.     var xmlhttp;
  33.     /*@cc_on
  34.     @if (@_jscript_version >= 5)
  35.         try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } 
  36.         catch (e) {
  37.             try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } 
  38.     catch (E) { xmlhttp = false; }
  39.             }
  40.     @else
  41.         xmlhttp = false;
  42.         @end @*/
  43.         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  44.             try { xmlhttp = new XMLHttpRequest(); } 
  45.             catch (e) { xmlhttp = false; }
  46.             }
  47.         return xmlhttp;
  48.     }
  49.  
  50. var http = getHTTPObject(); 
  51.  
  52. theOutput = 'formbox';
  53. ...
  54.  
  55. function initAjax(url, callback) {
  56.     var http = new XMLHttpRequest();
  57.     http.open("GET", url, true);
  58.     http.onreadystatechange = callback;
  59.     http.send(null);
  60.     }
  61. function getGoto() {
  62.     recn=document.getElementById('recno').value;
  63.     initAjax("moreStuff.php?button=goto&recn="+recn, function response(){
  64.         recno.focus(); 
  65.         });
  66.     }
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#15: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Couple of things to change:

Expand|Select|Wrap|Line Numbers
  1. //var http = getHTTPObject(); 
  2. .
  3. .
  4. .
  5. function initAjax(url, callback) {
  6.     var http = getHTTPObject();
  7. .
  8. .
  9. .
  10.     }
  11.  
  12. function getGoto() {
  13. .
  14. .
  15. .
  16.     initAjax("moreStuff.php?button=goto&recn="+recn, function (response) {
  17. .
  18. .
  19. .
  20.     }
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.

Expand|Select|Wrap|Line Numbers
  1. function name(args) {implementation}
is actually a synonym for

Expand|Select|Wrap|Line Numbers
  1. 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:

Expand|Select|Wrap|Line Numbers
  1. initAjax("...", function () {
  2. });
  3.  
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#16: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by pbmods

Couple of things to change:

Expand|Select|Wrap|Line Numbers
  1. //var http = getHTTPObject(); 
  2. .
  3. .
  4. .
  5. function initAjax(url, callback) {
  6.     var http = getHTTPObject();
  7. .
  8. .
  9. .
  10.     }

Moved the "var http = getHTTPObject();" to initAjax, but since it's no longer global I assume I must add that line to any other functions, right? My page won't load at all so I went ahead and added it to other functions, but I must have it in the wrong place since it still won't load. Example:
Expand|Select|Wrap|Line Numbers
  1. function nutherFunction(theButton) {
  2.     str = "moreStuff.php?button="+theButton;
  3.         // add line here
  4.         var http = getHTTPObject();
  5.     //
  6.         http.open("GET", str, true);
  7.     http.onreadystatechange = handleHttpResponse;
  8.     http.send(null);
  9.     }
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#17: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by webhead

Moved the "var http = getHTTPObject();" to initAjax, but since it's no longer global I assume I must add that line to any other functions, right?

The idea is to use initAjax to handle all of your AJAX calls. In other words:

Expand|Select|Wrap|Line Numbers
  1. function doSomething() {
  2.     initAjax('thepage.php?arg=val', function(ajax_response) {
  3.         alert(ajax_response.responseText);
  4.         recno.focus();
  5.     });
  6. }
  7.  
  8. function doSomethingElse() {
  9.     initAjax('anotherpage.php?and=so&on=', function(ajax_response) {
  10.         recno.fetch();
  11.         recno.rollOver();
  12.         recno.playDead();
  13.  
  14.         //    Or if you prefer...
  15.         recno.whaddyaMeanMyTransmissionIsShotAllIWantedWasAnOilChange();
  16.     });
  17. }
  18.  
In the examples above, doSomething and doSomethingElse call initAjax, which creates the XMLHttpRequest object and then executes the callback function. So neither doSomething nor doSomethingElse has to deal with any of that.
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#18: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Aaaahhhhh, I see. (Can't tell I'm a n00b at AJAX can ya? Or that I even had anything working at all just by copy/paste from sketchy tutorials?)

So now it goes a little something like this:

Expand|Select|Wrap|Line Numbers
  1. function getFunky() {
  2.     url = "doStuff.php?button=add";
  3.     initAjax(url, function response(){ --- stuff here if needed --- });
  4.     }
And "function response" can be empty between the {} if I don't have other things to do after that, right?

But... still no page loading. Checking code for typos...
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#19: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

This can't be right:
Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     var http = new XMLHttpRequest();
  4.     http.open("GET", url, true);
  5.     http.onreadystatechange = callback;
  6.     http.send(null);
  7.     }
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#20: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by webhead

Aaaahhhhh, I see. (Can't tell I'm a n00b at AJAX can ya? Or that I even had anything working at all just by copy/paste from sketchy tutorials?)

We've all been there. With time, all things pass :)

Quote:

Originally Posted by webhead

And "function response" can be empty between the {} if I don't have other things to do after that, right?

Alrightey. Buckle down and forget everything you learned about JavaScript. Here we go.

JavaScript is fiercely object-oriented. Just about everything is an object. 2 is an instance of the Number class. 'Hello, World!' is an instance of the String class. And getFunky (in the example above) is an instance of the Function class.

As I noted above, when you type this:

Expand|Select|Wrap|Line Numbers
  1. function getFunky(mark) { return mark * 5; }
  2.  
JavaScript treats it like this:
Expand|Select|Wrap|Line Numbers
  1. getFunky = new Function('mark', 'return mark * 5;');
  2.  
The browser creates a new global variable called 'getFunky', and assigns it an instance of the Function class with one argument ('mark'), and a function body ('return mark * 5;');

The two statements are equivalent, but the browser will automatically use the latter form at runtime.

Remember that. All functions in JavaScript are actually Function objects.

Ok, so with that in mind, consider this: When you invoke a function, and you pass arguments to that function, sometimes you use 'literals' instead of variables. Here's an example:

Expand|Select|Wrap|Line Numbers
  1. doSomething(5);
  2.  
  3. var mark = 5;
  4. doSomething(mark);
  5.  
In both cases, you're passing the number 5 to doSomething. But in the first statement, you use the 'literal' 5, whereas in the second set of instructions, you're passing the variable 'mark', which has a value of 5.

So far so good?

Now, since in JavaScript, the number 5 is actually an instance of the Number class, you could also do this:

Expand|Select|Wrap|Line Numbers
  1. doSomething(new Number(5));
  2.  
This statement creates a new instance of the Number class, assigns it the value of 5 and passes it to doSomething.

Ok. Now, instead of a Number object, let's use a Function object. We'll start with an easy one:

Expand|Select|Wrap|Line Numbers
  1. function myFunc(x) { return x * 5; }
  2. //  Which is the same as:
  3. //  myFunc = new Function('x', 'return x * 5;');
  4.  
  5. alert(myFunc);
  6.  
What happens here, keeping in mind that myFunc is a variable that stores a Function object?

The output of the alert statement, btw, is outside the scope of this post, so we'll just move on to the next part:

Expand|Select|Wrap|Line Numbers
  1. //  Remember from before where we passed a literal to a function:
  2. alert(10);
  3. alert(new Number(10));
  4. //  Or...
  5. alert('Hello, World!');
  6. alert(new String('Hello, World!'));
  7.  
  8. //  We can also pass a Function 'literal':
  9. alert(function(x) { return x * 5; });
  10. alert(new Function('x', 'return x * 5;'));
  11.  
Note that, just like 10 or 'Hello, World!', there is no variable that stores the function you created in those last two statements; they are called "anonymous functions".

Still with me?

So going back to your code, when you type:

Expand|Select|Wrap|Line Numbers
  1. initAjax(url, function(response) {
  2. });
  3.  
which is identical to this:

Expand|Select|Wrap|Line Numbers
  1. initAjax(url, new Function('response', ''));
  2.  
You're actually creating a new anonymous function which takes one argument (response, which will store the returned object from your XMLHttpRequest call automatically [and you don't have to worry about it; just assume that it will]).

Now, let's take a look at initAjax:

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback)
  2.  
Note that url is a String object, and callback is a Function object. callback stores the anonymous function that you created when you invoked initAjax in the last code block.

Likewise, when you do this:

Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = callback;
  2.  
You are copying the function stored in callback to http.onreadystatechange. When http's readystate changes, it will check to see if there is a function stored in its onreadystatechange property, which in this case is (technically a copy of) the anonymous function you created when you invoked initAjax.

Hope that answered a few more questions than it generated.

And also, you are correct:

Quote:

Originally Posted by webhead

This can't be right:

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     var http = new XMLHttpRequest();
  4.     http.open("GET", url, true);
  5.     http.onreadystatechange = callback;
  6.     http.send(null);
  7.     }

Get rid of this line:
Expand|Select|Wrap|Line Numbers
  1. var http = new XMLHttpRequest();
Since you brought in the getHTTPObject function, you no longer need that line. getHTTPObject will create a new XMLHttpRequest object (or some Microsoft thing if you're using IE) and return it.

In this case, initAjax stores the returned object to the variable http.

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     http.open("GET", url, true);
  4.     http.onreadystatechange = callback;
  5.     http.send(null);
  6.     }
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#21: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by pbmods

We've all been there. With time, all things pass :)

Yes, but now and then you need a little Ex-Lax to get things moving ;-)

Quote:
Alrightey. Buckle down and forget everything you learned about JavaScript. Here we go....

Expand|Select|Wrap|Line Numbers
  1. function myFunc(x) { return x * 5; }
  2. //  Which is the same as:
  3. //  myFunc = new Function('x', 'return x * 5;');
  4.  
  5. alert(myFunc);
  6.  
What happens here, keeping in mind that myFunc is a variable that stores a Function object?
So anything "new" creates a variable that holds a string, number, or function, right? So if I pass an empty function { } it's just like passing an empty string.

...
Quote:

Expand|Select|Wrap|Line Numbers
  1. initAjax(url, new Function('response', ''));
  2.  
You're actually creating a new anonymous function which takes one argument (response, which will store the returned object from your XMLHttpRequest call automatically [and you don't have to worry about it; just assume that it will]).
A little fuzzy on how that works but right now I'm happy to take your word for it.

Question: We used to do
Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = http.responseText;;
  2.  
instead of
Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = callback;
  2.  
. When do we do http.responseText now?

Still no page load, so I started the old put alerts everywhere thing, and it seems to go through all the right motions, yet nothing is put out. I tried it also on a much simpler part of my app, a section in another frame that just puts out a "rate card" of values used in calculations for an invoice. It displays the numbers and takes any changes, only this and nothing more.

Yet no output. But it's small so I'll try and post the whole thing here:
Expand|Select|Wrap|Line Numbers
  1. theOutput = 'output'; 
  2. function handleHttpResponse() {
  3.     if (http.readyState == 4) {
  4.         document.getElementById(theOutput).innerHTML = http.responseText;
  5.         }
  6.     }
  7.  
  8. function getHTTPObject() {
  9.     var xmlhttp;
  10.     /*@cc_on
  11.     @if (@_jscript_version >= 5)
  12.         try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } 
  13.         catch (e) {
  14.             try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } 
  15.             catch (E) { xmlhttp = false; }
  16.             }
  17.     @else
  18.         xmlhttp = false;
  19.         @end @*/
  20.         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  21.             try { xmlhttp = new XMLHttpRequest(); } 
  22.             catch (e) { xmlhttp = false; }
  23.             }
  24.         return xmlhttp;
  25.     }
  26.  
  27. function initAjax(url, callback) {
  28.     var http = getHTTPObject(); 
  29.     http.open("GET", url, true);
  30.     http.onreadystatechange = callback;
  31.     http.send(null);
  32.     }
  33. /////////////////////////////////////////////////////////////////////////////////
  34. function getRatecard() {
  35.     url = "Rfunc.php";
  36.     initAjax(url, function response(){ });
  37.     }    
  38.  
  39. function rChange(theField) {
  40.     fldnam=document.getElementById(theField).name;
  41.     fldval=document.getElementById(theField).value;
  42.     url = 'Rfunc.php?fldn='+fldnam+'&fldv='+fldval; 
  43.     initAjax(url, function response(){ });
  44.     } 
  45.  
  46. function rReport() {
  47.     url = 'Rfunc.php?report=recvbls'; 
  48.     initAjax(url, function response(){ });
  49.     } 
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#22: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Interesting:
Expand|Select|Wrap|Line Numbers
  1. function getRatecard() {
  2.     url = "Rfunc.php";
  3.     initAjax(url, function response(){ document.getElementById(theOutput).innerHTML = http.responseText; }); 
  4.     }    
puts out nothing but:
Expand|Select|Wrap|Line Numbers
  1. function getRatecard() {
  2.     url = "Rfunc.php";
  3.     initAjax(url, function response(){ document.getElementById(theOutput).innerHTML = 'blah'; }); 
  4.     }    
puts out "blah". Looks like we just aren't putting anything into ...innerHTML, because by the time we get to that statement the responseText is gone.
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#23: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Go back and reread my last post.
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#24: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by webhead

So anything "new" creates a variable that holds a string, number, or function, right? So if I pass an empty function { } it's just like passing an empty string.

Basically, considering that when you pass an empty string, you're actually passing an instance of the String class without a value:

Expand|Select|Wrap|Line Numbers
  1. doSomething('') === doSomething(new String(''));
  2. doSomething(function() {}) === doSomething(new Function('', ''));
  3.  
Quote:
Question: We used to do
Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = http.responseText;;
  2.  
instead of
Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = callback;
  2.  
. When do we do http.responseText now?
This is where that 'response' that you keep confusing for the function's name comes into play.

NOTE WHERE I PUT 'RESPONSE'. IT GOES INSIDE THE PARENTHESIS.

Expand|Select|Wrap|Line Numbers
  1. initAjax(url, function (response) { eval(response.responseText); });
  2.  
  3. initAjax(url, new Function('response', 'eval(response.responseText);'));
  4.  
The two statements do exactly the same thing. Remember that when http.onreadystatechange fires, it will automatically pass the result as the first parameter.

Fix your callbacks, and things should start working.
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#25: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Oops, how did I do that with the ()? Fixed, added the eval, but still nothing. Tried this too and still nothing:
Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     http.open("GET", url, true); 
  4.     http.onreadystatechange = callback;
  5.     http.send(null);
  6.     }
  7.  
  8. function getRatecard() {
  9.     url = "Rfunc.php";
  10.     initAjax(url, function (response) { 
  11.         eval(response.responseText); 
  12.         document.getElementById(theOutput).innerHTML = response.responseText;
  13.         }); 
  14.     }    
Sorry I'm not catching on too well, maybe I need to go back and find some more beginner tutorials. But you've been a most patient teacher and I am very grateful for your help.
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#26: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by webhead

Oops, how did I do that with the ()? Fixed, added the eval, but still nothing. Tried this too and still nothing:

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     http.open("GET", url, true); 
  4.     http.onreadystatechange = callback;
  5.     http.send(null);
  6.     }
  7.  
  8. function getRatecard() {
  9.     url = "Rfunc.php";
  10.     initAjax(url, function (response) { 
  11.         eval(response.responseText); 
  12.         document.getElementById(theOutput).innerHTML = response.responseText;
  13.         }); 
  14.     }    

Ok, this is looking pretty good. But now we have a conflict:

Expand|Select|Wrap|Line Numbers
  1.         eval(response.responseText); 
  2.         document.getElementById(theOutput).innerHTML = response.responseText;
  3.  
I used the 'eval' line just as an example, because I wasn't sure what you were getting back from your server-side script. But it looks like the script is sending HTML, not JavaScript. So you can go ahead and remove the 'eval' line (since eval(html code) will produce an error):

Expand|Select|Wrap|Line Numbers
  1. function getRatecard() {
  2.     url = "Rfunc.php";
  3.     initAjax(url, function (response) { 
  4.         document.getElementById(theOutput).innerHTML = response.responseText;
  5.         }); 
  6.     }
Quote:
Sorry I'm not catching on too well, maybe I need to go back and find some more beginner tutorials. But you've been a most patient teacher and I am very grateful for your help.
I'm having fun, I promise. I know we all make typos occasionally (I happen to hold the world record for typos per hour, and I broke it three times last weeek^K^Kk). I apologize for my outburst.
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#27: May 13 '07

re: Focus in Textbox when the page is Loaded through Ajax

Expand|Select|Wrap|Line Numbers
  1. function getRatecard() {
  2.     url = "Rfunc.php";
  3.     initAjax(url, function (response) { 
  4.         document.getElementById(theOutput).innerHTML = response.responseText;
  5.         }); 
  6.     }
Done, but still nothing from "response.responseText;". Is it possible we need to wait for "http.readyState == 4"? I tried putting that around the "...innerHTML..." line but still nothing.

Quote:

Originally Posted by pbmods

I'm having fun, I promise. I know we all make typos occasionally (I happen to hold the world record for typos per hour, and I broke it three times last weeek^K^Kk). I apologize for my outburst.

No prob. I know I can get on people's nerves with endless questions, especially when it's free edjamakashun. Thanks again.
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#28: May 14 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by webhead

Done, but still nothing from "response.responseText;". Is it possible we need to wait for "http.readyState == 4"?

Ooh. Good point. Alrightey. Let's add another layer of complexity to initAjax:

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     http.open("GET", url, true); 
  4.     http.onreadystatechange = function(response) {
  5.         if(response.readyState == 4)
  6.             callback(response);
  7.     };
  8.     http.send(null);
  9.     }
  10.  
We create a new anonymous function that checks for response's readyState (remember that response is set to the result from the AJAX call automatically when you assign it to http.onreadystatechange; http is undefined outside of initAjax, so we pass the response through callbacks). If it is 4, then we call callback and pass the response to it. Otherwise, we do nothing.

Quote:
I tried putting that around the "...innerHTML..." line but still nothing.
Hm.

Try alerting your responseText to see if your script is sending anything back to you.

Expand|Select|Wrap|Line Numbers
  1. initAjax(url, function (response) { 
  2.         alert(response.responseText);
  3.         }); 
  4.  
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#29: May 14 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by pbmods

Try alerting your responseText to see if your script is sending anything back to you.

Expand|Select|Wrap|Line Numbers
  1. initAjax(url, function (response) { 
  2.         alert(response.responseText);
  3.         }); 
  4.  

Tried this:
Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     http.open("GET", url, true);
  4.     http.onreadystatechange = function(response) {
  5.         if (response.readyState == 4) { callback(response); } 
  6.         };
  7.     alert('ack');
  8.     http.send(null);
  9.     }
  10.  
  11. function getTestpage() { 
  12.     url = "afunc.php";
  13.     initAjax(url, function (response) { 
  14.             document.getElementById(theOutput).innerHTML = response.responseText;
  15.             alert(response.responseText);
  16.         });
  17.     alert('done');
  18.     }    
I get alerts for "ack" and "done" but not "response.responseText". Not even a blank alert, no alert at all.
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#30: May 14 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by webhead

Tried this:

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     http.open("GET", url, true);
  4.     http.onreadystatechange = function(response) {
  5.         if (response.readyState == 4) { callback(response); } 
  6.         };
  7.     alert('ack');
  8.     http.send(null);
  9.     }
  10.  
  11. function getTestpage() { 
  12.     url = "afunc.php";
  13.     initAjax(url, function (response) { 
  14.             document.getElementById(theOutput).innerHTML = response.responseText;
  15.             alert(response.responseText);
  16.         });
  17.     alert('done');
  18.     }    
I get alerts for "ack" and "done" but not "response.responseText". Not even a blank alert, no alert at all.

Here's why you're not seeing anything:

heh

Because http actually *isn't* automatically assigning a value to response. I went back and looked at my AJAX frameworks, and it turns out that you have to manually do this.

Yeah. *sheepish grin*

So anyway, here's what initAjax *really* should look like (are we having fun yet?):

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     http.open("GET", url, true);
  4.     http.onreadystatechange = function() {
  5.         if (http.readyState == 4) { callback(http); } 
  6.         };
  7.     http.send(null);
  8.     }
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#31: May 14 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by pbmods

Because http actually *isn't* automatically assigning a value to response. I went back and looked at my AJAX frameworks, and it turns out that you have to manually do this.

Yeah. *sheepish grin*

So anyway, here's what initAjax *really* should look like (are we having fun yet?):

Having fun... like the time our driver's ed instructor hit the car in front when we asked him to show us parallel parking with real cars instead of cones... 8-)

Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     http.open("GET", url, true);
  4.     http.onreadystatechange = function() {
  5.         if (http.readyState == 4) { callback(http); } 
  6.         };
  7.     http.send(null);
  8.     }
w00t! It lives!

But.... ::sobbing:: ... now there's no focus :-(
Expand|Select|Wrap|Line Numbers
  1. function initAjax(url, callback) {
  2.     var http = getHTTPObject(); 
  3.     http.open("GET", url, true);
  4.     http.onreadystatechange = function() {
  5.         if (http.readyState == 4) { callback(http); } 
  6.         };
  7.     http.send(null);
  8.     }
  9.  
  10. function getTestpage() { 
  11.     url = "afunc.php";
  12.     initAjax(url, function (response) { 
  13.             document.getElementById(theOutput).innerHTML = response.responseText;
  14.             fldname.focus();
  15.         });
  16.     }    
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#32: May 14 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by webhead

But.... ::sobbing:: ... now there's no focus :-(

Hm. Your code is looking pretty good. The only thing I can think of is that fldname is not defined.

Check your error console and see what's going on.
Member
  
Join Date: Mar 2006
Location: Ohio
Posts: 56
#33: May 14 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by pbmods

Hm. Your code is looking pretty good. The only thing I can think of is that fldname is not defined.

Check your error console and see what's going on.

This works:
Expand|Select|Wrap|Line Numbers
  1. function getTestpage() { 
  2.     url = "afunc.php";
  3.     initAjax(url, function (response) { 
  4.             document.getElementById(theOutput).innerHTML = response.responseText;
  5.             document.getElementById('fldname').focus();
  6.         });
  7.     }    
Whew!

Felt like wandering in the desert for 40 years just to go 20 miles, but worth the trip because things were learned. Thanks again for all your help. :-)
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#34: May 14 '07

re: Focus in Textbox when the page is Loaded through Ajax

Quote:

Originally Posted by webhead

Felt like wandering in the desert for 40 years just to go 20 miles, but worth the trip because things were learned.

On both sides (both parts :P).

Quote:

Originally Posted by webhead

Thanks again for all your help. :-)

You are most welcome. Come back anytime!
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,295 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved