Not sure if this is an AJAX issue or not

cersos · November 12, 2008

I have some code that presents a user with an input text field that they are to enter a number in then they click a GO button. Once clicked, that button uses AJAX to generate a form with the number of rows (input type=text fields) necessary.

What I'd like to do is have the cursor placed in the first input field of the AJAX generated form. I've tried an onClick event on the GO button, but because the elements do not exist yet it does not work. I've also tried using a script tag in the resulting AJAX, but that fails as well. The script tag I created within the AJAX generated code is

<script language=JavaScript>document.getElementById('newRecipient1').focus()</script>

Here is some sample HTML:

<html>
<head>
  <script language=JavaScript>
   function URLEncode(clearString) {
    var output = '';
    var x = 0;
    clearString = clearString.toString();
    var regex = /(^[a-zA-Z0-9_.]*)/;
    while (x < clearString.length) {
     var match = regex.exec(clearString.substr(x));
     if (match != null && match.length > 1 && match[1] != '') {
      output += match[1];
      x += match[1].length;
     } else {
      if (clearString[x] == ' ')
       output += '+';
      else {
       var charCode = clearString.charCodeAt(x);
       var hexVal = charCode.toString(16);
       output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
      }
      x++;
     }
    }
    return output;
   }
   function ajax(target,value,handler,options) {
    var xmlHttp;
    try { xmlHttp=new XMLHttpRequest(); }
    catch (e) {
     try { xmlHttp=new ActiveXObject('Msxml2.XMLHTTP'); }
     catch (e) {
      try { xmlHttp=new ActiveXObject('Microsoft.XMLHTTP'); }
      catch (e) {
       alert('Your browser does not support AJAX!');
       return false;
      }
     }
    }
    xmlHttp.onreadystatechange = function() {
     if(xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3) {
      document.getElementById(target).innerHTML = 'Loading...';
     }
     if(xmlHttp.readyState == 4) {
      document.getElementById(target).innerHTML = xmlHttp.responseText;
     }
    }
    xmlHttp.open('GET',handler+'?q='+URLEncode(value)+(options?options:''),true);
    xmlHttp.send(null);
   }
   function onEnter(evt,btn) {
    var keyCode = null;
    if (evt.which)
     keyCode = evt.which;
    else if (evt.keyCode)
     keyCode = evt.keyCode;
    if (13 == keyCode) {
     document.getElementById(btn).click();
     return false;
    }
    return true;
   }
  </script>
<body>
  <b>Add <input name=count id=count value=0 onkeypress="return onEnter(event,'Go')" type=text> new recipient(s)</b> <input value=Go id=Go onclick="ajax('newRecipients',document.getElementById('count').value,'addRecipients.php')" type=button>
  <span id=newRecipients></span>
</body>
</html>

Here is the AJAX called PHP script:

<?php
if (!$q) exit;
print "\n<ol>\n";
for ($i=1;$i<=$q;$i++)
  print "<li>UID: <input type=text name=newRecipients[] id=newRecipient".$i." size=6 maxlength=6 onKeyPress=\"return onEnter(event,'checkIDButton".$i."')\"> <input type=button id=checkIDButton".$i." value='Check UID' onclick=\"document.getElementById('checkedUID".$i."').innerHTML='Usually uses AJAX to verify UID'".($i<$q ? ";document.getElementById('newRecipient".($i+1)."').focus()" : "")."\"> <span id=checkedUID".$i."></span></li>\n";
print "</ol>\n";
?>

I am able to force the cursor where I want it once the AJAX generated code is present, but I am having difficulty getting the cursor in the initial input field.

Can anyone help? I hope this is not too much information. I wanted to avoid the 'show us your code' comments

Steve

Sign In

Not sure if this is an AJAX issue or not

Recommended Posts

cersos

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information