[edit_contact]change from a page to a popup in contact_list

contacts/templates/contacts/contact_edit.html

@@ -1,25 +0,0 @@
-{% extends "myhome_base.html" %}
-
-{% block nav_contacts_class %}class="cur"{% endblock %}
-
-{% block main_panel %}
-<div class="narrow-panel">
-<h3>编辑联系人<a href="{{ SITE_ROOT }}contacts/list/" class="contact-list-link">（联系人列表）</a></h3>
-<form action="" method="post">
-    {{ form.user_email.as_hidden }}
-    <label>邮箱：</label>
-    {{ form.contact_email }}
-    <label>名字(可选)：</label>
-    {{ form.contact_name }}
-    <label>备注(可选)：</label>
-    {{ form.note }}
-    <p class="error">
-      {% for field in form %}
-          {{ field.errors }}
-      {% endfor %}
-      {{ form.non_field_errors }}
-    </p>
-    <input type="submit" value="提交" class="submit" class="submit" />
-</form>
-</div>
-{% endblock %}

contacts/templates/contacts/contact_list.html

@@ -34,12 +34,61 @@
     <p class="error hide" id="contact-add-error">请输入邮箱地址。</p>
     <input type="submit" value="提交"  class="submit" />
 </form>
+<form action="{% url contact_edit %}" method="post" id="contact-edit-form" class="hide">
+    <h3>编辑联系人</h3>
+    {{ edit_form.user_email.as_hidden }}
+    <label>邮箱：</label><br />
+    {{ edit_form.contact_email }}<br />
+    <label>名字(可选)：</label><br />{{ edit_form.contact_name }}<br />
+    <label>备注(可选)：</label><br />{{ edit_form.note }}<br />
+    <p class="error hide" id="contact-edit-error"></p>
+    <input type="submit" value="提交"  class="submit" />
+</form>
+
 {% endblock %}
 
 {% block extra_script %}
 <script type="text/javascript">
 $('.contact-edit').click(function() {
-    location.href = $(this).attr('data');
+    var note_container = $(this).parent().prev(),
+        contact_note = note_container.html(),
+        contact_name = note_container.prev().html(),
+        contact_email = note_container.prev().prev().html();
+    $('#contact-edit-form [name="contact_email"]').val(contact_email);
+    $('#contact-edit-form [name="contact_name"]').val(contact_name);
+    $('#contact-edit-form [name="contact_note"]').val(contact_note);
+    $('#contact-edit-form').modal({appendTo: '#main'});
+});
+$('#contact-edit-form').submit(function() {
+    $.ajax({
+        url: $('#contact-edit-form').attr('action'),
+        type: 'POST',
+        dataType: 'json',
+        cache: 'false',
+        contentType: 'application/json; charset=utf-8',
+        beforeSend: prepareCSRFToken,
+        data: {
+            'user_email': $('#contact-edit-form input[name="user_email"]').val(),
+            'contact_email': $('#contact-edit-form input[name="contact_email"]').val(),
+            'contact_name': $('#contact-edit-form input[name="contact_name"]').val(),
+            'note': $('#contact-edit-form input[name="note"]').val()
+        },  
+        success: function(data) {
+            if (data['success']) {
+                location.reload(true);
+            } else {
+                apply_form_error('contact-edit-form', data['error']);
+            }   
+        },
+        error: function(data, textStatus, jqXHR) {
+            var errors = $.parseJSON(data.responseText);
+            $.each(errors, function(index, value) {
+                apply_form_error('contact-edit-form', value[0]);
+            });
+        }
+    });
+
+    return false;
 });
 
 addConfirmTo($('.contact-delete'));

contacts/views.py

@@ -19,9 +19,16 @@ from seaserv import ccnet_rpc, ccnet_threaded_rpc
 def contact_list(request):
     contacts = Contact.objects.filter(user_email=request.user.username)
     form = ContactAddForm({'user_email':request.user.username})
+    edit_init_data = {'user_email':request.user.username,
+                 'contact_email':'',
+                 'contact_name':'',
+                 'note':''}
+    edit_form = ContactEditForm(edit_init_data)
+
     return render_to_response('contacts/contact_list.html', {
         'contacts': contacts,
         'form': form,
+        'edit_form': edit_form,
         }, context_instance=RequestContext(request))
 
 
@@ -30,10 +37,6 @@ def contact_add_post(request):
     """
     Handle ajax post to add a contact.
     """
-
-    if not request.is_ajax() and not request.method == 'POST':
-        raise Http404
-
     result = {}
     content_type = 'application/json; charset=utf-8'
 
@@ -85,42 +88,25 @@ def contact_add(request):
 @login_required
 def contact_edit(request):
     """
-    Edit contact info.
+    Ajax post to edit contact info.
     """
-    
+    result = {}
-    if request.method == 'POST':
+    content_type = 'application/json; charset=utf-8'
     form = ContactEditForm(request.POST)
     if form.is_valid():
         user_email = form.cleaned_data['user_email']
         contact_email = form.cleaned_data['contact_email']
         contact_name = form.cleaned_data['contact_name']
         note = form.cleaned_data['note']
-            try:
+        contact = Contact.objects.get(user_email=user_email, contact_email=contact_email)
-                contact = Contact.objects.get(user_email=user_email,
-                                              contact_email=contact_email)
-            except Contact.DoesNotExist:
-                return render_error(request, '联系人不存在')
-            else:
         contact.contact_name = contact_name
         contact.note = note
         contact.save()
-                return HttpResponseRedirect(reverse('contact_list'))
+        result['success'] = True
+        return HttpResponse(json.dumps(result), content_type=content_type)
     else:
-        contact_email = request.GET.get('email', '')
+        return HttpResponseBadRequest(json.dumps(form.errors),
-        c = Contact.objects.filter(user_email=request.user.username,
+                                      content_type=content_type)
-                                   contact_email=contact_email)
-        if not c:
-            return render_error(request, '联系人不存在')
-        else:
-            init_data = {'user_email':request.user.username,
-                         'contact_email':contact_email,
-                         'contact_name':c.get().contact_name,
-                         'note':c.get().note}
-            form = ContactEditForm(init_data)
-        
-    return render_to_response('contacts/contact_edit.html', {
-            'form': form,
-            }, context_instance=RequestContext(request))
        
         
 @login_required

media/css/seahub.css

@@ -563,13 +563,6 @@ p {
     width:260px;
     height:80px;
 }
-/*contact*/
-.contact-list-link {
-    font-size:13px;
-}
-.contact-list-link:hover {
-    text-decoration:none;
-}
 /* group, org */
 .group-list {
     margin-top:20px;