Обновления Javascript буквального на странице с помощью асинхронной функции

Question

На моей странице 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. Я бы добавить ар тег с формой буквального на странице load

2. пользователь нажмет кнопку, которая выведет модальную форму с формой, в которой они могут изменить имя и фамилию.

3. Когда пользователь нажимает «Сохранить изменения» на модальном, задайте для него form.checkout.firstName и form.checkout.lastName с новыми значениями. Я намерен использовать form.checkout как объект, который будет представлен позже. Поэтому точность важна.
4. Я хотел бы обновить тег p обновленным именем и фамилией
5. закрыть модальный.

Возможно, я смущен. Я думал, что могу обновить литеральный объект js, установив его как: form.checkout.firstName = "something". Неужели я ошибаюсь? Я вижу, что переменная внутри моей функции меняется, но она не влияет на внешнюю. Я думал, что когда переменная, объявленная как var на странице, имеет глобальную область. Таким образом, его можно манипулировать в любом месте страницы. Я тоже ошибаюсь?

Любое понимание было бы благодарно !!! Заранее спасибо.

Answer 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 и .lastName свойства были изменились, но это не приводит к изменению billingStr - если вы хотите billingStr принять новое значение, которое вы придется снова установить его.

«Я думал, что когда переменная, объявленная как страница на странице, имеет глобальную область действия, ее можно манипулировать в любом месте страницы».

Это правильно. Просто вы не изменили переменную, которую вы пытаетесь использовать.

Некоторые замечания, не относящиеся к вашей актуальной проблеме:

Объявив formBody = $("#billing-checkoutForm"), formBody ссылается на объект JQuery, а затем вы можете вызывать методы JQuery на него непосредственно, как formBody.find(...) или formBody.anyJqueryMethod() - вам не нужно говорить $(formBody).find(...).

Также $(formBody).find("#billing-firstname") излишне сложно: вы выбираете # billing-firstname по id, а идентификатор должен быть уникальным - то есть вы не должны иметь более одного элемента на странице с тем же идентификатором - так что вы можете просто сказать $("#billing-firstname").

И терминологическая вещь: вы не можете обновить объект literal, но вы можете обновить объект, который был создан из литерала.