У меня есть следующие настройки AJAX с использованием Google Lite Design:
first.php
<button class="rhm_add_button" type="button" >
Show
</button>
<div class="rhm_add"></div>
<script>
jQuery(document).ready(function() {
jQuery('.rhm_add_button').click(function(e) {
e.preventDefault();
jQuery.ajax({
type: "GET",
url: "<?php echo admin_url('admin-ajax.php'); ?>",
dataType: 'html',
data: ({ action: 'rhmp_indi_form'}),
success: function(data){
jQuery('.rhm_add').html(data);
},
error: function(data)
{
alert("Error!");
return false;
}
});
});
});
</script>
functions.php
function rhmp_indi_form_callback() {
$template_part_path = 'page-parts/second_page';
get_template_part($template_part_path);
exit;
}
add_action('wp_ajax_rhmp_indi_form', 'rhmp_indi_form_callback');
add_action('wp_ajax_nopriv_rhmp_indi_form', 'rhmp_indi_form_callback');
Second_file.php
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="title" name="title"/>
<label class="mdl-textfield__label" for="title">Name</label>
</div>
Как вы можете видеть, я использую MDL, и когда содержимое загружается через ajax, они не работают должным образом, и я нашел следующее решение от github: https://github.com/google/material-design-lite/issues/1043
Решение было в том, что мне нужно использовать «componentHandler.upgradeDom ();» после вызова AJAX, и я не уверен, как это сделать.
У кого-нибудь есть идеи, как это реализовать?
Спасибо!
Вызов componentHandler.upgradeDom()
после того, как вы сделали вставку любых динамических элементов в DOM.
В вашем случае звоните после jQuery('.rhm_add').html(data)
success: function(data){
jQuery('.rhm_add').html(data);
window.componentHandler.upgradeDom(); },