0

JSPページで、コントローラーモデルから値を取得する変数を使用してJavaScriptを定義しました。

<!-- checkout.jsp excerpt -->
<script type="text/javascript">
var form = {}; 
form.checkout = {
                 "firstName" : ${checkoutForm.firstName}, // John 
                 "lastName": ${checkoutForm.lastName}     // Doe
                }; 
</script>
<script type="text/javascript" src=SOME_DOMAIN/static/js/checkout.js"></script>

同じページに、ページ上の値を変更するためのフォームをポップアップするjsファイル（checkout.js）を含めました。

// Somewhere in "checkout.js"
var billingStr = form.checkout.firstName + ' ' +  form.checkout.lastName;

$("#billing-info-Modal").find(".modal-footer").find(".btn-primary").click(function(e){
    var formBody =  $("#billing-checkoutForm");
    // 3. update the js literal object on the page
    // alert(billingStr); result John Doe 
    form.checkout.firstName =  $(formBody).find("#billing-firstname").val(); // Peter
    form.checkout.lastName = $(formBody).find("#billing-lastname").val();    // Grimes
    // alert(form.checkout.firstName + ' ' + form.checkout.lastName); // Peter Grimes
    // alert(billingStr); result John Doe still!!

    // 4. update Billing address section
     $('#billingAddress').find('p').html(billingStr);
     // 5. close the modal
     $("#billing-info-Modal").modal('hide'); 
     e.preventDefault(); 
 });

これが私のモーダルフォームの抜粋です。

<div class="modal hide" id="billing-info-Modal">
<table id="billingTable">
            <tr class="required">
                <td><label for="billing-firstname">First Name <span>*</span></label></td>
                <td><form:input id="billing-firstname"
                        path="bFirstName" cssClass="textField" /> <form:errors
                        path="bFirstName" cssClass="errors" /></td>
            </tr>
            <tr class="required">
                <td><label for="billing-lastname">Last Name <span>*</span></label></td>
                <td><form:input id="billing-lastname"
                        path="bLastName" cssClass="textField" /> <form:errors
                        path="bLastName" cssClass="errors" /></td>
            </tr>
</table>
 <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
   </div>

ページの基本機能：

  1. ページの読み込み時にフォームリテラルを使用してapタグを追加します

  2. ユーザーは、ファーストネームとラストネームを変更できるフォームでモーダルをポップアップするボタンをクリックします。

  3. ユーザーがモーダルで[変更を保存]をクリックしたら、form.checkout.firstNameとform.checkout.lastNameに新しい値を設定します。後で提出するオブジェクトとしてform.checkoutを使用するつもりです。したがって、精度が重要です。
  4. 更新された名と姓でpタグを更新したい
  5. モーダルを閉じます。

多分私は混乱しています。form.checkout.firstName = "something"のようにフィールドを設定することで、jsリテラルオブジェクトを更新できると思いました。私はそれについて間違っていますか？関数内の変数が変化していることがわかりますが、外部の変数には影響しません。ページでvarとして宣言された変数がグローバルスコープを持つと思いました。したがって、ページ内のどこでも操作できます。私もそれについて間違っていますか？

どんな洞察も大歓迎です!!! 前もって感謝します。

4

1 に答える 1

1

この変数：

var billingStr = form.checkout.firstName + ' ' +  form.checkout.lastName;

その行が実行されたときの名前と名前に等しい文字列が割り当てられています。form.checkoutこれらのプロパティが変更された場合、または変更された場合、自動的には更新されません。あなたがコメントしたアラートによって示されるように：

alert(form.checkout.firstName + ' ' + form.checkout.lastName); // Peter Grimes
alert(billingStr); result John Doe still!!

およびプロパティが変更されましたが、これによって変更されることはありませんform.checkout.firstName。新しい値を取得する場合は、値を再設定する必要があります。.lastNamebillingStrbillingStr

「ページでvarとして宣言された変数がグローバルスコープを持つと思ったので、ページ内のどこでも操作できます。」

それは正しいです。使用しようとしている変数を変更していないだけです。

実際の問題とは関係のないいくつかの注意事項：

を宣言すると、jQueryオブジェクトformBody = $("#billing-checkoutForm")を参照し、またはformBodyのように直接jQueryメソッドを呼び出すことができます-と言う必要はありません。formBody.find(...)formBody.anyJqueryMethod()$(formBody).find(...)

また$(formBody).find("#billing-firstname")、不必要に複雑です。IDで＃billing-firstnameを選択し、idは一意である必要があります。つまり、ページ上に同じIDを持つ要素が複数存在しないようにする必要があるため、簡単に言うことができます$("#billing-firstname")。

また、用語としては、オブジェクトリテラルを更新することはできませんが、リテラルから作成されたオブジェクトを更新することはできます。

于 2012-06-08T03:28:05.147 に答える