Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Problem building AJAX/PHP guestbook

mysqli innerHTML ajax

  • Please log in to reply
10 replies to this topic

#1 Coldhearth

Coldhearth

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 88 posts

Posted 28 November 2009 - 05:15 AM

I'm currently starting to build some applications in PHP to learn the language and I've started with a guestbook.
Everything works except for the part that's supposed to add a message to the guestbook.

The problem isn't the PHP code for adding a message but the AJAX...
Instead of adding a post and doing it in the background it keeps going to the addmessage.php page... and because it's supposed to be AJAX there shouldn't be a page reload...

If anyone can help me solve this problem and give me some tips on what to add to the guestbook like security or other stuff I forgot...

My code is:

addmessage.php
<?php

require_once("config.php");

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$query = "INSERT INTO posts (name, email, message) VALUES ('$name','$email', '$message')";

$result = mysqli_query($conn, $query) or diet("Error executing insert query.");

if($result){
echo "Message added";
}

?>


showmessages.php
<?php

require_once("config.php");

$query = "SELECT * FROM posts ORDER BY id DESC";

$result = mysqli_query($conn, $query) or die("Error executing read query.");

while($row = mysqli_fetch_object($result)){
if(mysqli_num_rows($result)>0){
$name = $row->name;
echo $name . "<br />";
}else{
echo "No messages in the guestbook yet...";
}
}

?>


Index.php
<html>
<head>
<title>Guestbook V1.1</title>
<script type="text/javascript">

// Used in showMessages NOT IN getXmlHttpObject()!!!
var xmlHttp;

