Set focus on textbox inside ajax loaded div?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
djlex1928
Forum Commoner
Posts: 31
Joined: Sun Sep 19, 2010 3:23 pm

Set focus on textbox inside ajax loaded div?

Post by djlex1928 »

I have searched and searched for a solution to this, however I am still stuck!

I basically have a page that shows text and allows the user to click an edit button that then loads a textbox into a div on the page. (via. AJAX)

I really want the textbox automatically focused so the user can start typing straight away, however having spent the last couple hours trying to find a solution, I have got no where. All the usual javascript commands used to set focus don't work, as you may well know.

Can anyone help me with this?
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Set focus on textbox inside ajax loaded div?

Post by Eran »

You use the focus() method directly on the element (not the jquery object). Can you show us what you tried and didn't work?
djlex1928
Forum Commoner
Posts: 31
Joined: Sun Sep 19, 2010 3:23 pm

Re: Set focus on textbox inside ajax loaded div?

Post by djlex1928 »

I'm not using the jquery library.

I tried <body onload="document.form1.user.focus();">

My ajax code loads the file edit.php (where the textbox is located) and I put the code above in that file.
When you say you use it directly on the element, could you explain further. I tried <input type="text" onload="self.focus();"> and still got nothing. (If that's what you meant)
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Set focus on textbox inside ajax loaded div?

Post by Eran »

Not all elements have the onload event, so you can't use it freely like that. You also can't use the onload event for the page if the element does not exist yet. You should put the focus() action in the callback to the AJAX request you are running.
I'm wondering though - why do you need AJAX to show a textarea? unless there's some content you need from the server, it should be done using Javascript only.
djlex1928
Forum Commoner
Posts: 31
Joined: Sun Sep 19, 2010 3:23 pm

Re: Set focus on textbox inside ajax loaded div?

Post by djlex1928 »

I need to pull information from my mysql server when loading the textbox, that's why I need to use AJAX.

Can anyone explain how I can alter my AJAX code to focus on the textbox stated before, I just keep causing errors when I edit the code.

Code: Select all

<script type="text/javascript">
function ajax(url,target)
 {
    // native XMLHttpRequest object
   document.getElementById(target).innerHTML = '<p><img src="/images/load.gif"></p>';
   if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
       req.onreadystatechange = function() {ajaxDone(target);};
       req.open("GET", url, true);
       req.send(null);
   // IE/Windows ActiveX version
   } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
       if (req) {
           req.onreadystatechange = function() {ajaxDone(target);};
           req.open("GET", url, true);
           req.send();
       }
   }
}

function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="An Error Has Occured!:\n" +
req.statusText;
}
}
}
</script>
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Set focus on textbox inside ajax loaded div?

Post by Eran »

Inside your ajaxDone() function, just after you add the textarea to the DOM, you need to set the focus on the textarea.
djlex1928
Forum Commoner
Posts: 31
Joined: Sun Sep 19, 2010 3:23 pm

Re: Set focus on textbox inside ajax loaded div?

Post by djlex1928 »

Thanks a million, I don't know why I was trying to do it so weirdly. I knew what I had to do just couldn't figure it out lol. Oh well I've posted the code below so people can see the changes I made if anyone ever needs the same.

Code: Select all

<script type="text/javascript">
function ajax(url,target)
 {
    // native XMLHttpRequest object
   document.getElementById(target).innerHTML = '<p><img src="/images/load.gif"></p>';
   if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
       req.onreadystatechange = function() {ajaxDone(target);};
       req.open("GET", url, true);
       req.send(null);
   // IE/Windows ActiveX version
   } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
       if (req) {
           req.onreadystatechange = function() {ajaxDone(target);};
           req.open("GET", url, true);
           req.send();
       }
   }
}

function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
document.form1.user.focus();
} else {
document.getElementById(target).innerHTML="An Error Has Occured!:\n" +
req.statusText;
}
}
}
</script>
Post Reply