0

Есть скрипт, который заменяет один див на другой в зависимости от введенного значения в поле _calculated_price_ :

var price = document.getElementById('calculated_price').innerHTML;
var mainBlock = document.getElementsByClassName('home-main-block_price')[0];
if (price == 1) {
    var modal = document.getElementById('modal');
    modal.classList += ' visible';
    mainBlock.classList += ' hidden';}

при загрузке страницы, поле _calculated_price_ пустое. Оно формируется после загрузки страницы, путем подсчета стоимости. Как сделать так, чтоб скрипт срабатывал при каждом изменении значения _calculated_price_ и если значение поля становится 1, то вызывал модальное окно:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <p>Позвоните нам!</p>
        </div>
    </div>
</div>

Это див вывода подсчетов из формы:

<div class="home-main-block_price">
    <p>цена</p>
    <span>
        <p id="calculated_price" style="display: inline-block; font-size: 34px;></p>
    </span>
        <p>с НДС</p>
    <button type="button">Заказать</button>
</div>

Это скрипт, который берет расчеты из контроллера и записывает в айдишник calculated_price:

<script>
        function calc(){
            $('#calculated_price').load('/sum/?'+$('#form').serialize());
        }
    </script>

Если вручную ввести значение в поле _calculated_price_ то при загрузке страницы, скрипт срабатывает и появляется модальное окно. В AJAX'е не силен. Всем спасибо.

4
  • Добавьте минимальный рабочий пример как работает код сейчас. 17 мар 2017 в 10:41
  • @MrFylypenko Вот ссылка где значение calculated_price равно, например 10 (jsfiddle.net/hsuut13L), а вот ссылка, где значение равно 1 (jsfiddle.net/hsuut13L/1). Если цена сформировалась и равна 1, то скрипт срабатывает и выдает модальное. Как реализовать, чтоб при каждом изменении цены, этот скрипт "смотрел" на изменения без перезагрузки страницы?
    – Viktor
    17 мар 2017 в 10:53
  • при изменении цены пересчитываете размеры о которых вы говорите, и по условию далее открываете окно или нет. Какая проблема? 17 мар 2017 в 11:35
  • @ВасилийБарбашев дело в том, что этот скрипт работает при перезагрузке страницы. А значение цены формируется динамически. Когда вводишь вес 100кг записывается одна цена, тут же стираешь и вводишь другой вес - цена опять меняется. Это все без перезагрузки страницы. Как можно навесить эту функцию на обработчик аякса. Помогите.
    – Viktor
    17 мар 2017 в 11:47

1 ответ 1

0

Изменил Ваш пример, добавил в функцию calc колбек, который выполнится после подгрузки страницы.

function calc() {
  $('#calculated_price').load('/sum/?' + $('#form').serialize(), function() {
    var price = document.getElementById('calculated_price').value;
    var mainBlock = document.getElementsByClassName('home-main-block_price')[0];
    if (price == 1) {
      var modal = document.getElementById('modal');
      modal.classList += ' visible';
      mainBlock.classList += ' hidden';
    }
  });
}
.modal-dialog {
  display: none;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}
<div class="home-main-block_price">
  <p>цена</p>
  <span>
        <p id="calculated_price" style="display: inline-block; font-size: 34px;"></p>
    </span>
  <p>с НДС</p>
  <button type="button">Заказать</button>
</div>

<div class="modal-dialog" id="modal">
  <div class="modal-content">
    <div class="modal-body">
      <p>Позвоните нам!</p>
    </div>
  </div>
</div>

14
  • так суть функции пропала - замена дивов. (jsfiddle.net/988cajkw) calculated_price должен быть в первом диве. Я так понимаю тут должен быть асинхронный запрос к полю calculated_price АЯКСОМ.
    – Viktor
    17 мар 2017 в 12:02
  • как можно в данном примере применить объект XMLHttpRequest к изменению значений в поле <p id="calculated_price"></p>??
    – Viktor
    17 мар 2017 в 12:11
  • Как оно изменяется сейчас, по какому событию? 17 мар 2017 в 12:13
  • цена в <p id="calculated_price"></p> генерируется в контроллере, после ввода веса, и возвращается в значение блока calculated_price также без перезагрузки страницы.
    – Viktor
    17 мар 2017 в 12:17
  • 1
    @vp_arth оказывается да, нажмите на кнопку в примере 17 мар 2017 в 15:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.