0

JQuery UI ダイアログ (モーダル モード) を使用して、Django を使用して動的に生成されたフォームを表示する Web ページに取り組んでいます。基本的な流れは次のとおりです。

  • ユーザーがボタンをクリックする
  • jquery (AJAX を使用) は、フォームの html を返す get リクエストを発行し、それを使用してダイアログに入力します。
    • html には、正常にロードされ、期待どおりに動作するフォーム上の UI を処理するスクリプト タグが含まれています。
  • ユーザーがフォームに入力して [完了] をクリックすると、フォームが送信されます。

この問題は、ユーザーがフォームでエラーを起こしたときに発生します。サーバーは、エラーを表示するように変更された元のフォーム (スクリプトを含む) を使用して、投稿要求 (フォームを送信する) に応答します。スクリプトが 2 回目に読み込まれると、「Uncaught ReferenceError: $ is not defined (anonymous function)」が返されます。スクリプトは、正常に動作したときとまったく同じです。このプロセス全体を通して明確にするために、ページは決して更新されません。

モーダルを処理する JavaScript の要点は次のとおりです。

var add_container = $("#add_container");

add_container.dialog({...})

function show_form(form,response_func) {
    add_container.html(form);
    add_container.dialog("open");
    $("#add_form").submit(function (event) {
        return submit_form($(this),response_func);
    });
}

function submit_form(form,response_func) {
    add_container.append('<p>Adding...</p>');
    //this is a trick to upload a file without reloading the page
    form.attr('target','upload_target');
    $('#upload_target').load(function() {
        var response = $('#upload_target').contents().find('body').html();
        add_container.dialog("close");

        resp_obj = $(response)
        if (resp_obj.is('form')) {
            //***this is what reloads the form when there is an error
            show_form(response,response_func);
        } else {
            response_func(resp_obj);
        }

    });
}

$('#add_link').click(add_link);
function add_link() {
    $.get('/add_link', function(data) {
        function add_response(response) {
            //handle successful submission
        }
        show_form(data,add_response);
    });
}

//...more stuff that is not important

これは、/add_link から返される html の要点です。

<script type="text/javascript" src="/scripts/add_form.js" ></script>
<form id="add_form" enctype="multipart/form-data" action="/add_link/" method="post">
<!-- Dynamically generated form here !-->
</form>

add_form.js は、jQuery を使用する非常に標準的な JavaScript ファイルです。$(document).ready(function () {...} ) で始まり、最初の $ は ReferenceError が発生する場所です

クリックされたものに基づいてフォームを動的に生成する必要があるため、すべてを静的にページに配置することはできません。スクリプトは動的に生成されないため、必ずしも動的にロードする必要はありませんが、独自のファイルに保持する方法がわかりませんでした。また、フォームがロードされたときにのみ実行します。同じ効果を達成するための別の方法の提案を歓迎します。

4

2 に答える 2

0

フォームアクションは、jQueryフレームワークスクリプトなどを含むものとは異なる相対パスを指しています。

<script type="text/javascript" src="/scripts/add_form.js" ></script>
<!-- src="/scripts" -->

<form id="add_form" enctype="multipart/form-data" action="/add_link/" method="post">
<!-- action="/add_link" -->

フォームの送信後にフレームワークが読み込まれることを確認するには、ブラウザの開発者ツールなどを使用して、jQueryスクリプトsrcのheadタグを確認します。まだありますか？

于 2013-03-21T16:56:47.853 に答える
0

MelanciaUK のおかげで、フォームを iFrame に送信すると、スクリプトが実行される場所に最初に応答が送信され、iFrame が独自のページとして扱われ、メインにロードされた jQuery にアクセスできないため、エラーが発生することに気付きました。ページ。

add_form スクリプトの動的な読み込みをなくすことで問題を解決し、他のすべてのスクリプトと同じように、ページが読み込まれるときに単純に読み込むことにしました。追加フォームが開かれたときにのみスクリプトを実行するために、 ( .triggerを使用して) カスタム jQuery イベントを作成しました。これはまさに私が望んでいた方法で機能しました。

これが同様の問題を抱えている人に役立つことを願っています。ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-03-24T05:03:44.720 に答える