4

ビュー.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 は、新しいユーザー エントリを保存するためのものです。

私の 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 %}

私が実際に望んでいるのは、<button> id="{{ list.0.id }}" class="openDiv">{{list.0.first_name|title}} {{list.0.last_name}}</button> 保存されたユーザーデータをクリックすると、編集可能モードで同じフィールドに表示されるはずです。ボタンにユーザー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 は、保存されたフォーム インスタンスを表示するために記述されています。これで、保存されたフォーム インスタンスを表示できるようになり、そのインスタンスを Authorizedreporter div にロードしています (js と index.html を確認してください)。保存、新規レコード作成、indexメソッド関連のviews.py呼び出し中。 レコードを保存せずに更新したい。

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>

ビュー.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
                    })

私が直面している現在の問題を説明しました。これを行うのを手伝ってください。ありがとう

4

3 に答える 3

3

いくつかのエラー/間違いが見られるので、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 から正しいフォームをフェッチするためのもので、もう 1 つは通常のフォーム送信によってデータを保存するためのものです。もちろん、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'),
)

また、登録フォームの HTML のみを含む新しいテンプレートを作成する必要があることに気付くかもしれません(注:フォームを識別するために、上記のビューによって返された隠しフィールドがsetting/register_form.html必要です)。idfetch_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. あなたは見に行きindexます。新しいレポーターなどを通常どおり保存するためのフォームがいくつかあります。
  2. ボタンをクリックし.openDivます。上記の AJAX リクエストを送信してfetch_reporter_form、正しいフォームを取得します。(この時点でコードは正常に動作しています)
  3. そのフォームの [保存] ボタンをクリックすると、更新されたデータが (POST 経由で) 送信されupdate_report、レポーターが表示および更新されます。

基本的な考え方をお伝えしたいと思います。残りは非常に簡単なので、簡単に続けることができると思います。それが役に立てば幸い!

于 2013-07-31T21:21:45.253 に答える
1

あなたがしていることを再開させてください:

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

ここでは、データをサーバーにポストする Ajax 非同期クエリをセットアップします。クエリがサーバーに到達したとき、サーバーがクラッシュしない場合は、success:コールバックが呼び出され、javascript は何もしません ( return true;)。

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

ここでは、非同期 Ajax クエリが終了する前(成功または失敗)にHTML ノードを表示します。Ajax クエリの実行後に要素を表示するには、このコードをsuccess:orerror:コールバック内に配置します。

最後に、 , ,をカウントする()、クリック コールバックの外にあることがわかります。したがって、ドキュメント準備完了コールバックの外にある場合、効果はありません。{}$('#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 については、UserProfile を保存しますが、クライアント ブラウザーには何も返しません。何もない。

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 ?
于 2013-07-26T14:37:43.937 に答える
0

サーバーからエラー メッセージが返されたかどうかを確認します。

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

});

編集

フォームを送信するときにユーザー ID を渡しません。次のようなことを試してください:

<form ...>
   <!-- //.. -->
   {{ form.id.as_hidden }}
</form>
于 2013-08-07T05:32:17.453 に答える