阿贾克斯succesfull表单数据

Question

views.py

def index(request): 
    """""""""""""" 
    registerform = UserRegisterForm(request.POST) 
    createprofileform = UserCreateProfileForm(request.POST)        
    if registerform.is_valid() and createprofileform.is_valid():    
     result = registerform.save(commit=False) 
     result.set_password(request.POST['password'])  #set member password 
     result.username = username    
     result.save() 
     member.user_id = user.id 
     member.member_id = result.id 
     member.save()          #new member registration 
     member_profile = UserProfile.objects.get(user=result.id) 
     createprofileform = UserCreateProfileForm(request.POST, instance=member_profile) 
     createprofileform.save()        #create member profile     
     createprofileform = UserCreateProfileForm() 
     member_save_msg = 'New member has been added.' 
     """""""""""" 
    return render(request,'index.html',{ 'registerform': registerform,'createprofile': createprofileform,}) 

的index.html

{% block main-content %} 
<table width="98%" border="0" style="margin-left:0.7%;" cellpadding="0" cellspacing="0" id="rounded_table"> 
    <tr > 
     <td width="50%">Main Account Holder</td><td width="50%">Authorised Reporters</td> 
    </tr> 
    <tr id="main_account"> 
      <td width="50%">All data related to main account holder comes here</td> 
    </tr> 
    <tr id="authorised_reporter"> 
      <td width="100%" colspan="2"> 
      <div id="authorisedreporter" {% if not registerform.errors %}style="display:none"{% endif %}> 
       <form method="post" action="." id="reporter-form">{% csrf_token %} 
       <table width="100%"> 
        <tr> 
        <td style="width:100px;">First name:</td><td>{{registerform.first_name}}</td> 
        </tr> 
        <tr> 
        <td>Last name:</td><td>{{registerform.last_name}} </td> 
        </tr> 
         """"""other form fields"""""""" 
        <tr> 
        <td colspan=2""><p align="right"><button type="submit" title="Save" >Save <img src="{{ STATIC_URL }}images/button-icon-ir-fwd.png" width="12" height="17" alt="" /></button></p> 
        </td> 
        </tr> 
        </table></form> 
</table> 
{%endblock%} 

以上views.py和index.html来电显示DIV是用于保存新的用户入口。

我的html模板分为2个部分，主账户持有人选项卡和授权报告人选项卡。主账户持有人选项卡用于保存个人资料信息，授权记者选项卡用于创建新用户。活动用户选项卡将被隐藏。如果选择用户选项卡，则主要帐户持有人选项卡将被隐藏。保存用户后，用户详细信息将显示在下方，格式如下。

{% for list in member_list %} 
     <tr class="ir-shade"> 
     <td style="width:120px;"><span><input type="submit" name="delete" value="{{list.0.id}}" class="delete_reporter" /></span><button> id="{{ list.0.id }}" class="openDiv">{{list.0.first_name|title}} {{list.0.last_name}}</button></td> 
     <td style="width:410px;"> {{list.0.email}} {{list.1.phone_daytime}} {{list.1.phone_mobile}}</td> 
     </tr> 
    {% endfor %} 

什么其实我是想被Onclicking的<button> id="{{ list.0.id }}" class="openDiv">{{list.0.first_name|title}} {{list.0.last_name}}</button>保存用户的数据应该在编辑mode.i同一字段中显示正在传递button.On用户ID按一下按钮，与用户ID数据应该所示可编辑模式。

JS：

$('.openDiv').click(function() {    
    var id = $(this).attr('id'); 
    var csrf_token = $("#csrf_token").val(); 
    $.ajax({ 
     data:{ 
      csrfmiddlewaretoken: ('{{csrf_token}}'),       
      id:id,     
      }, 
    type:'POST', 
    url: '/setting/save-reporter/', 
    success: function(data) { 
     $('#authorisedreporter').html(data); 
    } 
    }); 
}); 

以下views.py和HTML用于显示保存的表单instance.Now我可以显示保存的表单实例书面和我加载实例到authorisedreporter格（请检查js和index.html）。在这个时候，如果我套件保存，它正在创建新的记录，它正在调用views.py相关的索引method.I想更新，而不是保存记录。

save_reporter.html

