2

Play フレームワーク 2.1.3 を使用していますが、jquery と ajax を使用したフォームの検証に関して質問があります。この投稿 ( http://franzgranlund.wordpress.com/2012/03/29/play-framework-2-0-javascriptrouter-in-java/ )のアドバイスに従ってJavaScript ルーティングを設定しましたが、その部分は機能しています。すごい！エラーメッセージを含むレンダリングされたフォームを返し、それを自分のページに表示する 2 番目の部分について助けが必要です。私の問題を説明するために、次の例を作成しました。

ルート ファイルは次のようになります。

# AJAX calls
POST    /validateForm               controllers.Application.validateForm()

# JavaScript Routing
GET     /assets/javascripts/routes  controllers.Application.javascriptRoutes()

アプリケーション コントローラは次のようになります。

private static Form<User> form = Form.form(User.class);

public static Result validateForm() {       
    Form<User> boundForm = form.bindFromRequest();
            
    if (boundForm.hasErrors()) {            
        return badRequest(user_form.render(boundForm));
    } else {            
        return ok();
    }
}

public static Result javascriptRoutes() {       
    response().setContentType("text/javascript");
        return ok(Routes.javascriptRouter("jsRoutes", controllers.routes.javascript.Application.validateForm()
    ));
}

あまり技術的にならずに、Twitter Bootstrap を使用してフォームをレンダリングしているので、validateForm アクションによってレンダリングされ、呼び出し元の jquery に返される次のビュー要素 (フォームの検証とフォーム ヘルパーの詳細については、この投稿を参照してください) を作成しました。 ajax() .

@(userForm: Form[User])

@import helper._
@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) }

@form(routes.Application.createUser(), 'id -> "createUserForm") {
    <fieldset>
    <legend>New User</legend>
        @inputText(userForm("name"), 'class -> "form-control", 'placeholder -> "First Name")
        @inputText(userForm("surname"), 'class -> "form-control", 'placeholder -> "Last Name")
        <button id="createUserBtn" type="button" class="btn">Create User</button>
    </fieldset>                         
}

私はjqueryを使用しており、私のjavascriptファイルは次のようになります。この質問では、検証が失敗し、badRequest が返されると仮定します。

$("#createUserBtn").click(function() {
    jsRoutes.controllers.Application.validateForm().ajax({
        type: "POST",
        data: $("#createUserForm").serialize(),
        success: function(response) {
            // something here
        },
        error: function(response) {
            $("#createUserForm").html(response);
        }
    });
});

ビューについてあまり詳しく説明しませんが、JavaScript ファイルを正しくビューに含めて、#createUserForm という要素を追加します。

クライアント側とサーバー側の間の通信はうまくいっているようですが、応答に含まれるレンダリングされたビュー要素を .html(response) を介してページにロードできません。では、どうやってこれを達成するのでしょうか? どこで間違ったのですか？私はこれらの概念の多くにかなり慣れていないため、役立つ情報をいただければ幸いです。ありがとう。

アップデート：

2 つの変更により、このコードは美しく機能します。(1) ボタンを含むフォーム全体を置き換えるため、jQuerys .on() を使用してボタン クリック イベントを処理する必要があります。(2) responseText プロパティを呼び出すと、結果に含まれる html が正しく返されます。

$(document).on("click", "#createUserBtn", function() {
    jsRoutes.controllers.Application.validateForm().ajax({
        type: "POST",
        data: $("#createUserForm").serialize(),
         success: function(response) {
            // something here
        },
        error: function(response) {
            $("#createUserForm").html(response.responseText);
        }
    });
});

コメントはありますか？どうすればこれを改善できますか？

4

0 に答える 0