OK! Originally I had a problem with this script but I fixed it and it all works perfectly. If anyone has any use for this, here you go:
this feature is using:
jscripts/jquery-1.3.2.min.js
jscripts/jquery-ui-1.7.1.custom.min.js
jscripts/jquery.validate.js
jscripts/jquery.form.js
jscripts/jquery.metadata.js
jscripts/jquery.tablesorter.min.js
jquery.tablesorter.pager.js
admin.php javascript:
function updateUserList(){
$("#admin_list_user_box >
.user_box").hide();
$("#user_table_loading").fadeIn();
$.ajax({
type: "POST",
url: "user_logic.php",
data: "action=update",
complete: function(data){
$("#user_table_loading").hide();
$("#admin_list_user_box
> .user_box").html(data.responseText);
$("#admin_list_user_box
> .user_box").fadeIn(1000);
}
});
}
updateUserList();
$('a.add_user').click(function(e) {
e.preventDefault();
$('#add_user_dialog').dialog('open');
return false;
});
$("#add_user_dialog").dialog({
show: 'scale',
bgiframe: true,
autoOpen: false,
modal: true,
draggable: false,
width: 500,
resizable: false,
position: ['top', 50],
buttons: {
'Ok': function() {
var inputs = [];
$(':input',
this).each(function() {
inputs.push(this.name + '=' + escape(this.value));
})
$.ajax({
type: "POST",
url:
"user_logic.php",
data:
"action=add&" + inputs.join('&'),
beforeSend:
function() {
$("#admin_list_user_box > .user_box").hide();
$("#user_table_loading").fadeIn();
},
error:
function() {
alert("Failed to submit");
},
success:
function() {
updateUserList();
}
});
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
$("#add_user").validate({
rules: {
user_username: {
required: true,
minlength: 4,
remote:
"login_check.php"
},
user_password: {
required: true,
minlength: 5,
},
user_email: {
required: true,
email: true,
remote:
"email_check.php"
}
},
messages: {
user_username: {
required: "Enter a User
Name",
minlength:
jQuery.format("Enter at least {0} characters"),
remote:
jQuery.format("{0} is already in use")
},
user_password: {
required: "Enter a
password",
minlength:
jQuery.format("Enter at least {0} characters")
},
user_email: {
required: "Please Enter
an Email Address",
remote:
jQuery.format("{0} is already in use")
}
},
errorLabelContainer: $("ul", "#add_user
.user_result"),
wrapper: 'li',
submitHandler: function() {
$("#add_user").ajaxSubmit({
clearForm: true
});
$(this).dialog('close');
}
});
admin.php html:
<div id="manage_users">
<a
class="add_user">Add User</a>
<div
id="admin_list_user_box" class="ui-widget ui-corner-all">
<div
class="ui-widget-header">*User List</div>
<div
id="add_user_dialog" title="Add User?">
<form class="cmxform" id="add_user">
<fieldset>
<div class="user_row">
<div class="user_label">User Login:</div>
<div class="user_value"><input name="user_username"
type="text"></div>
</div>
<div class="user_row">
<div class="user_label">User Password:</div>
<div class="user_value">
<input name="user_password" type="text">
</div>
</div>
<div class="user_row">
<div class="user_label">User email address:</div>
<div class="user_value">
<input name="user_email" type="text"
minlength="5">
</div>
</div>
<div class="user_row">
<div class="user_label">User Type:</div>
<div class="user_value">
<select name="user_type">
<option value="user">Registered
User</option>
<option value="editor">Content
Editor</option>
<option value="admin">Site
Administrator</option>
</select>
</div>
</div>
<div class="user_row">
<div class="user_result">
<ul>
</ul>
</div>
</div>
</fieldset>
<input class="edit_user_id" name="user_id" type="hidden"
value="" />
</form>
</div>
<div
id="user_table_loading" style="text-align:center;"
class="ui-helper-clearfix"><img src="img/loading.gif"
alt="Loading..." /></div>
<div
class="ui-helper-clearfix user_box">
<!-- AJAX Loaded Content -->
</div>
</div>
</div>
user_logic.php (the meat):
<?
include("your_database_connection_file");
if(isset($_POST['action']))
{
?>
<script type="text/javascript">
$(document).ready(function() {
$("#user_table").tablesorter({
headers: {
4: {sorter: false}
},
widgets: ['zebra']
})
.tablesorterPager({
container: $("#user_table1pager"),
positionFixed: false,
size: 20
})
$('table.tablesorter tbody tr td').css('border-bottom','1px #000
solid');
function updateUserList(){
$("#admin_list_user_box > .user_box").hide();
$("#user_table_loading").fadeIn();
$.ajax({
type: "POST",
url: "user_logic.php",
data: "action=update",
complete: function(data){
$("#user_table_loading").hide();
$("#admin_list_user_box >
.user_box").html(data.responseText);
$("#admin_list_user_box >
.user_box").fadeIn(1000);
}
});
}
$('a.delete').click(function(e) {
e.preventDefault();
var user_id;
var user_name;
user_id = $(this).parent().siblings().eq(0).attr('id')
user_name = $(this).parent().siblings().eq(1).attr('id')
$('.delete_user_id').val(user_id)
$("span.user_name_span").text("" + user_name);
$('#delete_user_confirmation').dialog('open');
return false;
});
$("#delete_user_confirmation").dialog({
show: 'scale',
bgiframe: true,
autoOpen: false,
modal: true,
draggable: false,
width: 350,
resizable: false,
position: ['top', 50],
buttons: {
'Ok': function() {
$.ajax({
type: "POST",
url: "user_logic.php",
data: "action=delete&user_id=" + $
('.delete_user_id').attr('value'),
beforeSend: function() {
$("#admin_list_user_box >
.user_box").hide();
$("#user_table_loading").fadeIn();
},
success: function() {
updateUserList();
}
});
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
$('a.edit').click(function(e) {
e.preventDefault();
var user_id;
var user_name;
var user_email;
var user_type;
var UserRow;
UserRow = $(this).attr('id')
user_id = $(this).parent().siblings().eq(0).attr('id')
user_name = $(this).parent().siblings().eq(1).attr('id')
user_email = $(this).parent().siblings().eq(2).attr('id')
user_type = $(this).parent().siblings().eq(3).attr('id')
$('form#edit_user .edit_user_id').val(user_id)
$('span.user_name_span').text('' + user_name);
$('form#edit_user .edit_user_name').val(user_name)
$('form#edit_user .edit_user_email').val(user_email)
$('form#edit_user .edit_user_user_type').val(user_type)
$('#edit_user_dialog').dialog('open');
return false;
});
$("#edit_user").validate({
rules: {
edit_user_password: {
minlength: 5,
},
edit_user_email: {
required: true,
email: true,
remote:
"email_check.php"
}
},
messages: {
edit_user_password: {
minlength:
jQuery.format("Enter at least {0} characters")
},
edit_user_email: {
required: "Please Enter
an Email Address",
remote:
jQuery.format("{0} is already in use")
}
},
errorLabelContainer: $("ul",
"#edit_user .user_result"),
wrapper: 'li',
submitHandler: function() {
$("#edit_user").ajaxSubmit({
beforeSubmit:
function(){
$("#edit_user").serialize();
},
success: function(){
updateUserList();
clearForm: true
}
});
$(this).dialog('close');
}
});
$("#edit_user_dialog").dialog({
show: 'scale',
bgiframe: true,
autoOpen: false,
modal: true,
draggable: false,
width: 500,
resizable: false,
position: ['top', 50],
buttons: {
'Ok': function() {
var inputs = [];
$(':input', this).each(function() {
inputs.push(this.name + '=' +
escape(this.value));
})
$.ajax({
type: "POST",
url: "user_logic.php",
data: "action=edit&" + inputs.join('&'),
beforeSend: function() {
$("#admin_list_user_box >
.user_box").hide();
$("#user_table_loading").fadeIn();
},
error: function() {
alert("Failed to submit");
},
success: function() {
updateUserList();
}
});
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
</script>
<div id="delete_user_confirmation" title="Delete User?">
<input class="delete_user_id" name="user_id" type="hidden" value="" />
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0
7px 20px 0;"></span>The user "<span class="user_name_span"></span>"
will be permanently deleted. Are you sure?</p>
</div>
<div id="edit_user_dialog" title="Edit User?">
<form class="cmxform" id="edit_user" action="user_logic.php"
method="post">
<fieldset>
<div class="user_row">
<div class="user_label">User Login:</div>
<div class="user_value"><span
class="user_name_span"></span></div>
</div>
<div class="user_row">
<div class="user_label">Update Password:</div>
<div class="user_value">
<input class="edit_user_password"
name="edit_user_password"
type="text">
</div>
</div>
<div class="user_row">
<div class="user_label">Update email
address:</div>
<div class="user_value">
<input class="edit_user_email"
name="edit_user_email" type="text"
minlength="5">
</div>
</div>
<div class="user_row">
<div class="user_label">Update User Type:</div>
<div class="user_value">
<select name="edit_user_user_type"
class="edit_user_user_type">
<option value="user">Registered
User</option>
<option value="editor">Content
Editor</option>
<option value="admin">Site
Administrator</option>
</select>
</div>
</div>
<div class="user_row">
<div class="user_result">
<ul>
</ul>
</div>
</div>
</fieldset>
<input class="edit_user_id" name="user_id" type="hidden"
value="" />
<input class="edit_user_name" name="user_name" type="hidden"
value="" />
<input name="action" type="hidden" value="edit" />
</form>
</div>
<?
switch($_POST['action']){
case "update":
$fetch = mysql_query("SELECT
id,username,password,email,user_type
FROM users ORDER BY id");
?>
<table cellpadding="0" cellspacing="0" class="tablesorter"
id="user_table">
<thead>
<tr>
<th width="20%">User ID</th>
<th width="20%">User Name</th>
<th width="33%">User Email</th>
<th width="20%">User Type</th>
<th width="7%">Action</th>
</tr>
</thead>
<tbody>
<?
$row_count = 1;
while ($user = mysql_fetch_array($fetch,MYSQL_NUM)) {
$fetched_id = $user[0];
$fetched_username = $user[1];
$fetched_password = $user[2];
$fetched_email = $user[3];
$fetched_user_type = $user[4];
$result .= "<tr id='record-".$fetched_id."'>
<td id='".$fetched_id."'>".$fetched_id."</td>
<td
id='".$fetched_username."'>".$fetched_username."</td>
<td id='".$fetched_email."'><a
href='mailto:".$fetched_email.";'>".
$fetched_email."</a></td>
<td
id='".$fetched_user_type."'>".$fetched_user_type."</td>
<td align='right'><a id='".$row_count."'
class='edit'
title='Edit'><img src='img/edit.png' border='0' align='left'></a><a
id='".$fetched_username."' class='delete' title='Delete'><img src='img/
delete.png' border='0' align='right'></a></td>
</tr>";
$row_count += 1;
}
echo $result;
?>
</tbody>
<tfoot>
<tr id="user_table1pager">
<td colspan="5" align="center" valign="bottom"><img
src="/newsite/
css/images/first.png" class="first"/> <img src="/newsite/css/images/
prev.png" class="prev"/>
<input type="text" class="pagedisplay" size="3"
readonly="readonly"/>
<img src="/newsite/css/images/next.png"
class="next"/> <img src="/
newsite/css/images/last.png" class="last"/>
<select class="pagesize">
<option value="10">10</option>
<option selected="selected"
value="20">20</option>
</select></td>
</tr>
</tfoot>
</table>
<?
break;
case "add":
$username = $_POST['user_username'];
$password = md5($_POST['user_password']);
$email = $_POST['user_email'];
$user_type = $_POST['user_type'];
$query = "INSERT INTO users
(username,password,email,user_type)
VALUES ('$username','$password','$email','$user_type')";
mysql_query($query) or die('MySQL error: ' .
mysql_error() . '<hr/
>' . $query);
break;
case "delete":
$user_id = (int)$_POST['user_id'];
$query = "DELETE FROM users WHERE id ='$user_id'";
mysql_query($query);
break;
case "edit":
$user_id = (int)$_POST['user_id'];
$edit_user_type = $_POST['edit_user_user_type'];
$edit_user_email = $_POST['edit_user_email'];
if (!empty($_POST['edit_user_password'])) {
$edit_user_password =
md5($_POST['edit_user_password']);
$update_user_password = "UPDATE users SET
password =
'$edit_user_password' WHERE id ='$user_id'";
mysql_query($update_user_password);
}
$update_user_query .= "UPDATE users SET email =
'$edit_user_email',
user_type = '$edit_user_type' WHERE id ='$user_id'";
mysql_query($update_user_query);
break;
}
}else{
header ("Location: index.html");
}
?>
