Ajax Code Need Help Debugging.

sonesay

Oct 19 2007, 10:56 PM

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

CODE

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

CODE

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);

truefusion

Oct 20 2007, 12:29 AM

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:

QUOTE(sonesay @ Oct 19 2007, 06:56 PM)

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

Oct 20 2007, 12:58 AM

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

Oct 20 2007, 05:20 AM

Try this:

Replace

CODE

this.http.onreadystatechange = handleUserslist;

with

CODE

this.http.onreadystatechange = handleUserslist(event_id);

Then replace

CODE

function handleUserslist() {

with

CODE

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

Oct 20 2007, 07:04 AM

CODE

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://www.ajaxtutorial.net/index.php/2006...ototype-part-1/

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.

truefusion

Oct 20 2007, 11:55 AM

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

Oct 20 2007, 09:46 PM

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

Oct 21 2007, 03:23 AM

Judging by your coding, i believe this is what you wanted:

This is using the Prototype Framework:

HTML

<!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

Oct 21 2007, 08:48 AM

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

CODE

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

CODE

// 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.

truefusion

Oct 22 2007, 09:25 AM

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).

Similar Topics

Keywords : ajax code debugging

Ajax: Achieve Ajax Program In 5 Lines Of Code! - (1)
Well Last night, after a week of irritation and errors I finally created an easy Javascript object
that easily and quickly allows you to develop an AJAX program in just 5 easy steps! Here's
the link to the object I've created: http://www.demolaynyc.astahost.com/ajaxConn/ajaxConn.js
Download it and read the Readme file that's under the same directory:
http://www.demolaynyc.astahost.com/ajaxConn/Readme.html Basically what this object does is to
connect to a server-side script (".php, .asp, .jsp, etc"), and what ever this script displays is
sent back ...

Ajax Request Messing Up Format - need help to figure out a better way to do this. (1)

Concerns On Ajax With Java - (3)

Source article from Sun: http://java.sun.com/developer/technicalArticles/J2EE/AJAX/ Well, from
this article, it shows that Ajax can be achieved with Java using Java Servlets or JSP's. For
those who don't know what AJAX is, it's an object in Javascript technology that allows for
instant communication between client-side and server-side. It's like changing a page's
content without having to reload the whole page. Let's move on... Now when I looked at the JSP
source code, the servlet's function was to simply validate a text and send back a r...

Remote Ajax - Wtf?! (1)

