homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
AJAX and enter key
Charlesh



 
Msg#: 4439157 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4439157 posted 1:37 pm on Apr 10, 2012 (gmt 0)

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



 
Msg#: 4439157 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4439157 posted 8:37 pm on Apr 10, 2012 (gmt 0)

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

Charlesh



 
Msg#: 4439157 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4439157 posted 9:11 pm on Apr 13, 2012 (gmt 0)

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



 
Msg#: 4439157 posted 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



 
Msg#: 4439157 posted 12:48 pm on Apr 16, 2012 (gmt 0)

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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4439157 posted 4:19 pm on Apr 16, 2012 (gmt 0)

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved