0

jquery.load（）関数を使用してポップアップdivにフォームを読み込んでいますが、これまでのところうまく機能しています。私が追加したいのは、フォームがエラーで送信されると、現在実行している実際のフォームページにリダイレクトするのではなく、エラーマークアップフォームをポップアップdivにロードして戻すことです。

誰かが私が完全に機能すると思うjquery-formを使用することを勧めました。どうやって実装したらいいのかわからない。

.load（）関数は次のとおりです。 

$(document).ready(function(){
        $(".create").on("click", function(){
            $("#popupContact").load("/cookbook/createrecipe #createform");
        });
});

フォームを読み込むページは次のとおりです。

<div id="popupContact" class="popup">
        <a id="popupContactClose" style="cursor:pointer;float:right;">x</a>
        <p id="contactArea">
        </p>
</div>
<div id="backgroundPopup">
</div>  
<div id="col2-footer">
{% paginate %}
</div>

これが私のフォームテンプレートです：

<div id="createform">
<h1>Create New Recipe</h1>
    <form id="createrecipe" action="{% url createrecipe %}" method="POST">
        <table>
            {% csrf_token %}
            {{ form.as_table }}
        </table>
        <p><input type="submit" value="Submit"></p>
    </form>
</div>

これがjquery-formを使用する私の試みです：

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        var options ={
            target: '.popup',
    };
    $('#createrecipe').submit(function() {
        $(this).ajaxSubmit(options); 
        return false;
    }); 
});
</script>

createrecipeビュー：

def createrecipe(request):
    if not request.user.is_authenticated():
        return HttpResponseRedirect('/index/')
    else:
        if request.method == 'POST':
            print 1
            form = RecipeForm(request.POST)
            if form.is_valid():
                print 2
                recipe = form.save(commit=False)
                recipe.original_cookbook = request.user.cookbooks.all()[0]
                recipe.pub_date = datetime.datetime.now()
                recipe.save()
                user = request.user
                cookbooks = user.cookbooks
                cookbook = cookbooks.all()[0]
                cookbook.recipes.add(recipe)
                return HttpResponseRedirect('/account')
        else:
            form = RecipeForm()

        return render_to_response('cookbook/createrecipe.html',
                                    {'form':form},
                              context_instance=RequestContext(request))

ありがとうsnackerfish

4

2 に答える 2

0

JavaScriptの構文にエラーがありました。すべて問題ありません。

于 2012-04-25T23:44:56.077 に答える
0

とにかく jquery を使用するため、ajax 経由でフォームを送信する必要があります。そうしないと、リダイレクトされます。

 $('#createform form').submit(function(e) {
 e.preventDefault();
 $.post("/your views url/", { 
            data: $('#createform form').serialize(),
            },function(data){ //this is the successfunction 
                              //data is what your view returns}
 });

ビューは、JavaScript 内でエラーを処理できるように、エラーを json として返す必要があります。

from django.utils import simplejson

def ajax_recipe(request):
    if request.method == 'POST':
        form = YourForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponse("ok")
        else:
            errors = form.errors
            return HttpResponse(simplejson.dumps(errors))
    else:
        data = "error"
        return HttpResponse(data)

そのマークアップを使用すると、jquery post success 関数を使用して、必要な場所にフォーム エラーを配置できます。

if(data == "ok"){do something}
// else error handling
var errors = jQuery.parseJSON(data)
if(errors.somefield){//place errors.somefield anywhere}

コードはテストされていないことに注意してください。しかし、それは私が行く方法です。

編集

これを機能させるには、カスタム X-CSRFToken ヘッダーを各 XMLHttpRequest の CSRF トークンの値に設定する必要があることに注意してください。つまり、テンプレート内の django ドキュメントからスクリプトをコピーして貼り付けます: https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax

それが Form.py 内でエラーを発生させる方法です

def clean_somefield(self):
        somefield = self.cleaned_data.get('some field')
        if not somefield:
            raise forms.ValidationError(u'This field is required.')
于 2012-04-23T20:47:06.973 に答える