Page 1 of 1
Set focus on textbox inside ajax loaded div?
Posted: Fri Oct 15, 2010 9:48 am
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?
Re: Set focus on textbox inside ajax loaded div?
Posted: Fri Oct 15, 2010 10:13 am
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?
Re: Set focus on textbox inside ajax loaded div?
Posted: Fri Oct 15, 2010 10:21 am
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)
Re: Set focus on textbox inside ajax loaded div?
Posted: Fri Oct 15, 2010 10:26 am
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.
Re: Set focus on textbox inside ajax loaded div?
Posted: Mon Oct 18, 2010 9:43 am
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>
Re: Set focus on textbox inside ajax loaded div?
Posted: Mon Oct 18, 2010 10:25 am
by Eran
Inside your ajaxDone() function, just after you add the textarea to the DOM, you need to set the focus on the textarea.
Re: Set focus on textbox inside ajax loaded div?
Posted: Mon Oct 18, 2010 1:02 pm
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>