Updating Javascript literal on the page using asynchronous function
<p>On my JSP page, I defined some javascript with a variable that get value from my controller model: </p>

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

<p>On the same page, I have included a js file(checkout.js), which will popup a form to change those value on the page. </p>

<pre><code>// 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(); 
 }); 
</code></pre>

<p>Here is the excerpt of my modal form: </p>

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

<p></p>

<p>The basic functionality of the page: </p>

<ol>
<li><p>I would append a p tag with the form literal on page load</p></li>
<li><p>user will click on a button that popup a modal with a form that they can change firstname and lastname. </p></li>
<li>When user click "Save changes" on the modal, set form.checkout.firstName and form.checkout.lastName with the new values. I intend to use form.checkout as object to be submitted later on. So the accuracy are important.  </li>
<li>I would like to update the p tag with the updated firstname and lastname</li>
<li>close the modal.</li>
</ol>

<p>Maybe I am confused. I thought I can update a js literal object by setting it's field like so form.checkout.firstName = "something". Am I wrong about that? I can see that the variable inside my function is changing, but it doesn't affect the one in the outside. I thought that once a variable declared as var in a page has the global scope. Thus it can be manipulated anywhere in the page. Am I wrong about that too? </p>

<p>Any insight would be greatly appreciated!!! Thanks in advance. </p>
