Измененные параметры не передаются в модальное окно fancybox?

Question

Есть форма-калькулятор.

Результат работы - открытие модального окна Fancybox в режиме фрейма.

Т.е. пользователь заполняет форму, на кнопке генерится data-src такого вида: "/.ajax/call.p3?x1=20&x2=20&dl_long=2000". При клике на кнопку открывается модальное окно.

Параметры корректно передаются только 1 раз, после загрузки страницы. Т.е., если закрыть модальное окно, изменить параметры в форме, кликнуть на кнопке с обновленным data-src, передадутся параметры, которые были при первом клике кнопки.

Код:

$(document).ready(function() {
  function calcParam() {
    calc = $('.calc__form').serialize();
    $('.calc__submit').attr('data-src', '/.ajax/call.p3?' + calc);
    //alert(calc);
    console.log(calc);
    $.ajax({
      type: 'POST',
      url: '/.ajax/calc/otlivy.p3',
      data: calc,
      success: function(msg) {
        $(".calc__amount").html(msg);
      },
      error: function() {}
    });
  }

  $('.calc__form').on('input', function() {
    calcParam();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<form method="post" class="calc__form">
  <input name="coef" value="1" type="hidden">
  <input name="xparam" value="2" type="hidden">
  <div class="calc__form--line">
    <div>
      <div class="calc__form--label">
        Длина X1:
      </div>
      <div class="calc__form--field"><input name="x1" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
      </div>
    </div>
    <div>
      <div class="calc__form--label">
        Длина X2:
      </div>
      <div class="calc__form--field"><input name="x2" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
      </div>
    </div>
  </div>
  <button class="btn anim calc__submit" data-type="iframe" data-fancybox="" data-src="/.ajax/call.p3">Отправить заявку</button>
</form>

В call.p3, грубо говоря (у меня просто не php):

if (isset($_POST)) {
    print("x1" . $_POST['x1']);
    print("x2: " . $_POST['x2']);
}

Выводятся только первые отправленные параметры. Через консоль браузера можно посмотреть

Это кеш? Особенность работы fancybox?

Answer 1

Интересный баг. Победить не удалось. Если вызывать модальное окно по другому - работает.

$(document).ready(function() {
  function calcParam() {
    var calc = $('.calc__form').serialize();
    $.ajax({
      type: 'POST',
      url: '/.ajax/calc/otlivy.p3',
      data: calc,
      success: function(msg) {
        $(".calc__amount").html(msg);
      },
      error: function() {}
    });
  }

  $('.calc__form').on('input', function() {
    calcParam();
  })
  
   $('.calc__form').submit(function(e){
    e.preventDefault();
    var data = $(this).serialize();     
    $.fancybox.open({src: '/.ajax/call.p3?'+data, type: 'iframe'});
   })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<form method="post" class="calc__form">
  <input name="coef" value="1" type="hidden">
  <input name="xparam" value="2" type="hidden">
  <div class="calc__form--line">
    <div>
      <div class="calc__form--label">
        Длина X1:
      </div>
      <div class="calc__form--field"><input name="x1" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
      </div>
    </div>
    <div>
      <div class="calc__form--label">
        Длина X2:
      </div>
      <div class="calc__form--field"><input name="x2" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
      </div>
    </div>
  </div>
  <button class="btn anim calc__submit">Отправить заявку</button>
</form>

БЛОГ НА HUSL

Измененные параметры не передаются в модальное окно fancybox?

Ответы (1 шт):