[jQuery] looking for a table of records (in this case users) with add,edit,delete options linked to Dialog boxes? read this
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();
}
});
&n