muddle_users/templates/group/users.html

   1 <script type="text/javascript" src="{{STATIC_URL}}/js/jquery.form.js"></script>
   2 <script type="text/javascript">
   3     $(document).ready(function() {
   4         // Add user button
   5         $('#add_user').click(function(event){
   6             event.preventDefault();
   7             $('.qtip').qtip('destroy');
   8             $(this).qtip({
   9                 content: {
  10                    url: '{% url group-add-user object.id %}',
  11                    title: {text:'Add User: ', button:'close'}
  12                 },
  13                 position: {  corner:{target:'center', tooltip:'center'}},
  14                 style: {name: 'dark', border:{radius:5}, width:400, background:'#eeeeee'},
  15                 show: {when:false, ready:true},
  16                 hide: {fixed: true, when:false},
  17                 api:{onShow:function(){
  18                     $(".ajax_form input[type!=hidden], .ajax_form select").first().focus();
  19                 }}
  20             });
  21         });
  22
  23         // Delete user button
  24         $('#op_users .delete').live("click", function(event) {
  25             event.preventDefault();
  26             var name = $(this).parent().parent().children('.name');
  27             if (name.children('a').size() > 0) {
  28                 name = name.children('a').html();
  29             } else {
  30                 name = name.html();
  31             }
  32             if (confirm("Remove user: " + name)) {
  33                 var id = this.parentNode.parentNode.id.substring(5);
  34                 $.post('{% url group-remove-user object.id %}', {'user':id},
  35                     function(code){
  36                         if(code==1) {$('#user_'+id).remove();}
  37                     }, "json");
  38             }
  39         });
  40
  41         // submit button
  42         $(".add_user_form").live('submit', function(event){
  43             event.preventDefault();
  44             $("#errors").empty();
  45             $(this).ajaxSubmit({success: update_group_user});
  46         });
  47     });
  48
  49     function update_group_user(responseText, statusText, xhr, $form) {
  50         if (xhr.getResponseHeader('Content-Type') == 'application/json') {
  51             // parse errors
  52             for (var key in responseText) {
  53                 $("#errors").append("<li>"+ responseText[key] +"</li>")
  54             }
  55         } else {
  56             // successful permissions change.  replace the user row with the
  57             // newly rendered html
  58             $('.qtip').qtip('hide');
  59             var html = $(responseText);
  60             var id = html.attr('id');
  61             var $row = $('#op_users #' + id);
  62             if ($row.length == 1) {
  63                 $row.replaceWith(html);
  64             } else {
  65                 $("#op_users").append(html);
  66             }
  67         }
  68     }
  69
  70 </script>
  71 <div id="add_user" class="button add">Add User</div>
  72 <table id="op_users">
  73     <tr>
  74         <th>Name</th>
  75         {% block user_headers%}{% endblock %}
  76         <th></th>
  77     </tr>
  78     {% for user_detail in users %}
  79         {% block user_row %}{% include "group/user_row.html" %}{% endblock %}
  80     {% endfor %}
  81 </table>