Перезагрузка модального окна
 

На странице div у которого изначально - display: none. И есть кнопка которая его открывает в модальном окне (fancybox). Эта часть работает.

В div-e, который показывает модальное окно, находится простая форма с полем <input>, кнопкой <submit> и строкой "TOTAL". Эта форма отправляет в базу некое число, и дальше оно там либо складывается, либо вычитается и результат возвращает с строку "TOTAL", через переменную - $count . Cтраница перезагружается и в строке "TOTAL" уже новое число.

Это то же работает но если без модального окна. Мне нужно что бы результат выводился в модальное окно.

Как сделать так что бы при перезагрузке страницы модальное окно то же перезагрузилось?

Вот основная часть кода.

<script>
   $('.open_box').fancybox();
</script>
 
<a href="#hide_box" class="open_box">open</a>

<div id="hide_box" style="width:950px;display: none;">

    <p id="TOTAL"><?php echo $count->get_total(); ?></p>

    <div class="my-form">
    
         <div class="label-count"><label for="count_code">Count</label></div>
         <div class="input-wrap"><input name="count_code" class="input-count" id="count_code" value="" /></div>
         <input type="submit" class="button-count" name="apply_count" value="Apply Count" />
       
    </div>

</div>

Спасибо всем кто откликнется. :thanks:

отправлять данные аяксом, получать результат (некое число), запихивать его в $("#TOTAL").text(...)

Мне для этого нужно будет обработчик формы поменять на Ajax?

Если да, то так не получится.
Эта форма уже обрабатывается на сайте и я обработчик менять не могу.

Если глупость сморозил - сильно не бейте ))... я в ajax не разбираюсь... я больше по php специализируюсь. А тут клиенту приспичило вывести свою форму в модальное окно, что бы она просто "прикрыла" собой ту форму что уже отлажена и работает на сайте.

Можно подробнее?

Вот у меня есть переменная $count. Изначально в ней лежит - 1. После ввода в input числа 999 и отправки его в обработчик (который менять нельзя) - тот обработчик суммирует 999 с текущим значением переменной $count = 1 и результат 999 + 1 = 1000 он записывает в базу и возвращает в переменную $count. При этом перезагрузив окно.

В какую цепь мне нужно вставить ajax? И можно подробнее?

Спасибо.

вообще никак? или можно смотреть определенный параметр запроса, и при необходимости возвращать только <?php echo $count->get_total(); ?> ?

впрочем, если нельзя, то хрен с ним.

кнопке назначить type="button"
повесить онклик (onclick="countClick();"), в котором и отправить запрос:

function countClick() {
  var url = form.action;
  $.post(url, {count_code: $("#count_code").val(), apply_count: "Apply Count"}, function(data) {
    if (/<p\s+id="TOTAL">(\d+)/i.test(data)) { 
       $("#TOTAL").text(RegExp.$1);
    }
  });
}

примерно так. Если форма отправляется как GET, то используй $.get вместо $.post

Яростный Меч, спасибо. Вроде бы идею я понял... сейчас попробую реализовать.

Яростный Меч,

не получилось так.

Видимо обработчик завязан на кнопку type="submit" и когда я его меняю на type="button", то форма перестает обрабатываться.

Может все же как то можно это модальное окно заставить не закрываться когда перезагружается страница? Разрешить его закрывать только кнопкой close.

да.
но форма и не должна сабмиттиться. Тебе надо просто взять данные с формы и отправить их аяксом. onclick не забыл повесить на кнопку?

Ага, onclick не забыл.

Все равно что то не сходится... как же основной обработчик будет выполнять подсчет, если он ждет отработки type="submit" ?

Извини, может я глупые вопросы задаю, но лучше разобраться чем тупо копипастить код.

В консоли вот такое сообщение висит:


Uncaught ReferenceError: form is not defined
countClick
onclick

а, это из-за строчки var url = form.action;
я в верстке форму не увидел, оставил так. В общем, тебе надо будет скриптом взять форму и ее атрибут action

Понятно.

Тогда ещё один вопрос - в form на страницу php выводит следующую строчку:

<form action="http://localhost/ ... / ... /page-4/" method="post">

Но линк этот формируется динамично вот его php вариант:

<form action="<?php echo esc_url( $count->get_count_url() ); ?>" method="post">

Как его правильно прописать скрипту?

<form id="count_form" action="<?php echo esc_url( $count->get_count_url() ); ?>" method="post">

и тогда в скрипте

var url = $("#count_form").attr("action");

блин... не работает

и в консоли ничего нет и никакой реакции на отправку данных.

консоль молчит, а Network зафиксировалась отправка POST статус - OK

Куда смотреть, где искать?

посмотреть делали запроса, что ушло, что вернулось

должны уйти данные, а вернуться некий html, в котором будет строчка <p id="TOTAL">

а где посмотреть детали запроса?

на вкладке Network браузерного отладчика

По моему он ничего не передал.

Если я в правильном месте смотрел, то вот что там получаем после отработки onclick:

Form Data
count_code:
apply_count:Apply Count

Сейчас код выглядит вот так:

<script>
   $('.open_box').fancybox();
</script>
 
<a href="#hide_box" class="open_box">open</a>

<div id="hide_box" style="width:950px;display: none;">

<form id="count_form" action="<?php echo esc_url( $count-get_count_url() ); ?>" method="post">

    <p id="TOTAL"><?php echo $count->get_total(); ?></p>

    <div class="my-form">
    
         <div class="label-count"><label for="count_code">Count</label></div>
         <div class="input-wrap"><input name="count_code" class="input-count" id="count_code" value="" /></div>
         
         <input type="button" onclick="countClick();" class="button-count" name="apply_count" value="Apply Count" />

         <script>
                function countClick() {
                   var url = $("#count_form").attr("action");
                   $.post(url, {count_code: $("#count_code").val(), apply_count: "Apply Count"}, function(data) {
                      if (/<p\s+id="TOTAL">(\d+)/i.test(data)) { 
                        $("#TOTAL").text(RegExp.$1);
                      }
                   });
                }
        </script>
       
    </div>

</form>

</div>

Уже вдоль и поперек все перепроверил, по идее должно работать... но не работает.

странно... $("#count_code").val() возвращает пустую строку. А в текстовом поле был текст перед отправкой?

Вот именно, там было число.

я сегодня перерыл все, но так и не нашел куда деваются данные.

Сейчас пытаюсь обойти это другим способом.

Создал другой шаблон, на который перенаправляю после отправки этого input-а. Этот (второй) шаблон полностью копия первичной страницы с которой было открыто модальное окно, но тут запускаем модальное окна по onload а не onclick.

Возможно это кривое решение, но пока что кошерного выхода не вижу...