<form method="post" action="." id="{{ id }}"> 
    {% csrf_token %} 
    <table width="100%"> 
     <tr> 
      <td style="width:100px;">First name:</td><td>{{form.first_name}}</td> 
     </tr> 
     <tr> 
      <td>Last name:</td><td>{{form.last_name}}</td> 
     </tr> 
     <tr> 
      <td>Daytime phone:</td><td>{{profile.phone_daytime}}</td> 
     </tr> 
     <tr> 
      <td>Mobile phone:</td><td>{{profile.phone_mobile}}</td> 
     </tr> 
     <tr> 
      <td>Email:</td><td>{{form.email}}</td> 
     </tr> 
     <tr> 
      <td>Password</td><td>{{form.password}}</td> 
     </tr> 
     <tr> 
      <td colspan=2"<p align="right">{% include "buttons/save.html" %}</p></td> 
     </tr></table></form> 

views.py

def save_reporter(request): 
    user = request.user 
    id = request.POST.get('id') 
    user = User.objects.get(pk =id) 
    userprofile = UserProfile.objects.get(user=user.id) 
    form = ReporterRegisterForm(instance=user) 
    profileform = ProfilecontactForm(instance=userprofile)    
    return render(request, 'setting/save_reporter.html', 
        {'form': form, 
        'id':id, 
        'profile':profileform 
        }) 

我已经解释了我的我面对当前的问题，请有帮我做this.Thanks

Answer 1

让我的简历你在做什么：

$.ajax({ 
    data:{ 
     /* ... */ 
    }, 
    type:'POST', 
    url: '/report/save_reporter/', 
    success: function() { 
     return true; 
    } 
}); 

在这里，您设置了一个Ajax异步查询以将数据发布到服务器。当查询到达服务器时，如果它没有崩溃，则调用success:回调，并且JavaScript不执行任何操作（return true;）。

$('#authorisedreporter').show(); 

在这里，你显示一个HTML节点异步的Ajax查询结束前（成功或失败）。要在Ajax查询完成后显示元素，请将此代码放入success:或error:回调中。

最后，如果你算你(，)，{和}你会比$('#authorisedreporter').show();看到的是点击回调之外。因此，如果它不在文档就绪回调中，则不起作用。

所以正确的Javascript代码应该是（我认为）：

$('.openDiv').click(function (e) {  
    e.preventDefault();   
    var id = $(this).attr('id'); 
    var firstname = $("#"+id).find('#id_first_name').val();  
    var phonemobile = $("#"+id).find('id_phone_mobile').val();  
    $.ajax({ 
     data:{ 
      csrfmiddlewaretoken: csrf_token, 
      edit_reporter:true, 
      id:id, 
      first_name:firstname,    
      phone_mobile:phonemobile, 
     }, 
     type:'POST', 
     url: '/report/save_reporter/', 
     success: function() { 
      $('#authorisedreporter').show(); 
     } 
    }); 
}); 

编辑：

关于您的view.py，您保存用户配置，但不要什么返回到客户端浏览器。没有。

def save_reporter(request): 
    user=User.objects.get(user=user) # you should use django.shortcuts.get_object_or_404 
    userprofile = Userprofile.objects.get(user=user) # same comment 
    if request.method == 'POST': 
     registerform = UserRegisterForm(request.POST,instance=user) 
     createprofileform = UserCreateProfileForm(request.POST,instance=userprofile) 
     # you create 2 forms above, but don't use them. Is it normal ?! 
     # you should do loops "if registerform .valid(): ... else: ..." and use it. Same for the 2nd form 
     if 'edit_reporter' in request.POST: 
      first_name=request.POST.get('first_name') # can be None 
      phone_mobile = request.POST.get('phone_mobile') # can be None  
      user = User.objects.get(pk=user) 
      user.first_name = first_name    
      user.save() # put it inside a try/except statment 
      userprofile = UserProfile.objects.get(pk=user) # use get_or_404 
      userprofile.phone_mobile = phone_mobile 
      userprofile.save() # put it inside a try/except statment 
    return HttpResponse() # this returns an empty html page, do you want to return the form here ? 

Answer 2

让我分析你的JS代码了一下，因为我可以看到几个错误/错误有：

