AJAX and enter key

[Charlesh]

I have some AJAX that works everytime I use the button that call the ajax function. It is a search menu when the user type in a key word and press the enter key I call an AJAX function using the onclick event. I also want the user to be able to type the key word and press the enter key. I capture the enter key e.which == 13 and call the same AJAX function. It get to the readystate of 1 and blows up. Can some one help with this?

[Fotiman]

Use a regular form with a submit button, and attach an onsubmit event listener. Then you won't need to add any special handling for the enter key (browsers will trigger the first submit button in the form when the enter key is pressed).

[Charlesh]

I guess I need to explain a little better. The enter key is not the problem when I press it the javascript captures it just fine. I'm calling a AJAX function from there. The ajax function is call in two places; when the user hit the search button onclick='txtSelected' and from within the code that captures the enter key. When the search button is clicked AJAX creates the
XMLHTTP object and returns the desired results everytime. When the enter key is pressed it most of the times and sometime it will work. I set up alerts and it seems to fail when the readystate = 1. I also added an onsubmit listener: the same results.

[Fotiman]

Without seeing some actual code I think this will be difficult to debug. Could you post some of your code?

[Charlesh]

OK. when this code is run it get's inside of the AjaxFunction and booms out at readystate = 1. It only booms out when the enter key is used if I use the button that calls the same AjaxFunction everything works.

function checkEnter(e)
{
var code = '';

if (e.which)
{
code = e.which;
}
else if (e.keyCode)
{
code = e.keyCode;
}

if (code == 13)
{

alert('13');
var txtValue = document.getElementById('searchTXT').value;
alert(txtValue);
ajaxFunction(txtValue);
return true;

}
}






function ajaxFunction(txtValue)
{
alert('In ajaxFuntion after pause');
//alert(txtValue);
var ajaxRequest; // The variable that makes Ajax possible!

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari

ajaxRequest = new XMLHttpRequest();
// alert('code for IE7+, Firefox, Chrome, Opera, Safari');

}
else
{// code for IE6, IE5
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
//alert('code for IE6, IE5');

}

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200)
{

alert("request finished and response is ready. ready state 4");
URL = ajaxRequest.responseText;
//alert(URL);
location.href=URL;

}
else if(ajaxRequest.readyState == 3 )
{
alert("processing request Request is waiting for user interaction ");
}
else if(ajaxRequest.readyState == 2 )
{
alert("request received Request is fully loaded");
}
else if(ajaxRequest.readyState == 1 )
{
alert("server connection established Request is loading ");
}
else if(ajaxRequest.readyState == 0 )
{
alert("Object is uninitialized or request not initialized ");
}
}

var queryString = "?t=" + Math.random()+"&userInput=" + txtValue;
ajaxRequest.open("GET", "serverResponse.php" + queryString, true);
ajaxRequest.send(null);

}

[Fotiman]

Ok, and what does your HTML content look like? How are these methods called? Is it possible that your request is being fired twice?

[Charlesh]

<a href='http:www/index.php?option=com_content&view=article&id=679:propath-test-menu&catid=46&Itemid=501'><h3>Search For Test By Name</h3></a>

<form name= 'input_form'>
<input type="text" id="searchTXT" name="searchTXT" onKeyPress="return checkEnter(event)" size = "60" value = "Enter test name or CPT code" onFocus="this.value==this.defaultValue?this.value='':null "/>
<input type='button' id='txt_submit' name='txt_submit' value='search' onclick='txtSelected()' />

</form>
<br />
<?php
if(isset($_GET['error']))
{
print("<h7> Your Search Returned 0 Results</h7>");


}


?>

<?php

if(isset($_GET['alphaVal']) or isset($_GET['specialVal']) or isset($_GET['val2']) or isset($_GET['searchVal']))
{
//do not display alpha line
}
else
{
include("alphaLine.php");
}

?>

Here is the textSelected function that goes within the JS file

[Charlesh]

function txtSelected()
{
var txtValue = document.getElementById('searchTXT').value;
ajaxFunction(txtValue);
}

[Fotiman]

I don't notice anything obvious (though I haven't had time to really study it in depth).

Here are my thoughts.

onkeypress can fire multiple times (for example, if you hold down a key). Is it possible that it's be fired multiple times when you're seeing a problem?

Also, my suggestion would be to replace all of that onkeypress and onclick handlers with a single "onsubmit" handler on the form, and then change your "button" to a "submit" button, which would look more like this:

<form name='input_form' onsubmit="return txtSelected();"> 
  <input type="text" id="searchTXT" name="searchTXT" size = "60" 
      value = "Enter test name or CPT code" 
      onFocus="this.value==this.defaultValue?this.value='':null "/> 
  <input type='submit' id='txt_submit' name='txt_submit' value='search'/> 
</form> 

<script>
function txtSelected() { 
  var txtValue = document.getElementById('searchTXT').value; 
  ajaxFunction(txtValue); 
  return false;
} 

function ajaxFunction(txtValue) {
  var ajaxRequest; // The variable that makes Ajax possible! 
  if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
    ajaxRequest = new XMLHttpRequest();
  } else { // code for IE6, IE5 
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }

  // Create a function that will receive data sent from the server 
  ajaxRequest.onreadystatechange = function () {
    if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
      alert("request finished and response is ready. ready state 4");
      // *** URL is global
      URL = ajaxRequest.responseText;
      location.href = URL;
    } else if (ajaxRequest.readyState == 3) {
      alert("processing request Request is waiting for user interaction ");
    } else if (ajaxRequest.readyState == 2) {
      alert("request received Request is fully loaded");
    } else if (ajaxRequest.readyState == 1) {
      alert("server connection established Request is loading ");
    } else if (ajaxRequest.readyState == 0) {
      alert("Object is uninitialized or request not initialized ");
    }
  }

  var queryString = "?t=" + Math.random() + "&userInput=" + txtValue;
  ajaxRequest.open("GET", "serverResponse.php" + queryString, true);
  ajaxRequest.send(null);
}
</script>