Fotiman
msg:4439163 | 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:4439241 | 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
msg:4439316 | 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:4440645 | 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
msg:4440652 | 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:4441436 | 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:4441440 | 12:48 pm on Apr 16, 2012 (gmt 0) |
function txtSelected()
{
var txtValue = document.getElementById('searchTXT').value;
ajaxFunction(txtValue);
}
|
Fotiman
msg:4441543 | 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>
|
|
|
|
