Welcome to WebmasterWorld Guest from 54.147.134.218

Forum Moderators: open

Message Too Old, No Replies

AJAX and enter key

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

New User

joined:Apr 10, 2012
posts: 6
votes: 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?
1:37 pm on Apr 10, 2012 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


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).
4:39 pm on Apr 10, 2012 (gmt 0)

New User

joined:Apr 10, 2012
posts: 6
votes: 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.
8:37 pm on Apr 10, 2012 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


Without seeing some actual code I think this will be difficult to debug. Could you post some of your code?
8:51 pm on Apr 13, 2012 (gmt 0)

New User

joined:Apr 10, 2012
posts: 6
votes: 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);

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

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


Ok, and what does your HTML content look like? How are these methods called? Is it possible that your request is being fired twice?
12:46 pm on Apr 16, 2012 (gmt 0)

New User

joined:Apr 10, 2012
posts: 6
votes: 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
12:48 pm on Apr 16, 2012 (gmt 0)

New User

joined:Apr 10, 2012
posts: 6
votes: 0


function txtSelected()
{
var txtValue = document.getElementById('searchTXT').value;
ajaxFunction(txtValue);
}
4:19 pm on Apr 16, 2012 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


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>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members