function showMessages(){
xmlHttp = getXmlHttpObject();
if(xmlHttp == null){
alert("Your browser does not support Javascript");
return;
}

var url = "showmessages.php";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

function postMessage(){
xmlHttp = getXmlHttpObject();
if(xmlHttp == null){
alert("Your browser does not support Javascript");
return;
}
var name = document.postform.name.value;
var email = document.postform.email.value;
var message = document.postform.message.value;
var url = "addmessage.php?name="+name+"&email="+email+"&message="+message;

xmlHttp.onreadystatechange=statechanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

function stateChanged(){
if(xmlHttp.readyState == 4){
document.getElementById("messages").innerHTML=xmlHttp.responseText
}
if(xmlHttp.readyState == 3){
document.getElementById("messages").innerHTML="Loading3...";
}
if(xmlHttp.readyState == 2){
document.getElementById("messages").innerHTML="Loading2...";
}
if(xmlHttp.readyState == 1){
document.getElementById("messages").innerHTML="Loading1...";
}
if(xmlHttp.readyState == 0){
document.getElementById("messages").innerHTML="Loading0...";
}
}

function getXmlHttpObject(){
var xmlHttp = null;
try{
//Firefox, opera, safari,...
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
//IE
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//IE other
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

</script>
</head>
<body>

<h3>Guestbook V1.1</h3>
<div id="messages">
<script type="text/javascript">
showMessages();
</script>
</div>

<h3>Post a message</h3>
<div id="postform">
</div><form name="postform" id="postform" method="post" action="addmessage.php">
Name:*<br />
<input type="text" name="name" id="name" /><br />
Email:*<br />
<input type="text" name="email" id="email" /><br />
Message:*<br />
<textarea cols="60" rows="6" name="message" id="message"></textarea><br />
<input type="reset" value="Reset" />
<input type="submit" value="Post message" onclick="postMessage()" />
</form>
</div>

</body>
</html>

  • 0

#2 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 28 November 2009 - 05:24 AM

your AJAX sends the data with a GET and your PHP reads the POST:ed data. thats probably why it doesn't work.
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#3 Coldhearth

Coldhearth

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 88 posts

Posted 28 November 2009 - 05:37 AM

Changed the 2 sends to POST and now it doesn't do anything anymore... :P
It just flickers my page and empties the form... no posts added to the DB...
  • 0

#4 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 28 November 2009 - 05:43 AM

how do you add your data by POST in AJAX now then?
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#5 Coldhearth

Coldhearth

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 88 posts

Posted 28 November 2009 - 06:37 AM

Erhm... :P that's a good question... can you please explain this to me? :)
  • 0

#6 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 28 November 2009 - 07:33 AM

if you just change your php to accept get instad of post, and change back your ajax call to get, I think it will work.
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#7 Coldhearth

Coldhearth

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 88 posts

Posted 28 November 2009 - 09:33 AM

Okay my script is like this now:

addmessage.php
<?php

require_once("config.php");

$name = $_GET['name'];
$email = $_GET['email'];
$message = $_GET['message'];

$query = "INSERT INTO posts (name, email, message) VALUES ('$name','$email', '$message')";

$result = mysqli_query($conn, $query) or diet("Error executing insert query.");

if($result){
echo "Message added";
}

?>


showmessages.php
<?php

require_once("config.php");

$query = "SELECT * FROM posts ORDER BY id DESC";

$result = mysqli_query($conn, $query) or die("Error executing read query.");

while($row = mysqli_fetch_object($result)){
if(mysqli_num_rows($result)>0){
$name = $row->name;
echo $name . "<br />";
}else{
echo "No messages in the guestbook yet...";
}
}

?>


index.php
<html>
<head>
<title>Guestbook V1.1</title>
<script type="text/javascript">

// Used in showMessages NOT IN getXmlHttpObject()!!!
var xmlHttp;

function showMessages(){
xmlHttp = getXmlHttpObject();
if(xmlHttp == null){
alert("Your browser does not support Javascript");
return;
}

var url = "showmessages.php";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

function postMessage(){
xmlHttp = getXmlHttpObject();
if(xmlHttp == null){
alert("Your browser does not support Javascript");
return;
}
var name = document.postform.name.value;
var email = document.postform.email.value;
var message = document.postform.message.value;
var url = "addmessage.php?name="+name+"&email="+email+"&message="+message;
xmlHttp.onreadystatechange=statechanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

function stateChanged(){
if(xmlHttp.readyState == 4){
document.getElementById("messages").innerHTML=xmlHttp.responseText
}
if(xmlHttp.readyState == 3){
document.getElementById("messages").innerHTML="Loading3...";
}
if(xmlHttp.readyState == 2){
document.getElementById("messages").innerHTML="Loading2...";
}
if(xmlHttp.readyState == 1){
document.getElementById("messages").innerHTML="Loading1...";
}
if(xmlHttp.readyState == 0){
document.getElementById("messages").innerHTML="Loading0...";
}
}

function getXmlHttpObject(){
var xmlHttp = null;
try{
//Firefox, opera, safari,...
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
//IE
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//IE other
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

</script>
</head>
<body>

<h3>Guestbook V1.1</h3>
<div id="messages">
<script type="text/javascript">
showMessages();
</script>
</div>

<h3>Post a message</h3>
<div id="postform">
</div><form name="postform" id="postform" method="post">
Name:*<br />
<input type="text" name="name" id="name" /><br />
Email:*<br />
<input type="text" name="email" id="email" /><br />
Message:*<br />
<textarea cols="60" rows="6" name="message" id="message"></textarea><br />
<input type="reset" value="Reset" />
<input type="submit" value="Post message" onclick="postMessage()" />
</form>
</div>

</body>
</html>


Still just flickers the page and doesn't add anything to the database.
Like the script isn't even called... :s
  • 0

#8 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 28 November 2009 - 09:44 AM

does it add when you run addmessage.php by hand with the right parameters?
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#9 Coldhearth

Coldhearth

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 88 posts

Posted 28 November 2009 - 09:55 AM

Yes :)
  • 0

#10 oldhendra

oldhendra

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 52 posts
  • Location:jakarta, indonesia
  • Programming Language:JavaScript, Pascal, Others
  • Learning:C, PHP, Others

Posted 30 November 2009 - 04:20 AM

May I?
Just few comments for index.php, what if:

1) In function postMessage(), line
xmlHttp.onreadystatechange=statechanged,
be written as:
xmlHttp.onreadystatechange=stateChanged;

2) In function stateChanged(), line
if(xmlHttp.readyState == 4){
document.getElementById("messages").innerHTML=xmlHttp.responseText
be written as:
if(xmlHttp.readyState == 4 && xmlHttp.status==200 ){
document.getElementById("messages").innerHTML=xmlHttp.responseText;

3) Change
<input type="submit" value="Post message" onclick="postMessage()" />
into:
<input type="button" value="Post message" onclick="postMessage()" />
  • 0

#11 Coldhearth

Coldhearth

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 88 posts

Posted 30 November 2009 - 04:26 AM

Lol it was the letter C in stateChanged that did the trick ;)
But when I change step 2 or 3 like you suggest it calls up the php page and inserts it right there in the page :)
So I left it "submit" in the button.
Thx!!!
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download