Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Basic AJAX code problem

AJAX ajax

  • Please log in to reply
17 replies to this topic

#1 DEViANT

DEViANT

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 265 posts

Posted 03 September 2010 - 04:41 AM

I don't really know AJAX... But I need to use a very simple AJAX function to pass two variables in a $_GET method to another PHP file. I've tested the PHP file and it reads and executes the variables correct. So all I can think is that the AJAX side is incorrect. Could one of you AJAX guru's perhaps take a look at it for me and tell me whats wrong? 90% of it is copied & pasted and edited from online resources.

function doSwitch(id,str)
{
	document.getElementById(id).setAttribute("class", "bad");
	
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
  		xmlhttp=new XMLHttpRequest();
  	}
	else
  	{// code for IE6, IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	
	xmlhttp.open("GET","update.php?id="+id"&word="+str,true);
	xmlhttp.send();
}

  • 0

#2 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 03 September 2010 - 07:22 AM

You need to code what it must do once it retrieves its response:
xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    // Do someting with the "xmlhttp.responseText"
  }
}

put this before the "xmlhttp.open"
  • 0

#3 DEViANT

DEViANT

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 265 posts

Posted 03 September 2010 - 07:26 AM

What If I don't need anything on the page itself to update?

I've changed it to update the object class once it receives the respone but still nothing happens :

function doSwitch(id,str)
{
	
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
  		xmlhttp=new XMLHttpRequest();
  	}
	else
  	{// code for IE6, IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	
	xmlhttp.onreadystatechange=function()
	{
  		if (xmlhttp.readyState==4 && xmlhttp.status==200)
  		{
			document.getElementById(id).setAttribute("class", "bad");	
  		}
	}
	xmlhttp.open("GET","update.php?id="+id"&word="+str,true);
	xmlhttp.send();

}

  • 0

#4 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 03 September 2010 - 08:30 AM

but still nothing happens

Does that include the fact that the id-element doesn't receive the 'bad' class?
  • 0

#5 DEViANT

DEViANT

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 265 posts

Posted 03 September 2010 - 08:54 AM

Indeed it does. Not even the class gets updated. I should mention that the php page accepting the two variables instantiates a new class and uses these passed variables. The page content is as follows:

<?php

$id = $_GET['id'];
$word = $_GET['word'];

if(isset($id) && isset($word))
{
	include('lib/class_dbcon.php');
	$connect = new doConnect();

	include('lib/class_update.php');
	$update = new update($id,$word);

	$connect->disc();
} else {
	echo "Nice try.";
}
?>

  • 0

#6 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 03 September 2010 - 09:08 AM

Could you tell what the alert gives you 4 times?
xmlhttp.onreadystatechange=function()
	{
                [COLOR="red"][B]alert(xmlhttp.readyState + ' && ' + xmlhttp.status );[/B][/COLOR]
  		if (xmlhttp.readyState==4 && xmlhttp.status==200)
  		{
			document.getElementById(id).setAttribute("class", "bad");	
  		}
	}

  • 0

#7 DEViANT

DEViANT

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 265 posts

Posted 03 September 2010 - 09:17 AM

Thats odd... No allert message is being given at all? I added everything correctly did I not?

<html>
<head>
<script type="text/javascript">
function doSwitch(id,str)
{
	
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
  		xmlhttp=new XMLHttpRequest();
  	}
	else
  	{// code for IE6, IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	
	xmlhttp.onreadystatechange=function()
	{
	alert(xmlhttp.readyState + ' && ' + xmlhttp.status );
  		if (xmlhttp.readyState==4 && xmlhttp.status==200)
  		{
			document.getElementById(id).setAttribute("class", "bad");	
  		}
	}
	xmlhttp.open("GET","update.php?id="+id"&word="+str,true);
	xmlhttp.send();

}
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="main">
<?php

echo $string;

?>
</body>
</html>

Also, Im running this on my apache server installed on my ubuntu notebook. But that shouldnt change anything should it
  • 0

#8 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 03 September 2010 - 09:21 AM

Is that all the code you're using?
If so, what is calling the doSwitch(id, str) method to begin with?
  • 0

#9 DEViANT

DEViANT

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 265 posts

Posted 03 September 2010 - 09:27 AM

Well there are some php classes and functions being ran before the first <html> tag.

//Sensitive data removed by user

'<a class="good" id="' . $counter . '" onClick="doSwitch(\'' . $counter . ',' . $word2 . '\');">' . $word2 . '</a>'

Edited by DEViANT, 03 September 2010 - 01:30 PM.

  • 0

#10 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 03 September 2010 - 09:37 AM

onClick="doSwitch(\'' . $counter . ',' . $word2 . '\')
let's say $counter= 1, and $word2= "someWord"

Then this becomes
onClick="doSwitch('1,someWord')";
Which i think Javascript will interpret as doSwitch with 1 string as parameter, here the String is "1,someWord" --> and it won't find a function doSwitch with 1 parameter.
(you can put an alert at the start of doswitch to see if it's called )

So maybe you need more \' :
onClick="doSwitch(\'' . $counter . '\', \'' . $word2 . '\')

  • 0

#11 DEViANT

DEViANT

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 265 posts

Posted 03 September 2010 - 09:48 AM

Well that definitely had an affect on it. I fixed it to have extra single quotes, but this made no change. I then changed my function to only do the following :

function doSwitch(id,str)
{
document.getElementById(id).setAttribute("class", "bad");
}

and this works fine. The only thing thats left to cause the problem has to be the removed code... I tried accessing the php file with my browser by going to update.php?id=121&word=someword and the script did its thing 100% correctly.

My problem must be occuring somwhere here:
{
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
  		xmlhttp=new XMLHttpRequest();
  	}
	else
  	{// code for IE6, IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	
	xmlhttp.onreadystatechange=function()
	{
	alert(xmlhttp.readyState + ' && ' + xmlhttp.status );
  		if (xmlhttp.readyState==4 && xmlhttp.status==200)
  		{
	  		document.getElementById(id).setAttribute("class", "bad");
  		}
	}
	xmlhttp.open("GET","update.php?id="+id"&word="+str,true);
	xmlhttp.send();	
}

  • 0

#12 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 03 September 2010 - 10:05 AM

Honestly i got no idea what's wrong with the Javascript :(
Throw a bunch of alerts in there and see where you get..
I know that in the latest IE versions(F12) or chrome(rightclick: inspect element -> scripts) you can also debug javascript.

super-long shot: try declaring var xmlhttp at the start.
I'd be surprised if it's this, as W3schools doesn't do it.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download