Ajax Code Need Help Debugging.

[sonesay 7]

I did a tutorial on ajax started to write my own It was all working well under safari but when i tried to test it out on other broswers it doesnt seem to work at all. I've spend a few hours already going over it and cant seem to figure it out at this stage. Heres the code that works under safari

function createRequestObject(){	var request_o; //declare the variable to hold the object.	var browser = navigator.appName; //find the browser name	if(browser == "Microsoft Internet Explorer"){		/* Create the object using MSIE's method */		request_o = new ActiveXObject("Microsoft.XMLHTTP");	}else{		/* Create the object using other browser's method */		request_o = new XMLHttpRequest();	}	return request_o; //return the object}function add_on_time(event_id) { 		http = createRequestObject();			this.http.open('get', 'includes/_events_locked_add_on_time.php?event_id='+event_id);	this.http.onreadystatechange = handleUserslist;	this.http.send(null);	function handleUserslist() {		if (this.http.readyState == 4) {				 response = this.http.responseText;				document.getElementById('event_cpb_'+event_id).innerHTML = this.response;			}	}} 

Theres the example I been learning off

function createRequestObject(){	var request_o; //declare the variable to hold the object.	var browser = navigator.appName; //find the browser name	if(browser == "Microsoft Internet Explorer"){		request_o = new ActiveXObject("Microsoft.XMLHTTP");	}else{		request_o = new XMLHttpRequest();	}	return request_o; }var http = createRequestObject(); function getProducts(){		http.open('get', 'internal_request.php?action=get_products&id=' 			+ document.form_category_select.select_category_select.selectedIndex);	http.onreadystatechange = handleProducts; 	http.send(null);}function handleProducts(){	if(http.readyState == 4){ //Finished loading the response		var response = http.responseText;		document.getElementById('product_cage').innerHTML = response;	}}

I got a question about the handleProducts() when its been called inside the getProducts() it doesnt use the '(' ')' why is that? I've tried to include them to pass paramaters but it wont work. e.g. I define my function handleProducts(parm1) then call it inside http.onreadystatechange = handleProducts(parm1);

Edited October 19, 2007 by sonesay (see edit history)

[truefusion 3]

I don't believe having "this." in front of "http" is a possibility, although, i am amazed Safari managed to still work with it.

 

As for your question:

I got a question about the handleProducts() when its been called inside the getProducts() it doesnt use the '(' ')' why is that?

It wasn't added because it doesn't need it—the function has no custom defined options for it. I don't think JavaScript has a W3C standard.

[sonesay 7]

Thanks for your response. As for the example I was working off it works for a single query(request). What I am trying to do with my version is have a single fuction where I can pass a parameter to it e.g. 'event_id' So I could reuse the function for multiple buttons on my page if that makes any sense. The version i am working on works under safari and i was able to make queries and request for different parts of my page and did get a result. It is obviously not correct since It wont work on other broswers. Does anyone have an example of an Ajax request where you can reuse one function to request different results depending on the parameter being passed?

[truefusion 3]

Try this:

 

Replace

this.http.onreadystatechange = handleUserslist;

with

this.http.onreadystatechange = handleUserslist(event_id);

Then replace

function handleUserslist() {

with

function handleUserslist(event_id) {

Then place the function statement for handleUserslist outside of the function statement that it is in.

 

Save and try it again in other browsers.

[sonesay 7]

this.http.onreadystatechange = handleUserslist(event_id);
this.http.send(null);
}

function handleUsersliste(event_id) {
if (this.http.readyState == 4) {
this.response = this.http.responseText;
document.getElementById('event_cpb_'+event_id).innerHTML = this.response;
}
} linenums:0'>function add_on_time(event_id) { this.http = createRequestObject(); this.http.open('get', 'includes/_events_locked_add_on_time.php?event_id='+event_id); this.http.onreadystatechange = handleUserslist(event_id); this.http.send(null);} function handleUsersliste(event_id) { if (this.http.readyState == 4) { this.response = this.http.responseText; document.getElementById('event_cpb_'+event_id).innerHTML = this.response; }}
I changed the code to this. It stops working under safari with this version and firefox wont work either. I been browsering the net and found this link

http://forums.xisto.com/no_longer_exists/

I think this maybe what i'm looking for Im looking into it now.

Update: after looking at the example there and trying it out with no luck Im still at a lose. Found alot of Ajax frameworks out there but after some reading with most of the material going over my head lol Oh well Im not going to give up.
Edited October 20, 2007 by sonesay (see edit history)

[truefusion 3]

I use PrototypeJS for a project i'm working on. I find it easy to use, and it's very cross-browser compatible. I'm assuming at this point in stage, you're basically willing to accept anything that works and the way you want it to. If i get a similiar concept of yours to work with PrototypeJS, would you use it?

[sonesay 7]

Yeah I dont mind using a frame work. I did try the examples on that website with prototype.js but somehow I wasnt getting anything to work Im sure my path references was right I dont know what else it could be. So eventualy i came across the ext framework and starting going over the tutorials there it worked right away. If you get a working example of something similar i could use I will thanks.

[truefusion 3]

Judging by your coding, i believe this is what you wanted:This is using the Prototype Framework:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans.dtd;<html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en"><head><title>untitled</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">function getProducts(id, container){var form = $F(id);var opt = { onLoading: function(){$(container).innerHTML = 'Loading...';}, onSuccess: function(transport){$(container).innerHTML = transport.responseText;}}new Ajax.Request(form, opt);}</script></head><body><select id="products" onchange="getProducts('products', 'container');"><option>Pick One</option><option value="whatever.php">List 1</option><option value="whatever2.php">List 2</option></select><div id="container" style="border: 1px solid black; margin: 3px; padding: 3px; background: #EEE;"></div></body></html>

This should be easy to understand at first look, but if you need me to explain, let me know.

[sonesay 7]

Yeah it looks like the function im after i'm going to give it a try now thanks will update with results soon.

 

Update:

 

 

 

Seems to work fine under fire fox but in safari it gets stuck on the loading part.

 

Heres the code I am using

 

function add_on_time(id, container){			//var form = $F(id);	var opt = {	onLoading: function(){$(container).innerHTML = 'Loading...';},	onSuccess: function(transport){$(container).innerHTML = transport.responseText;}	//onSuccess: function(transport){document.getElementById(container).innerHTML = transport.responseText;}	}		new Ajax.Request('includes/_events_locked_add_on_time.php?event_id='+id, opt);		}

Both the first and second onSuccess: lines work under firefox but not safari. /sigh

 

another update: Ok I found some weird problems Im not sure whats causing it. I am using XAMPP for MacOS X 0.6.2.

 

- sometimes (1/10) it would finish loading on the safari page when the ajax request is started(ajax request is successful).

- I would get delays sometimes on the firefox page. i.e it would be stuck on loading... status just like the safari one.

 

Through out my page I have mulitple mysql queries which I use from $link

$elock_result = mysql_query($elock_query, $link) or die ("Cannot lock event");

 

// get event

$e1_query = "SELECT * FROM events WHERE e_id = ".$event_id;

$e1_result = mysql_query($e1_query, $link) or die("Cannot return events");

 

// query for events attendance

$ea_query = "SELECT * FROM events_attend WHERE ea_event_id =".$event_id;

$ea_result = mysql_query($ea_query, $link) or die("Cannot return members from events_attend"); linenums:0'>// set event to lock.$elock_query = "UPDATE events SET e_status = 'Active Locked' WHERE e_id =".$event_id;$elock_result = mysql_query($elock_query, $link) or die ("Cannot lock event");// get event$e1_query = "SELECT * FROM events WHERE e_id = ".$event_id;$e1_result = mysql_query($e1_query, $link) or die("Cannot return events");// query for events attendance$ea_query = "SELECT * FROM events_attend WHERE ea_event_id =".$event_id;$ea_result = mysql_query($ea_query, $link) or die("Cannot return members from events_attend");

I never close the connection with the mysql function could this be causing some problems?

 

There is 4 events being display on the page and 4 buttons to execute the ajax query for each event.

Does this have something to do with how many limit of queries I can make at one time? I restart my XAMPP and broswers sometimes it fixes it but then eventually comes back. Theres probably too many variables here to pin point whats exactly wrong. double /sigh

 

Update again:

 

Ok I checked it again today without changing the code. It works thanks alot Truefusion for your help. It does now and then get stuck in loading phase under safari and firefox so I guess its something to do with my server I mean if it works then it works but it lagging out shouldnt be from the code right? Well Im going to carry on using the protoype.js Framework for now to build the rest of the site.

Edited October 22, 2007 by sonesay (see edit history)

[truefusion 3]

Glad to hear that it works. But i, too, would blame the fact that you're not closing your MySQL connections. Having too many MySQL connections open at the same time adds load to your MySQL server, and i think by default, MySQL only allows 15 per user. It's a general rule of thumb to use mysql_close() at the end of any page that starts a connection to your MySQL server, but not all pages (e.g. the includes).