ajax / JS / what ever tut request :p

[hallsofvallhalla]

oh yes please do. I am behind on this.

[Lord Strife]

alrighty sure will , will have it up later tonight when i return from my sons school function tonight

[Lord Strife]

ok here we go first and foremost to use ajax you need a javascript library. If you dont know what this is then head on over to http://jquery.com and read up on the topic there. Now once you're ready to get started you need to download your library of choice ( of course I will be using Jquery ) so head HERE. Download and make sure to save it as jquery-1.3.2.min.js , we will be using this file in our MMO tutorial so either download to the www/tutorial/ folder or a folder on your own server where you will remember where it is.

ok so first things first we need to add a little style , basically we need to add some .css for our message box that will tell us if the username is availiabe or not.

so open up style.css scroll to the bottom and add :

Code: Select all

.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;

}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}

now once thats done save style.css and open up register.php
find :

Code: Select all

<form method="post" action="reguser.php">

and above it add :

Code: Select all

<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function()
{
$("#name").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("checkname.php",{ name:$(this).val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
});
}

});

});
});
</script>

now i'll break this down a little bit
<link type="text/css" rel="stylesheet" href="style.css"> <--- this grabs our style for our messagebox (I noticed this was'nt included in register.php before)

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <-- remember the jquery library file ? well here it is we need to include it here if we want to use some fancy ajax and jquery (if you saved it somewhere other then where the rest of the tutorial files are you need to change the src="yourlocation/jquery-1.3.2.min.js")

now in register.php find :

Code: Select all

<input type="text" name="name" size "21">

and change it to :

Code: Select all

<input id="name" type="text" name="name" size "21">

notice all we did was add id="name" this will be used by our ajax function to grab the details of the name we are trying to check

now for the ajax stuff I am not going to go into detail about the mthods and usage of it all in the tutorial. If you want to learn more about Jquery and Ajax then head to the Jquery link i gave and Google ajax for more detailed help. I will point out the main points that are used with this though.

Code: Select all

$("#name").blur(function()

this basically means that when a user either leaves or tabs out of the <input> field with id=name(our usename form field) run a jquery(ajax) function

Code: Select all

$.post("checkname.php",{ name:$(this).val() }function(data)

this part of the code tells jquery to run a ajax request to the script with the name checkname.php using the POST method grabbing the value of the <input> field with the id=name(our usename form field) the function(data) part tells jquery to run a function using the (data) , data = results from our checkname.php script. The rest is pretty much easy to figure out , if checkname.php returns data that says no then username is not able to be used , if it returns sumthing other then no then name is able to be used

and here is the code for checkname.php

Code: Select all

<?php
include('connect.php');
$username = $_POST['name'];
$checkname = mysql_query("Select * from players where name = '".$username."'");
if(mysql_num_rows($checkname) >= 1){
//username already exists
echo "no";
}else{
echo "yes";
}
?>

As you can see this is pretty simple , it takes the POST data from our register.php checks it against the database for a player with the same name and returns NO if the Name cant be used and YES if it can be used

Now that might seem like alot but once you get it all edited and added it actually is a small amount of code to add. AND if you're a smart one you can take this simple example and add other checks (valid emails , password = re-peat password , and lots of other stuff)


Lord_Strife

[hallsofvallhalla]

very nice!!

[SpiritWebb]

Nice, nice...thanks!!