probably a simple javascript error (AJAX related but not really ajax!!)

**elduderino** · Jun 13, 2007 14:32

Hi,

IM having a problem with my ajax script but im sure its javascript related ( im not too great with the dom at yet!)

Heres the relevant code first:

Code JavaScript:

function send_message(msg) {
    var message_id = msg.id;
   	var updated = document.getElementById("textbox");
   	var updated_txt = updated.TextNode;
   	var url = "edit_message.php";
   	request.open("POST", url, true);
   	request.onreadystatechange = show_confirmation;
   	request.send("message_id=" + escape(message_id) +
                   "message=" + escape(updated_txt));
   }
 
   function show_confirmation() { 
   alert('hello');
    if(request.readyState == 4) {
     var confirmation = request.responseText;
     var div = document.getElementById("textbox");
   	 var confirmation_area = div.TextNode;
   	 replaceText(confirmation_area, confirmation);
 
    }
   }

and then the whole file is below followed by the php script.....i know its a lot but im hoping it just a silly javascript error ive made. The request to the server in getmessage() and openmessage() works fine and the text gets put in the textarea but when i edit it and press submit nothing happens...i dont have a clue how to debug it....ive alerted inside the show_confirmation function and i get 4 hellos back ( 1 for each readystate)...if i could work out a way to see if the values are getting in to my php script it might help but i cant figure a way as the ajax kinda by passes it all. Nothing in the db gets updated.

Any ideas? If someone could even suggest a good way to debug or a way to see if the values are even getting to my php script ( as i say that alert works but i dont know if thats a sign its working or not)

Code JavaScript:

<html>
  <head>
  <title>test page</title>
  <script type="text/javascript" src="text-utils.js"></script>
  <script language="javascript" type="text/javascript">
 
 
  var request = null;
 
  function createRequest() {
    try {
      request = new XMLHttpRequest();
    } 
    catch (trymicrosoft) {
      try {
        request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } 
      catch (failed) {
      request = null;
      }
      }
    }
 
 
     if (request == null)
       alert("Error creating request object!");
   }
 
   function get_message(msg) {
    var message_id = msg.id;
    createRequest();
    var url = "edit_message.php?message_id=" + escape(message_id);
    request.open("GET", url, true);
    request.onreadystatechange = open_message;
    request.send(null);
 
   }
 
   function open_message() {
    if(request.readyState == 4) {
     var message_txt = request.responseText;
     var message_area = document.getElementById("textbox");
     replaceText(message_area, message_txt);
 
    }
   }
 
   function send_message(msg) {
    var message_id = msg.id;
   	var updated = document.getElementById("textbox");
   	var updated_txt = updated.TextNode;
   	var url = "edit_message.php";
   	request.open("POST", url, true);
   	request.onreadystatechange = show_confirmation;
   	request.send("message_id=" + escape(message_id) +
                   "message=" + escape(updated_txt));
   }
 
   function show_confirmation() { 
   alert('polo');
    if(request.readyState == 4) {
     var confirmation = request.responseText;
     var div = document.getElementById("textbox");
   	 var confirmation_area = div.TextNode;
   	 replaceText(confirmation_area, confirmation);
 
    }
   }
 
 
 
 
  </script>
</head>
<body>
<h1 style="margin-top: 30px;">Requesting using AJAX</h1>
 <table style="float: left; width: 30px;">
<?php
require_once('../mysql_connect.php');
$sql = "SELECT * FROM message ORDER BY message_id";
$query = mysql_query($sql);
while($row = mysql_fetch_assoc($query)) {
  $message = $row['message'];
  $author = $row['author'];
  $message_id = $row['message_id'];
  ?>
 
    <tr>
      <td><?php echo substr($message, 0, 30); ?></td><td><span style="color: red; font-weight: bold;"><?php echo $author; ?></span></td><td>
      <form>
 
      <input type="button" id="<?php echo $message_id; ?>" value="edit" onClick="get_message(this);" /></td>     </tr>
 
 
 
 
  <?php
 
}
 
?>
  </table>
 <textarea style="width: 300px; height: 400px; border: 1px solid #ccc; margin-left: 20px;" id="textbox"></textarea>
  <input type="button" id="<?php echo $message_id; ?>" value="submit" onClick="send_message(this);" /></form>
 
 
    </div>
 
 
</body>
</html>

**elduderino** · Jun 13, 2007 15:30

Ok so ive uncovered a problem...when alerting back the variables in my send_message() function the message_id is getting populated fine but the updated_txt one just says undefined when i alert it back. This is probably the problemo but i dont know how to access the text in that textarea any other way...it looks ok to me but as i say im kinda new to the DOM

Ive also checked in my javascript console and i dont have any errors

any ideas?

**elduderino** · Jun 14, 2007 12:34

ok it was an ajax problemo afterall! I needed a http header in there to let the server know the data was in the $_POST.....it mkaes my function look like this:

Code JavaScript:

function send_message(msg) {
    var message_id = msg.id;
    var updated = document.getElementById("textbox");
    var updated_txt = updated.TextNode;
    var url = "edit_message.php";
    request.open("POST", url, true);
    request.onreadystatechange = show_confirmation;
   AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send("message_id=" + escape(message_id) +
                   "message=" + escape(updated_txt));
   }

User Tag List

Thread: probably a simple javascript error (AJAX related but not really ajax!!)

Thread Tools

Display

probably a simple javascript error (AJAX related but not really ajax!!)

Bookmarks

Bookmarks

Posting Permissions