Ajax response problem

Question

Shanti C 106 Posting Virtuoso

14 Years Ago

hello members,

i have wriiten a form in my php page and i did call an ajax function on onsubmit, based on my ajax response my form have to be submit...but i am not getting ajax response text some times. But some times i got it correctly..i have used post method in my ajax function.
please check the code and do fix my problem.

formid="reserve";

	var f = document.getElementById(formid);
	var keyValue = "";
	keyValue = buildKeyValueSearchFunction(f, keyValue);
	alert(keyValue);
	ajax_request = createRequestObject();
	ajax_request.open('POST', 'checkpaycycle.php'  , true);
	ajax_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	
	alert(ajax_request.readyState);
	ajax_request.onreadystatechange = function()
	{
		
		if (ajax_request.readyState == 4 )
		{
			if(ajax_request.responseText!='')
		    {
				alert(ajax_request.responseText);
				document.getElementById("error_pgrid").innerHTML=ajax_request.responseText;
		    	
			}
		}
	}
	ajax_request.send(keyValue);
	return false;

thanks in advance,
SHAN

javascript

Edited 14 Years Ago by Shanti C because: n/a

3 Contributors
3 Replies
134 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by Shanti C

paulrajj 6 Junior Poster

14 Years Ago

Hi,

check through alert, what responsetext of ajax_request you are getting.

alert(ajax_request.responseText);
if(ajax_request.responseText!='')

And also if you post the checkpaycycle.php page will make it helping you.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2010-10-07T02:48:52+00:00

Shanti,

I try to avoid debug alerts when working with real-time code (inc AJAX) as they suspend execution and can mess up the timing. For example, say your ajax function has a timeout. An alert in the ajax response handler could (depending on where it is placed) eat into the timeout period and give misleading results.

It's better to use an event logger, which is much less interruptive of natural code execution. Here's an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.log { width: 300px; padding: 3px; border: 1px solid #999; font-family: arial; font-size: 10pt; }
.log h1 { margin:0 0 2px 0; padding:1px 0; font-size:10pt; text-align:center; color:#fff; background-color:#779977; }
.log h2 { margin:0; padding:0; font-size:8pt; text-align:center; font-weight:normal; }
.log div.first { border-top:1px #999 solid; }
.log .entry { padding:1px 0; border-bottom:1px #999 solid; }
.log .even { background-color:#cceecc; }
.log .odd { background-color:#fff; }
</style>

<script>
function Log(containerID){
	var enabled = true, log = null;
	var container = document.getElementById(containerID);
	if(container){
		container.className = 'log';
		var h1 = document.createElement('h1');
		container.appendChild(h1);
		h1.innerHTML = 'Event Log';
		var h2 = document.createElement('h2');
		h2.innerHTML = 'Timings in s:ms after Reset';
		container.appendChild(h2);
		log = document.createElement('div');
		container.appendChild(log);
	}
	var lineCount = 0;
	this.reset = function(){
		this.baseTime = new Date();
		if(log) {
			log.innerHTML = '';
			var div = document.createElement('div');
			this.add('Reset: ' + (new Date()).toLocaleString(), -1);
		}
	}
	this.add = function(txt, timestampCode) {
		timestampCode = (!timestampCode) ? 0 : timestampCode;
		if(enabled && container) {
			var t = '';
			switch(timestampCode) {
				case -1://no timestamp
				break;
				default://timestamp in s:ms
					t = (new Date()) - this.baseTime;
					var s = Math.floor(t/1000);
					var ms = t%1000;
					ms = (ms<10) ? ('00' + ms) : (ms<100) ? ('0'+ms) : ms;
					t = '+' + s + ':' + ms;
			}
			var div = document.createElement('div');
			log.appendChild(div);
			div.innerHTML = t + ' <b>' + txt + '</b>';
			div.className = (++lineCount%2) ? 'entry even' : 'entry odd';
			if(lineCount === 1) { div.className += ' first'; }
		}
	};
	this.disable = function() { enabled = false; };
	this.enable = function() { enabled = true; };
	this.hide = function() { if(container) { container.style.display = 'none'; } };
	this.show = function() { if(container) { container.style.display = 'block'; } };
}

function createRequestObject(){
	var xmlhttp = null;
	if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }
	else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
	return xmlhttp;
}

function x() {
	var log = new Log('myLog');
	log.reset();
	log.add('function x called');
	var formid="reserve";
	var f = document.getElementById(formid);
	var keyValue = "";
	var keyValue = buildKeyValueSearchFunction(f, keyValue);
	log.add('keyValue: ' + keyValue, true);
	ajax_request = createRequestObject();
	ajax_request.open('POST', 'checkpaycycle.php', true);
	ajax_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

	ajax_request.onreadystatechange = function() {
		log.add('ajax readystate: ' + ajax_request.readyState);
		if (ajax_request.readyState == 4 ) {
			log.add('ajax status: ' + ajax_request.status);
			if (ajax_request.status == 200 || ajax_request.status == 0) {//0 allows local testing without proper server.
				if(ajax_request.responseText != '') {
					var txt = ajax_request.responseText;
					log.add('responseText:<br>' + txt.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
					document.getElementById("error_pgrid").innerHTML = ajax_request.responseText;
				}
			}
			else {
				log.add('Error');
			}
		}
	}
	ajax_request.send(keyValue);
	return false;
}

onload = function() {
	x();
};
</script>
</head>

<body>

<div id="myLog"></div>

<div id="error_pgrid"></div>

</body>
</html>

This approach has the added advantage of allowing you to see event timestamps and to review all logged events at your leisure after execution has finished.

Please note that in addition to adding the logger, I have also modified the ajax response handler so you can distiguish between different types of response.

Airshow

Shanti C 106 Posting Virtuoso · Answer 2 · 2010-10-07T15:01:03+00:00

Thanks Airshow and Paulrajj for your replies.

i have solved my issue...
that i have called this ajax function onsubmit, thats why the form is submmitted before ajax give response...this is the problem.

thank you.