Question

On my JSP page, I defined some javascript with a variable that get value from my controller model:

<!-- 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>

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

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

Here is the excerpt of my modal form:

<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>

The basic functionality of the page:

1. I would append a p tag with the form literal on page load

2. user will click on a button that popup a modal with a form that they can change firstname and lastname.

3. 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.
4. I would like to update the p tag with the updated firstname and lastname
5. close the modal.

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?

Any insight would be greatly appreciated!!! Thanks in advance.

Answer 1

This variable:

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

is being assigned a string equal to the first and last names as they are when that line is executed. It does not get automatically updated if/when those form.checkout properties are changed. So as shown by the alerts that you have commented:

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

The form.checkout.firstName and .lastName properties have changed, but this doesn’t result in a change to billingStr – if you want billingStr to take a new value you have to set it again.

“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.”

That is correct. It’s just you haven’t changed the variable that you are trying to use.

Some notes unrelated to your actual problem:

Having declared formBody = $("#billing-checkoutForm"), formBody references a jQuery object and you can then call jQuery methods on it directly like formBody.find(...) or formBody.anyJqueryMethod() – you don’t need to say $(formBody).find(...).

Also $(formBody).find("#billing-firstname") is unnecessarily complicated: you are selecting #billing-firstname by id and id should be unique – that is, you should not ever have more than one element on the page with the same id – so you can simply say $("#billing-firstname").

And a terminology thing: you can’t update an object literal, but you can update the object that was created from the literal.