Получите Ajax для открытия модального окна, вызовите функцию PHP и поместите результаты в модальное окно

Всю ночь я играл с тем, как этого добиться, но не могу понять. При нажатии я прошу вызов AJAX, чтобы открыть модальное окно и сделать вызов функции PHP. Я хочу, чтобы результаты этого вызова функции PHP открывались внутри модального окна.

Я переместил скрипт, попытался добавить его в сам запрос AJAX, попытался сделать .show на скрипте внутри PHP. Я что-то упустил, но мог бы помочь.

Я знаю, что функция PHP вызывается через AJAX, потому что в консоли я увижу результат. Однако модальное окно не открывается на странице. Сам мод не открывается

ЗВОНОК НАЖМИТЕ

<a href = "javascript:void(0)" class = "button seated-btn" onclick = "toptions('+val.wait_id+')" data-id = "'+val.wait_id+'"> 

АЯКС ВЫЗОВ

function toptions(){
        jQuery.ajax({
            type: 'post',
    url: my_ajax.ajax_url,
    data: {
    action: 'options'
            },      
    success: function (data) {
    ("#myModal").show()
             ;}
        }); 
    }

PHP-ФУНКЦИЯ

    function options(){ 
    global $wpdb;
    global $available;
    $check_availability = $wpdb->get_results($wpdb->prepare("SELECT  `id` FROM mytablename "));
    if (!empty($check_availability)){
     foreach($check_availability as $available){echo "ID Number" . str_repeat('&nbsp;', 5) . $available->id. "<br>\n";
        }
    }
else {echo "No Available";};
        ?>
    
    <!-- The Modal -->
    <div id = "myModal" class = "modal">
    
      <!-- Modal content -->
      <div class = "modal-content">
        <span class = "close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>
    
    </div>
    <script>
    jQuery('document').ready(function(){
    // Get the modal
    var modal = document.getElementById("myModal");
    
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on the button, open the modal
    btn.onclick = function() {
      modal.style.display = "block";
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    } 
    });
    </script>
            <?php
    }

HTML

<!-- The Modal -->
<div id = "myModal" class = "modal">

  <!-- Modal content -->
  <div class = "modal-content">
    <span class = "close">&times;</span>
    <p> <!-- HERE IS WHERE  I WANT THE PHP RESULTS TO SHOW--></p>
  </div>

</div>

где вы используете action: options в функции PHP ??

KUMAR 25.12.2020 06:28

он вызывает функцию PHP

Kris 25.12.2020 06:47

что вы получаете в action в function options(){}

KUMAR 25.12.2020 06:49

Что ты имеешь в виду? в действии он вызывает функцию PHP, которая работает. Чего он не делает, так это запускает модальное окно. Однако я получаю правильный ответ в консоли.

Kris 25.12.2020 07:02

что ты видишь внутри консоли? Также этот модал находится на какой странице вызывающей страницы?

Swati 25.12.2020 07:34

подождите, вы отправляете обратно html для модального окна, а также javascript для его активации? У меня был бы модал уже в html, и я бы использовал ответ ajax, чтобы заполнить и активировать его. Я лично отправляю только json vis ajax.

Tim Morton 25.12.2020 14:00

К вашему сведению, ваш ajax не вызывает функцию php. Вы совершенно не поняли, почему используется ajax: php выполняется только на сервере, а не в браузере. ajax аналогичен отправке формы обратно на сервер, только в фоновом режиме, чтобы ваша страница не обновлялась. Ваше действие должно указывать на URL. Взгляните на исходный код html в вашем браузере; вы не увидите php-код, потому что он был проанализирован на сервере и не существует к тому времени, когда ваш браузер отображает html.

Tim Morton 25.12.2020 14:26

@timmorton спасибо, тогда какое решение / лучший способ? Я продолжаю изменять код, чтобы следовать тому, как другие предложили, что, как мне кажется, отодвигает его дальше. Когда вы упоминаете наличие модального окна в HTML?

Kris 25.12.2020 18:23
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
1
8
1 225
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте следующий код.

Вам нужно добавить id в тег <p>, где вы хотите добавить ответ php от ajax.

АЯКС ВЫЗОВ

    function toptions(){
            jQuery.ajax({
                type: 'post',
        url: my_ajax.ajax_url,
        data: {
        action: 'options'
                },      
        success: function (data) {
        $("#myModal").show();
        $("#my-data").html(data); //Add this line
}
            }); 
        }

HTML

<div id = "myModal" class = "modal">

  <!-- Modal content -->
  <div class = "modal-content">
    <span class = "close">&times;</span>
    <p id = "my-data"> <!-- HERE IS WHERE  I WANT THE PHP RESULTS TO SHOW--></p>
  </div>

</div>

Спасибо за помощь! Это имеет смысл с идентификатором в теге <p>. При этом сама модель вообще не открывается. Меня интересует запуск модального окна и его скрипта, если он у меня в нужном месте внутри функции PHP, и если при вызове функции PHP будет ли он запускать скрипт с HTML?

Kris 25.12.2020 07:01

Чтобы отобразить modal , в успешном обратном вызове попробуйте заменить $("#myModal").show(); на $("#myModal").modal('show');

Harpal Singh 25.12.2020 07:14

Другие вопросы по теме