2 Replies - 4378 Views - Last Post: 02 September 2009 - 08:53 AM

#1 sf0145   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 03-June 09

my first ajax guestbook 'app'

Posted 01 September 2009 - 10:29 PM

Hi everyone...

I've been really interested in using ajax on my php server webpages. Although, my first shot at making a php/ajax/mysql commenting system isn't going so well. I've looked at many tutorials and have followed the same patterns. I have an index.php which displays the comment form and existing comments. The action.php which actually posts the comment into mysql. And I have a main.js file with all of my javascript. The problem I am having is the function post_comment() isn't being called when I click the submit button... the page just refreshes. What's going on here? What am I missing? Here are the source files:

index.php
<html>
<head>
<title>Comment</title>
<script src="main.js" type="text/javascript"></script>
</head>

<div id="posts">

<?php
require 'mysql4.class.php';
$display = new Mysql();
$display->Select('*', 'comments', NULL, NULL);

for ($i=0; $i<$display->numResults; $i++) {
	echo '<strong>'.$display->data[$i]['name'].'</strong>: ';
	echo $display->data[$i]['comment'];
	echo '<br /><br />';
}

?>

</div>

<form name="add_post" action="" method="post">
Name: <input type="text" name="name" /><br />
Comment: <input type="text" name="comment" /><br />
<input type="button" name="submit" value="Post" onclick="post_comment()" />
</form>

<body>
</body>
</html>



action.php
<?php

require 'mysql4.class.php';

$name = $_POST['name'];
$comment = $_POST['comment'];

$newComment = new Mysql();
$newComment->Insert("comments", "(name, comment)", "('$name', '$comment'");

# clear the form after submission
unset($_POST['name']);
unset($_POST['comment']);

?>



main.js
// Globals Variables
var form;
var name;
var comment;
var posts;
var submit_button;

// setup the variables when the page loads
window.onload = initialize;

function initialize() {
	form = document.getElementById('add_post');
	name = document.getElementById('name');
	comment = document.getElementById('comment');
	posts = document.getElementById('posts');
	submit_button = document.getElementById('submit');
}

function post_comment() {
	var name = name.value;
	var comment = comment.value;
	var request = new getXmlHttpObject();
	
	// change the look of the sumbit button while processing request
	submit_button.disabled = 'disabled';
	submit_button.value = 'Posting...';
	
	// open the action php file (adds the comment to the mysql table)
	request.open('POST', 'action.php?string=' + new Date().getTime(), 'true');
	request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	request.onreadystatechange = function() {
		if (request.readyState==4) {
			
			// make the submit button value 'Post' again and re-enable it
			submit_button.disabled = '';
			submit_button.value = 'Post';
			posts.innerHTML = request.responseText;
		}
	}
	var data = 'name=' + name + '&comment' + comment;
	request.send(data);
}

// function from ** http://www.w3schools.com/XML/xml_http.asp **
function getXmlHttpObject() {
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject) {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}



Thanks for any advice,

-shaun

This post has been edited by sf0145: 02 September 2009 - 09:08 AM


Is This A Good Question/Topic? 0
  • +

Replies To: my first ajax guestbook 'app'

#2 noorahmad   User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: my first ajax guestbook 'app'

Posted 02 September 2009 - 02:35 AM

change your post button type to button
change this code <input type="submit" name="submit" value="Post" onclick="post_comment()" />
to : <input type="button" name="submit" value="Post" onclick="post_comment()" />
Was This Post Helpful? 0
  • +
  • -

#3 sf0145   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 03-June 09

Re: my first ajax guestbook 'app'

Posted 02 September 2009 - 08:53 AM

I changed that and just changed the onclick to sample() where is just spits out an alert box. But, the alert box takes about 30 seconds to show up... Still no success with my post_comment() javascript function. Any ideas?

Thanks,
-Shaun
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1