WordPress модальный AJAX загрузить PHP-файл по нажатию

Question

привет, если кто-нибудь может подсказать, как загрузить мой собственный файл php в мою тему WordPress. Я хочу загружать файл php только при нажатии модальной кнопки

 var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0]; 
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";
  }
}   

<class id="myBtn"><p>load modal</p> </class>

    <!-- Trigger/Open The Modal -->
    <span class="close">&times;</span>

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

      <!-- Modal content -->
      <div class="modal-content">
    <div class="modal-body">


   please wait while content loads .....


  <?php get_template_part( 'content-modal.php' ); ?>

     </div>
      </div> </div>

любые предложения будут наиболее благодарны, спасибо

Answer 1

Если вы хотите загрузить новые данные без перезагрузки текущей страницы, тогда используйте AJAX

Ajax отправит запрос в указанный файл url и получит содержимое файла в success function

Добавитьследующий код:

btn.onclick = function() {
  modal.style.display = "block";
  $.ajax({
  type:'GET',
  url:'content-modal.php',
  success: function (data){//received content
  $(".modal-body").empty();
  $(".modal-body").append(data);
  }
  });
}

HTML :

<!-- Trigger/Open The Modal -->
    <span class="close">&times;</span>
    <!-- The Modal -->
    <div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
    <div class="modal-body">
   please wait while content loads .....
     </div>
      </div> </div>

Answer 2

Насколько я понимаю, вы хотите получить информацию с сервера после загрузки страницы и нажатия кнопки myBtn. В этом случае вы не сможете получить информацию или php-код с сервера, если не вызовете функцию ajax или не отправите запрос (например, GET / POST), который приведет к перезагрузке страницы.