Ajax and a Shoutbox

imperialized · March 30, 2008

Ok, here is my problem. I posted my shoutbox up in the beta test php section and got some responses that I should use 'ajax'

Great, however. I don't know the first thing about ajax. I did some research on google and downloaded a few examples to look at.. but I am completely confused.

Here is my problem. I want to use AJAX to submit shouts to my DB then have them displayed as shout (but this uses a a mysql query) I am lost..

Here is an example of an index.php file I have that works to submit data to my database, but the only way to I can it to display it again is by running my query again in the add.php... is this how it is supposed to be done? Do I just need to place the <div> into my shoutbox.php where the query used to be run? I just don't know.

<html>
<head>
<script src="prototype.js"></script>
<script>
function dosubmit( ) {
  new Ajax.Updater( 'result', 'add.php', { method: 'post',
    parameters: $('myform').serialize() } );
  $('myform').reset();
}
</script>
</head>
<body>
<form id="myform">
<table>
  <tr><td>name</td><td><input type="text" name="name"></td></tr>
  <tr><td>age</td><td><input type="text" name="age"></td></tr>
</table>
<input type="button" onclick="dosubmit()" value="Submit">
</form>
<div id="result" style="padding:5px;">
</div>
</body>
</html>

Add.php:

<?php 
include("db_con.php");
$name = $_POST['name'];
$age = $_POST['age'];

$add = mysql_query("INSERT INTO test (name, age) VALUES ('$name', '$age')") or DIE ('failed');

$getdata = MYSQL_QUERY("Select * from test");
while($x = mysql_fetch_array($getdata)){
$n = $x['name'];
$a = $x['age'];
$id = $x['id'];	

print "His name was $n and he was $a years old. He happens to have the ID: $id <br>";	
}

Keep in mind, I was just using these files to play around with, so I really don't know what im doing.

lewis987 · April 1, 2008

You need to set up the XML thingy first...

I cant do everything in ajax (im just a beginner aswell) but i knowq a couple of things

<html>
    <head>
    <title>
    	AJAX TEST
    </title>
<script language="javascript" type="text/javascript">
// JavaScript Document
   function createRequestObject() {  

       var req;  
     
       if(window.XMLHttpRequest){  
          // Firefox, Safari, Opera...  
          req = new XMLHttpRequest();  
       } else if(window.ActiveXObject) {  
          // Internet Explorer 5+  
          req = new ActiveXObject("Microsoft.XMLHTTP");  
       } else {  
          // There is an error creating the object,  
          // just as an old browser is being used.  
          alert('Problem creating the XMLHttpRequest object');  
       }  
     
       return req;  
     
    }  
     
    // Make the XMLHttpRequest object  
    var http = createRequestObject();   
function sendRequest(oldData, Column) {  
	if(confirm('Message')){
		// Open PHP script for requests   
		http.onreadystatechange = function(){
									   if(http.readyState == 4 && http.status == 200){  

									  // Text returned FROM the PHP script  
									  var response = http.responseText;  

									  if(response) {  
										 // UPDATE ajaxTest content  
										 document.getElementById('results').innerHTML = response;  
									  }  

								   } 
		}
	   
	   http.open('get', 'data.php?oldData='+oldData+'&Column='+Column, true); 
	   http.send(null);  
	}else{
		document.getElementById("results").innerHTML = "Button clicked but not accepted";
	}
     
    }</script>

</head>
    <body>
    	<div id="results"> BUTTON NOT CLICKED</div>
    	<input name="aa" value="test" type="button" onClick="sendRequest('res','ults')">
    </body>
    </html>

data.php (where all the work will be done...)

if($_GET['oldData'] != "" && $_GET['Column'] != ""){
	echo("DATA is ".$_GET['oldData']." AND THE COLUMN is ".$_GET['Column']);
}else{
	echo("Invalid data recieved");
}

Before you click on the button, you will see it says "BUTTON NOT CLICKED", when you click on it, you will get a conformation message. It is located in the sendRequest javascript function (if(confirm('Message')){) You can remove this however. Thats basically how it works... just copy the code and try it out. Oh and the data.php file can be renamed to whatever you want it to be (change 'data.php?oldData='+oldData+'&Column='+Column); to whatever you want). hopefully this helps you.

Sign In

Ajax and a Shoutbox

Recommended Posts

imperialized

Link to comment

Share on other sites

lewis987

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information