0

Django 1.5 と Dojo 1.8 を使用しています。ボタンをクリックしたときに Dojo がフォームを Django ビューに送信するようにしようとしています。

これが私のDjangoビューです：

def report(request, report_id, report_url=None, template='report_parameters.html'):
    if request.method == 'POST':
        form = ReportParametersForm(request.POST)
        if form.is_valid():
            report_params = form.save()
            html = "Success!"
            return HttpResponse(html)
    else:
        form = ReportParametersForm()
        return render(request,template, {
            'form': form,
            'report_url': report_url,
            'report_id': report_id,
        })

htmlページは次のとおりです。

    <div id="report_body">
        <form data-dojo-type="dijit/form/Form" id="parameters_form" data-dojo-id="parameters_form">
            {% csrf_token %}
            <table>
                {{ form.as_table }}
            </table>
            <p><button id="submit_parameters" dojoType="dijit.form.Button" type="submit">Submit</button></p>
        </form>
    </div>
    <script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
        e.preventDefault();
        require(["dojo/dom", "dojo/request", "dojo/dom-form"], function(dom, request, domForm){
            on(dom.byId("submit_parameters"), "click", function() {
                console.log("Dojo Post");
                request.xhr("/report_parameters/report_id/report_url/", {
                    method: "post",
                    handleAs: "json",
                    data: domForm.toJson("parameters_form"),
                }).then(
                    function(response){
                        alert(response);
                        dom.byId("report_body").innerHTML = "Report!";
                    },
                    function(error){
                        dom.byId("report_body").innerHTML = "<div class=\"error\">"+error+"<div>";
                    }
                );
            });
        });
    </script>

ボタンをクリックすると、フォームにあるデータを渡す URL にリクエストをSubmit送信したいと考えています。POSTただし、現在、 をクリックSubmitすると、次のような URL でページがリロードされます/?csrfmiddlewaretoken=Y9gaNMFRWZNXMbJ2L3Ev7A5iKPGTuWeF&param_1=0&param2=0/report_parameters/report_id/report_url/。Dojo Postコンソールに表示されるはずの が表示されません。フォームを送信するにはどうすればよいですか?

4

2 に答える 2

0

このフィドルはあなたが望むことをするようです。

主な違いは次のようです。

  • は<form>、実際には<div>です。Formに関するDojo のドキュメントは、これが IE に対して行われる理由へのリンクです。
  • 関連するすべてのイベント スクリプトはフォーム内にあります<div>。
  • on(dom.byId("submit_parameters")...宣言的な送信イベント ハンドラーが既にあるため、コードを削除します。

HTML コード:

<div id="report_body"></div>
<div data-dojo-type="dijit/form/Form" id="parameters_form" data-dojo-id="parameters_form" encType="multipart/form-data" action="" method="">
    <input name="dummy" value="dummy">
    <script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
        console.log("submit");
        e.preventDefault();
        require(["dojo/dom", "dojo/request/xhr", "dojo/dom-form"], function(dom, xhr, domForm) {
            console.log("Dojo Post");
            var url = "/report_parameters/report_id/report_url/";
            var data = domForm.toJson("parameters_form");
            // overwrite url and data for jsfiddle
            url = "/echo/json/";
            data = {
                json: data
            };
            xhr(url, {
                method: "post",
                handleAs: "json",
                data: data,
            }).then(function(response) {
                alert(JSON.stringify(response, null, 2));
                dom.byId("report_body").innerHTML = "Report!";
            }, function(error) {
                dom.byId("report_body").innerHTML = "<div class=\"error\">" + error + "<div>";
            });
        });
    </script>
    <button data-dojo-type="dijit/form/Button" id="submit_button" type="submit" name="submitButton" value="Submit">Submit</button>
</div>

JS コード:

require(["dojo/parser", "dijit/registry", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox", "dojo/domReady!"], function (parser, registry) {
    parser.parse().then(function () {
        console.log("parsed");
        console.log(registry.byId("parameters_form"));
        console.log(registry.byId("submit_button"));
    });
});
于 2013-04-17T11:03:48.697 に答える
0

上記を少し変更する必要がありました。これは最終的に私のために働いたものです：

    <div id="report_body"></div>
    <form data-dojo-type="dijit/form/Form" id="parameters_form" data-dojo-id="parameters_form" encType="multipart/form-data" action="" method="POST">
        {% csrf_token %}
        <table>
            {{ form.as_table }}
        </table>
        <script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
            e.preventDefault();
            require(["dojo/dom", "dojo/request/xhr", "dojo/dom-form"], function(dom, xhr, domForm){
                var url = "/report_parameters/report_id/report_url/"
                var data = domForm.toObject("parameters_form")
                xhr(url, {
                    method: "post",
                    data: data,
                }).then(
                    function(response){
                        alert(response);
                        dom.byId("report_body").innerHTML = "Report!";
                    },
                    function(error){
                        dom.byId("report_body").innerHTML = error;
                    }
                );
            });
        </script>
        <p><button id="submit_parameters" dojoType="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button></p>
    </form>

<div>またはタグのいずれかを使用し<form>て全体をラップすると、うまくいきました。

于 2013-04-17T20:04:36.127 に答える