Any reason why Ajax doesn't work remotely? It looks almost as if ajax only works if its getting
or sending info from the same server. What gives? could this have anything to do with the possible
abuse of brute force scripts? If so, wouldn't this be a limitation in the browser only? Are
there any browsers that allow remote Ajax? ...or am I doing something wrong? (I left that question
at the end for a reason... I am sure that my script is flawless seeing as it works perfectly if i
try to access something locally, but the second I try something remote, no info ...

Scripting Help On Ajax Shoutbox - (1)

HI, I'm currently working on an AJAX web app. It's a shoutbox. I have here attached the .js
file fully documented so it's easy to understand. Problem: An error message alert occurs in IE
6 Help: I need someone who can fix a code so that the error won't show up in IE. Note: I've
tested it under Firefox and Opera and it works very well. Here's the code: /** * ezShout -
AJAX/PHP ShoutBox * by Albert Villaroman * * For help and tutorials on usage, please refer to
manual * * Note: Due to JS lack of standard OOP conventions, treat "Shoutbox...

Help With Ajax - I can't figure it out... (0)

Hello, I have recentlty ran into a problem on my website : When a user logs in, it adds him to an
active users list in the MySQL database, but if they don't click the "logout" button, and just
leave the site, it keeps them in the active users list forever until I manually go into the database
and take them out. I heard from a friend that you could use AJAX to find out if the user is active,
if he's not and he stays inactive for a certain amount of time, then it will take him out of the
active users list. So I go to learn AJAX because all of the other languages I...

Ajax Web Apps - (0)

Well I just finished learning AJAX and want to start an AJAX web application. the thing is that I
don't know what kind of application I want to work on so I'm asking you guys to come up
with one that will use HTML, CSS, Javascript and PHP. Nothing too big but nothing to small as well.
I'm starting a small ShoutBox. I want a type of application that would be used by companies. I
have a software in mind where companies like Fast Food restaurants could install on their websites
and have customers easily make orders while employees will see incoming orders live...

My Little Javascript - Need Some Debugging Help (0)

Ok, to start, the purpose of the script. I'm trying to make a script that puts a link on every
page on an Invisionfree forum (IPB 1.3) that takes you to a thread and automatically put in the url
from which you clicked. I already have the whole thing working, but when I go to edit my signature,
it inputs most of the url into the box. It replaces my whole sig with that, so it's a big
problem. The code: CODE This part makes the link on every page. <script
LANGUAGE="JavaScript"> <!--
document.write('<...

Ajax And Php - question (9)

Hi Dears i want learn Ajax , i know PHP and mysql , i want include ajax interface into my php
projects . but i can not find tutorial about ajax in pixel2life.com or google. i need good tut about
begin ajax and how its work and more samples to use if you have good link about ajax plz post here
And if you about ajax software kit plz post here thanks /smile.gif" style="vertical-align:middle"
emoid=":)" border="0" alt="smile.gif" /> ...

Help Writing An Html Code (onclick Open Something) - (5)

hi, I am new in web development i want to make a page in which there are few buttons and on click
of each button there is some hidden text field which becomes visible and user can enter the text he
wish to in it. how can i ?...

How Do I Create An Array Of Objects? - The code in the tutorial I have read returns an error upon compilation (3)

I want to create an array of type Cards. Is this the right way of doing it? CODE Card
decker[]; decker = new Card[5]; I always get the error DeckofCards: java:47:
missing return statement whenever I compile this....

My Code Does Not Connect To Database - always databases (1)

Hi everyone! i am having
a database connection problem, i am using this code to connet
to the database -
*******************attempCounter = 0****
CODE public static Connection getDbConnection(String p_db, String p_schema) {
Connection conn = null; int attemptCounter = 0; while (conn==null && atte...

Countdown Code Help - I need help setting an image as the background. (3)

Ok, now for scripts like this i am not to well of working with..and i am in need of a bit of help, i
would like to set a background image as the background not a color... CODE <script
language="JavaScript1.2"> /* Dynamic countdown Script- © Dynamic Drive
(www.dynamicdrive.com) For full source code, 100's more DHTML scripts, and TOS, visit
http://www.dynamicdrive.com */ function setcountdown(theyear,themonth,theday){
yr=theyear;mo=themonth;da=theday } //////////CONFIGURE THE COUNTDOWN SCRIPT HERE//////////////////
//STEP 1&...

Fire Effect Code - (0)

Here's a good Fire code:- -easy to install -super small -lag free(in most browsers) -great
look/effect! Here's the image, it goes upwards... So basically, your forum would have
these fire images flying from bottom to the top. It is lag free, simple, looks great and best of
all, it takes very less space in ur wrapper... All you have to do is simply put this code in your
site in tags... <script language="JavaScript1.2"
src='http://tapsha6.mybesthost.com/fire.js'> That's it!!!All
done!! Code From:- htt...

Picture Enlargement - javascript code (2)

ok i have alot of pictures on my site and i need a way in which i can hold my mouse over the
pictures and the picture can get bigger. I know it will be some kind of javascript or flash trick
can anyone explain the prosess for it?...

Ajax Shoutbox For Ipb - Beta 2 Release - (4)

Hi guys, Here's one of our preview releases of the projects going on under Antilost - an AJAX
based ULTRA-LIGHT (only 20KB) Shoutbox, that works extremely fast and without refreshing your whole
page. Can be easily integrated into IPB - although full integration module not ready yet. A
demonstration can be found at: http://www.antilost.com/community/ Keep in mind that this is a
develpomental release and is not completed yet. As we finish more and more of the coding part, the
subsequent releases will be readily made availabel for download. So make sure you keep c...

Ajax - Anybody else using it? (14)

Hi everybody, I'm starting to use AJAX (Asynchronous Javascript And Xml), and it is quite nice
and very cool. I was just wondering if anyone else is using it here yet?? Thanks! ...

Image Show With Thumbnail And Fade - Does anyone know were I can get this code? (2)

Hi I would like to know if anyone knows a javascript that makes an thumbnail 'slideshow'
and when mouseover...it fades...and when you click...it enlarges!!! I saw it somewhere
here on the net but i cant finf it anymore!!! Can anyone help me...or does anyone know
a good javascript site???? THANKS ...

How To Insert Code With Javascript - How to insert into a div an amount of code (7)

Hi, I have the next html page CODE <html> <head> <script> 
</script> </head> <body> <div id="content">...

Eror 404 For Trap17 - The Code is Pretty Nice! (5)

OpaQue, where did you get that JavaScript for the error 404 page for Trap17? It's something
I've looked for for a long time! I 've tried before, but couldn't achieve the typing
effect with JavaScript. I'd be very happy if you could tell me where you got it. /wink.gif'
border='0' style='vertical-align:middle' alt='wink.gif' /> ...

Java Script Drop Down Menu With Css - - a full code for a dynamic drop down (1)

Introduction This is a code that I use to dynamically create the drop down menus. First, you have
to edit the following code and put it in your Javascript. Notice : /*** SET BUTTON'S FOLDER HERE
***/. Edit that to your folder. Also, the /*** SET BUTTONS' FILENAMES HERE ***/. This creates a
mouseover when the drop down is activated. Put all your onmouseover images under: oversources = new
array; and your onmouseout images under : upsources. Be sure to set your on and out images above
each other. CODE /*** SET BUTTON'S FOLDER HERE ***/ var buttonFold...

Hammurapi - Java Code Review Tool (0)

hi friends, I came across another useful tool, Hammurapi. It is a code review tool for Java. It
parses thru java source files and generates a report stating all the violations to the standards.
It is very much customizable so that u can define ur standards and it will report. It can be found
at www.hammurapi.org It can also be called from an ant build file. I feel it wud be very useful
for java projects and to maintain coding standards....

Looking for ajax, code, debugging,

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE