cant get simple php and ajax to work together :(

[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

[jcbones]

You are calling showMessage in your form, but you function name is showUser

[busby]

sorry that was a typo the function actually is showMessage...ive edited the original post to suit.

 

so...any ideas?

[jcbones]

Yep, run the code in firefox, and open up the error console (cntrl+shift+j). Clear the console, then submit the form.  Look at the console, and it will de-bug the javascript for you.

[busby]

done that...there are no javascript errors..thats why its so difficult i just cant see wots wrong.

 

[busby]

i think its something to do with the variable its trying to GET on the php page to use in the SQL statement...but i really cant see whats wrong or how to solve it...not good enough at this to spot the problem

[taquitosensei]

in firefox you can see the url that it's using you can copy and paste that in a browser window to see if you're getting any output from the php page. If all you get is a white screen it's possible that you've got an error in your php code. You can paste this

ini_set('display_errors',1);
error_reporting(E_ALL);

at the top of your php page then refresh to see if there's any error on your php page.

 

[busby]

could you explain that a little more? i can see what url? do you want me to open the php file in a browser?

 

if that is what your saying then ive just tried that and i do get this error:

 

Notice: Undefined index: id in C:\wamp\www\uni\oswp\assignment\bank\showmessage.php on line 14

 

line 14 is:

 

$id=$_GET["id"];

 

now i know that error means the variable id doesnt exist...but it should...take a look at the javascript section of the code in my original post.

 

i took this code from w3schools and amended it to suit my needs..i just cant fix this

[jcbones]

Try changing:

<select name="users" onchange="showMessage(this.value)">

 

To:

<select name="users" onchange="showMessage(this.options[this.selectedIndex].value)">

[busby]

ok i made that change...it didnt make any difference though...when i select a title from the drop down it displays the number "1" instead of the message i want...because 1 is the value of the option tag if you look at the html code for the form and select tag you'l see what i mean...but i dont really understand why its displaying 1

 

this is so confusing coding really isnt my strong point..i urgently need this for an assignment though

[jcbones]

Post your updated code.

[dragon_sa]

what happens if you do this

<select name="str" id="str" onchange="showMessage(this.value)">

 

from what I can see you have a function showmessage(str) but the name of the form is users, I added id as I couldnt remember which one it uses

 

also if the ajax part isnt working make sure this is at the top of the page using it

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 

I couldnt see that in your code here but you may not have included that bit in your post

[jcbones]

what happens if you do this

<select name="str" id="str" onchange="showMessage(this.value)">

 

 

I don't believe you can get an option value out of a select box, with that javascript.  You must use the one I posted above.  Although, I have been known to be wrong up to 48 times per day, just ask the wife.

[dragon_sa]

I don't believe you can get an option value out of a select box, with that javascript.

 

You are able to do it this way, I use the exact same method on a country select box which then populates a state select box with the states of the selected country

 

here is my working example of that

 

in the head section
<script language="javaScript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
	var xmlhttp=false;	
	try{
		xmlhttp=new XMLHttpRequest();
	}
	catch(e)	{		
		try{			
			xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e){
			try{
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e1){
				xmlhttp=false;
			}
		}
	}

	return xmlhttp;
    }

function getState(codeId)
{
   var strURL="statecall.php?countrycode="+codeId;
   var req = getXMLHTTP();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
 // only if "OK"
 if (req.status == 200)
         {
    document.getElementById('statediv').innerHTML=req.responseText;
 } else {
   	   alert("There was a problem while using XMLHTTP:\n" + req.statusText);
 }
       }
      }
   req.open("GET", strURL, true);
   req.send(null);
   }
}
</script>

 

then the select box as follows

 

<tr> <td align="right">Country:  <select name="country" id="country" onchange="getState(this.value);">
    		<option value="--Please Select Country--">--Please Select Country--</option>
	<?php  // print category combo box
		$sql = "SELECT name,ccode FROM countries ORDER BY name ASC";
		$result = mysql_query($sql);
		while ($result_row = mysql_fetch_array($result)) {
		$cname = $result_row["name"];
		$cid = $result_row["ccode"];
		echo "<option value='$cid'";
		if (($_POST['country']) == ($cid)) { echo "selected";
		}
		echo ">$cname</option>\n";
		}
		?>
  </select>  <font color="#FF0000" size="+1"><b>R</b></font>  </td>
    </tr>
<tr> <td align="right">State/Province:  <div id="statediv"><?php include('statecall.php'); ?></div>  <font color="#FF0000" size="+1"><b>R</b></font>  </td>
    </tr>

 

the statecall.php does the database query when it receives the value for the ajax call