Welcome to WebmasterWorld Guest from 54.226.25.231

Forum Moderators: open

Message Too Old, No Replies

AJAX and enter key

     

Charlesh

1:22 pm on Apr 10, 2012 (gmt 0)



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

1:37 pm on Apr 10, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

4:39 pm on Apr 10, 2012 (gmt 0)



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

8:37 pm on Apr 10, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

Charlesh

8:51 pm on Apr 13, 2012 (gmt 0)



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

9:11 pm on Apr 13, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

12:46 pm on Apr 16, 2012 (gmt 0)



<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

12:48 pm on Apr 16, 2012 (gmt 0)



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

Fotiman

4:19 pm on Apr 16, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month