$('.openDiv').click(function (e) {  
    e.preventDefault(); 

    // where is following data taken from? At the point you click the .openDiv link, the form doesn't have any data yet so all of them will be empty string '' 
    var csrf_token = $("#csrf_token").val(); 
    var id = $(this).closest('td').attr('id'); 
    var firstname = $("#"+id).find('#id_first_name').val(); 
    var lastname = $("#"+id).find('#id_last_name').val(); 
    var phonedaytime = $("#"+id).find('#id_phone_daytime').val(); 
    var phonemobile = $("#"+id).find('#id_phone_mobile').val(); 
    var email = $("#"+id).find('#id_email').val(); 

    // do you use AJAX to get the form or use it to save the form? 
    $.ajax({ 
     data: $(this).serialize(), // this is wrong, $(this) is the link object, not a form 
     type:'POST', 
     url: '/setting/save-reporter/', 
     success: function(data) { 
      $('#authorisedreporter').html(data); 
      $('#authorisedreporter').show(); 
     } 
    }); 
}); 

好，据我了解，点击链接后，你正在使用AJAX来发送请求到Django视图来取回正确的实例化表单。所以，你应该：

首先，简化您的JS代码：

$('.openDiv').click(function (e) {  
    e.preventDefault(); 
    var this_id = $(this).closest('td').attr('id'); // get the user ID, since that's all you need 
    console.log(this_id); // making sure that you get the right ID 
    $.ajax({ 
     data: { id: this_id }, 
     type: 'POST', 
     url: '/setting/fetch-reporter-form/', 
     success: function(data) { 
      $('#authorisedreporter').html(data); 
      $('#authorisedreporter').show(); 
     } 
    }); 
}); 

接下来，分割你的旧观点的几个看法集中精力做它需要做的（注：您可以留下您index看法，因为它现在）：

def fetch_reporter_form(request): 
    ''' Change your save_reporter view name to this view ''' 
    registerform = UserRegisterForm() 

    if request.method == 'POST': 
     id = request.POST.get('id', None) 
     if id: 
      user = get_object_or_404(pk=user.id) 
      userprofile = UserProfile.objects.get(user=user) 
      registerform = UserRegisterForm(request.POST, instance=user) 
      return render(request, 'setting/register_form.html', { 
       'user_id': id 
       'registerform':registerform 
      }) 
     else: 
      return HttpResponse('Request does not contain any ID') 
    else: 
     return HttpResponse('Request is not POST') 

def update_reporter(request): 
    ''' This function is for update the reporter ''' 
    registerform = UserRegisterForm() 

    if request.method == 'POST': 
    id = request.POST.get('id', None) 
     if id: 
      user = get_object_or_404(pk=user.id) 
      userprofile = UserProfile.objects.get(user=user) 
      registerform = UserRegisterForm(request.POST, instance=user) 
      if registerform.is_valid(): 
       result = registerform.save(commit=False) 

       # saving code here ... 
       return HttpResponse('Success') 
     else: 
      return HttpResponse('Request does not contain any ID') 
    else: 
     return HttpResponse('Request is not POST') 

这里你可以看到有2个功能：1取出来自AJAX权的形式，其他的用于保存通过正常的形式提交数据。当然，你应该作出相应的urls.py，是这样的：

urlpatterns = patterns('', 
    # ... your code ... 
    url(r'^setting/fetch-reporter-form/$', 'yourapp.views.fetch_reporter_form'), 
    url(r'^setting/update-reporter/$', 'yourapp.views.update_reporter'), 
) 

您也可能会注意到，你应该做一个新的模板setting/register_form.html包括报名表HTML只（注：你需要返回一个隐藏id场通过fetch_reporter_form鉴于上述识别表格）：

<form method="post" action="/setting/update-reporter" id="reporter-form"> 
    {% csrf_token %} 
    <input type="hidden" name="id" value="{{ user_id }}" /> 
    <!-- your code here --> 
</form> 

所以流动是：

1. ÿ ou去index视图。正常情况下有几种形式可以节省新的记者等。
2. 您点击.openDiv按钮。它会将上面的AJAX请求发送到fetch_reporter_form以获取正确的表单。 （您的代码在这一点上工作正常）
3. 您单击该表单上的保存按钮，它会提交更新的数据（通过POST）到update_report查看和更新​​记者。

我只是想给你提供基本的想法。其余的很简单，所以我猜你可以轻松地继续。希望能帮助到你！

Answer 3

检查是否有从服务器返回的任何错误信息：

$.ajax({ 
    // ... 
    error: function(err) { 
     console.log(err); 
    } 

}）;

编辑：

当你提交表单你不通过用户ID。请尝试执行以下操作：

<form ...> 
    <!-- //.. --> 
    {{ form.id.as_hidden }} 
</form>