2017-09-20 6 views
1

AJAX(およびビットの角度)を使用してフォームの下書きを保存しています。AJAXでDjangoでフォームを保存(および再投入)するときに'が表示されるのはなぜですか?

<!-- index.html --> 

... 
<input id="id_title" name="title" ng-model="title" placeholder="Question Title" type="text" value="" required /> 
... 

<script> 

    app.controller("addQuestionCtrl", function($http) { 

     $scope.title = '{% if form.title.value is not None %}{{ form.title.value }}{% endif %}'; 
     ... 

     $interval(function() { 
      ... 
      data = {title:''+$scope.title, ...}; 
      $http.post("{% url 'save_draft' %}", data).then(function(response) { 
       ... 
      }, function failureCallback(error) { 
       ... 
      }); 
     }, 10000); 

    }); 

</script> 

これは、すべてが正常に動作していると'として'を送信します。私のview.pyでは、私はデータを変換し、セッションに格納します。その後、

def save_draft(request): 
    .... 
    posted = json.loads(request.body.decode("utf-8")) 
    ... 
    request.session['draft'] = { 
     'title': posted.get('title', None), 
     ... 
    } 

と、ページのロード時

def question_add(request): 
    .... 
    if request.method == 'POST': 
     .... 
    else: 
     draft_question = request.session.get('draft', False) 
     if draft_question: 
      form = QuestionAddForm(initial={ 
       'title':draft_question['title'], 
       ... 
      }) 

残念ながら、これはこの

enter image description here

をオンに関連するフィールドを移入します

into this

enter image description here

フィールドが、私はなぜこれが起こっていることを確認していないよ

<input id="id_title" name="title" ng-model="title" ... value="&#39;title in quotes&#39;" /> 

としてレンダリングするように、クライアント側のエンコーディングの問題ではありません:(

+0

代わりにフォームクラスにjsonレンダリングメソッドを実装し、テンプレート側でjsと解析できるデータを返します。 – mariodev

+0

あなたはそれを拡張する可能性があります! – Sevenearths

答えて

1

あなたが(代わりにこれを行うべきこと

class QuestionAddForm(forms.ModelForm): 
    # ... 

    def draft_json(self, request): 
     # use attribute or pass request to form init method 
     draft_data = request.session.get('draft', False) 
     return json.dumps(draft_data) 


# in your view 
context['draft_json'] = form.draft_json(request) 


# in template 
<script> 
    var draft_data = JSON.parse('{{ draft_json|safe }}'); 
    $scope.title = draft_data.title 
</script> 

ここでのポイントは、json形式を使用してデータをレンダリングおよび解析することです。 jsコードとテンプレートのレンダリングされたコンテンツが混在しないように、バックエンドのデータを渡す代わりに、ajaxを使用する方がはるかに良い方法です。

+0

これは、データがajaxフォームを介して別の場所から来て、ページの内容を簡単に更新できるようになっているかのように、良い考えです。ニース1 – Sevenearths

関連する問題