cant get simple php and ajax to work together :(

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
busby
Forum Newbie
Posts: 13
Joined: Tue Nov 02, 2010 4:25 pm

cant get simple php and ajax to work together :(

Post by busby »

hey...im trying to display messages stored in a database on a page using ajax.

a user should choose from a drop down list the title of the message and then on selection that message should appear just below.

but i cant seem to do it and i dont know why there is no errors in what ive got so far.

here is the code for the drop down box where the user would select the title.

<form>
<select name="users" onchange="showMessage(this.value)">
<option value="">Select a message:</option>
<?php while($rows = mysql_fetch_array($results))
{?>
<option value="1"><?php echo $rows['heading']; ?></option>
<?php } ?>
</select>
</form>
<br />
<div id="txtHint"><b>Message info will be listed here.</b></div>


the drop down is successfully populated with the correct titles.

here is the javascript in the HEAD of the same page:


<script type="text/javascript">
function showMessage(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","showmessage.php?id="+str,true);
xmlhttp.send();
}
</script>


and here is the php file which is used to display the message upon selection.

<?php
$id=$_GET["id"];

$cust = new customer;

$sql="SELECT * FROM messages WHERE m_id = '".$id."'";

$result = mysql_query($sql);
?>
<table border='1' cellspacing="4">
<?php
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<th>Heading</th>";
echo "<th>Message</th>";
echo "</tr>";
echo "<tr>";
echo "<td>" . $row['heading'] . "</td>";
echo "<td>" . $row['message'] . "</td>";
echo "</tr>";
}
?>
</table>



could someone please take a look at this and see whats wrong? ive spent so long on it. if you could tell me how to correct it it would be great
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: cant get simple php and ajax to work together :(

Post by social_experiment »

I made the following additions and it worked

Code: Select all

<form action="" method="GET">
and

Code: Select all

xmlhttp.open("GET","file.php?id=" +str,true);

In the last example i jsut added a space before the + sign.
Hth
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
busby
Forum Newbie
Posts: 13
Joined: Tue Nov 02, 2010 4:25 pm

Re: cant get simple php and ajax to work together :(

Post by busby »

you got it to show the content of a message based in the title selected from the drop down?

i made those changes you mentioned but it didnt make any difference.

When i select a title it just displays the number "1" where the content should be displayed.

"1" being the value of the option tag in the form. take a look at the original code for the select box you'l see the option tag has "value="1""

and that is what id getting displayed instead of the actual message

i just dont know how to fix it
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: cant get simple php and ajax to work together :(

Post by social_experiment »

busby wrote:you got it to show the content of a message based in the title selected from the drop down?
Yeah. Since i don't have your database to work from i improvised

Code: Select all

<form action="" method="GET">
<select name="users" onchange="showMessage(this.value)">
<option value="">Select a message:</option>
<option value="1">One</option>
</select>
</form>
This was my form. I selected 'One' from the dropdown list and based on that value, i echoed information from my database. Complete script below.

Code: Select all

<script type="text/javascript">
function showMessage(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","file.php?id=" +str,true);
xmlhttp.send();
}
</script>
</head>


<form action="" method="GET">
<select name="users" onchange="showMessage(this.value)">
<option value="">Select a message:</option>
<option value="1">One</option>
</select>
</form>

<div id="txtHint"><b>Message info will be listed here.</b></div>

<?php
$id=$_GET["id"];

//$cust = new customer;

$sql="SELECT * FROM admin WHERE user_id = '".$id."'";

$result = mysql_query($sql);
?>
<table border='1' cellspacing="4">
<?php
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<th>Heading</th>";
echo "<th>Message</th>";
echo "</tr>";
echo "<tr>";
echo "<td>" . $row['username'] . "</td>";
echo "<td>" . $row['password'] . "</td>";
echo "</tr>";
}
?>
</table>
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Post Reply