diff options
Diffstat (limited to 'demos/user_manager.html')
| -rw-r--r-- | demos/user_manager.html | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/demos/user_manager.html b/demos/user_manager.html new file mode 100644 index 0000000..3f6d556 --- /dev/null +++ b/demos/user_manager.html @@ -0,0 +1,181 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>jQuery Impromptu - Demo 2</title> + + <link rel="stylesheet" media="all" type="text/css" href="../jquery-impromptu.css" /> + + <style type="text/css"> + body,img,p,h1,h2,h3,h4,h5,h6,fieldset,form,table,td,ul,li,pre,blockquote,code{ margin:0; padding:0; border:0; } + body{ font: 100% Georgia, "Times New Roman", serif; background-color: #ffffff; color: #565656; text-align: center; } + div.wrapper{ position: relative; margin: 0 auto 30px auto; width: 500px; text-align: left; border: solid 1px #aaaaaa; } + #users{ } + #users .user{ border: solid 1px #bbbbbb; background-color: #dddddd; padding: 10px; margin: 5px; } + #users .user .controls{ float: right; } + + /*-------------impromptu---------- */ + div.jqi .jqimessage .field{ padding: 5px 0; } + div.jqi .jqimessage .field label{ display: block; clear: left; float: left; width: 100px; } + div.jqi .jqimessage .field input{ width: 150px; border: solid 1px #777777; } + div.jqi .jqimessage .field input.error{ width: 150px; border: solid 1px #ff0000; } + /*-------------------------------- */ + </style> + + + <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> + <script type="text/javascript" src="../jquery-impromptu.js"></script> + + <script type="text/javascript"> + + function editUser(id){ + var user = $('#userid'+id) + var fname = user.find('.fname').text(); + var lname = user.find('.lname').text(); + + var txt = 'What would you like to change this to?'+ + '<div class="field"><label for="editfname">First Name</label><input type="text" id="editfname" name="editfname" value="'+ fname +'" /></div>'+ + '<div class="field"><label for="editlname">Last Name</label><input type="text" id="editlname" name="editlname" value="'+ lname +'" /></div>'; + + $.prompt(txt,{ + buttons:{Change:true, Cancel:false}, + submit: function(e,v,m,f){ + //this is simple pre submit validation, the submit function + //return true to proceed to the callback, or false to take + //no further action, the prompt will stay open. + var flag = true; + if (v) { + + if ($.trim(f.editfname) == '') { + m.find('#editfname').addClass('error'); + flag = false; + } + else m.find('#editfname').removeClass('error'); + + if ($.trim(f.editlname) == '') { + m.find('#editlname').addClass('error'); + flag = false; + } + else m.find('#editlname').removeClass('error'); + + } + return flag; + }, + callback: function(e,v,m,f){ + + if(v){ + //Here is where you would do an ajax post to edit the user + //also you might want to print out true/false from your .php + //file and verify it has been removed before removing from the + //html. if false dont remove, $promt() the error. + + //$.post('edituser.php',{userfname:f.editfname,userlname:f.editlname}, callback:function(data){ + // if(data == 'true'){ + + user.find('.fname').text(f.editfname); + user.find('.lname').text(f.editlname); + + // }else{ $.prompt('An Error Occured while editing this user'); } + //}); + } + else{} + + } + }); + } + + + function removeUser(id){ + var txt = 'Are you sure you want to remove this user?<input type="hidden" id="userid" name="userid" value="'+ id +'" />'; + + $.prompt(txt,{ + buttons:{Delete:true, Cancel:false}, + callback: function(e,v,m,f){ + + if(v){ + var uid = f.userid; + //Here is where you would do an ajax post to remove the user + //also you might want to print out true/false from your .php + //file and verify it has been removed before removing from the + //html. if false dont remove, $promt() the error. + + //$.post('removeuser.php',{userid:f.userid}, callback:function(data){ + // if(data == 'true'){ + + $('#userid'+uid).hide('slow', function(){ $(this).remove(); }); + + // }else{ $.prompt('An Error Occured while removing this user'); } + //}); + } + else{} + + } + }); + } + + + </script> + </head> + <body> + + <div class="wrapper"> + <div id="users"> + <div id="userid1" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(1);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(1);">Delete</a> + </span> + <span class="fname">John</span> + <span class="lname">Doe</span> + </div> + + <div id="userid2" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(2);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(2);">Delete</a> + </span> + <span class="fname">Jane</span> + <span class="lname">Doe</span> + </div> + + <div id="userid3" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(3);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(3);">Delete</a> + </span> + <span class="fname">Bill</span> + <span class="lname">Smith</span> + </div> + + <div id="userid4" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(4);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(4);">Delete</a> + </span> + <span class="fname">Steve</span> + <span class="lname">Jones</span> + </div> + + <div id="userid5" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(5);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(5);">Delete</a> + </span> + <span class="fname">Will</span> + <span class="lname">Johnson</span> + </div> + + <div id="userid6" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(6);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(6);">Delete</a> + </span> + <span class="fname">Harold</span> + <span class="lname">Anderson</span> + </div> + + </div> + </div> + + </body> +</html> |