Page 1 of 1

cant get simple php and ajax to work together :(

Posted: Fri Jan 07, 2011 2:13 pm
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

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

Posted: Fri Jan 07, 2011 5:34 pm
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

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

Posted: Fri Jan 07, 2011 5:40 pm
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

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

Posted: Sat Jan 08, 2011 2:48 am
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>