Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Ajax Code Need Help Debugging.
sonesay
post Oct 19 2007, 10:56 PM
Post #1


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 640
Joined: 20-June 07
From: Auckland
Member No.: 45,102
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);

This post has been edited by sonesay: Oct 19 2007, 11:06 PM

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Oct 20 2007, 12:29 AM
Post #2


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,858
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
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.

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Oct 20 2007, 12:58 AM
Post #3


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 640
Joined: 20-June 07
From: Auckland
Member No.: 45,102
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?




(list)

Go to the top of the page
 
+Quote Post
truefusion
post Oct 20 2007, 05:20 AM
Post #4


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,858
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
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.

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Oct 20 2007, 07:04 AM
Post #5


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 640
Joined: 20-June 07
From: Auckland
Member No.: 45,102
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.

This post has been edited by sonesay: Oct 20 2007, 10:14 AM

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Oct 20 2007, 11:55 AM
Post #6


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,858
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
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?

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Oct 20 2007, 09:46 PM
Post #7


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 640
Joined: 20-June 07
From: Auckland
Member No.: 45,102
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.

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Oct 21 2007, 03:23 AM
Post #8


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,858
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
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" />
&lt;script type="text/javascript" src="prototype.js"></script>
&lt;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.

(list)

Go to the top of the page
 
+Quote Post
sonesay