Wordpress свопинг содержимого div с php do_shortcode

Question

У меня есть сценарий в моем заголовке wordpress. Я хочу динамически загружать форму в контейнер нажатием кнопки. Существует всего две формы и, конечно, одна кнопка для каждой формы.

Когда я храню функцию do_shortcode в переменной php, храните переменную php в переменной jquery, выполняется короткий код. Когда я изменяю значение html контейнера с переменной, отображающей переменную do_shortcode php, она НЕ отображает форму, а только значение короткого кода. Что я делаю не так?

<?php $cf7Shortcode = do_shortcode("[contact-form-7 id='11' title='form']"); ?> 

<script type="text/javascript"> 
$(document).ready(function() { 

    var form1 = <?php echo $cf7Shortcode ?>, 
     form2 ='test', 

     button1 = $('#btn1'), 
     button2 = $('#btn2') 

     formContainer = $('#form-container'); 


    button1.on("click", function(){ 
     formContainer.html(form1); 
    }); 

    button2.on("click", function(){ 
     formContainer.html(form2); 
    }); 

}); 


</script> 

Answer 1

В файле functions.php вашей темы мы хотим объявить функцию ajax, которую хотим запустить.

add_action('wp_ajax_get_contact_form', 'get_contact_form'); 
add_action('wp_admin_ajax_get_contact_form', 'get_contact_form'); 

Это будет зарегистрировать АЯКС крючок для функции get_contact_form

function get_contact_form(){ 
    if(isset($_GET['form_id'])): 
     echo do_shortcode("[contact-form-7 id='$_GET['form_id']' title='form']"); 
    endif; 
    exit(); //need this, or you'll have issues with getting '1' back as a value 
} 

Теперь, когда вы делаете запрос Ajax с action: get_contact_form, он будет пытаться запустить описанную выше функцию. Поскольку мы не передаем параметры в функцию, мы собираемся проверить, было ли установлено form_id, если бы это было так, мы вернем короткий код. Мы должны выходить независимо.

Давайте настроим наш вызов ajax.

buttons.click(function(){ 
    $.ajax({ 
     url: ajaxurl, //global variable provided by WP 
     type: 'GET', 
     data: { 
      'action' : 'get_contact_form', 
      'form_id' : $(this).data('form') 
     }, 
     success: function(data){ 
      formContainer.html(data); 
     } 
    }); 
}); 

Ключевые фигуры выше $(this).data('form'), которая является data attribute. Похоже, у вас есть контроль над разметкой, поэтому добавьте ссылку на идентификатор формы вы хотите, чтобы добраться до HTML, как это ->

data-form="11" 

Второй ключевой частью является success:function(data){, когда запрос Аякса является успешный, он вернет данные и сделает их HTML-кодом formContainer. В нашем случае это будет форма.

Наконец, вместо использования id's используйте кнопки class для ваших кнопок.

class="ajax-form-button" 

Тогда вместо var button1 =/button 2 =, просто сделать buttons = $('.ajax-form-button'). Тогда нам не нужно создавать кучу функций click/ajax, потому что мы разрешаем логике обрабатывать атрибут data-form. Это будет держать код минимальным и многоразовым.

Я не думаю, что я ничего здесь не забыл.