steve Kim steve Kim - 7 months ago 15
PHP Question

MDL- componentHandler.upgradeDom(); after ajax call

I have following ajax setup using Google material design lite:

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>


As you can see I am using the MDL and when the contents are loaded via ajax, they do not work properly and I found the following solution from the github: https://github.com/google/material-design-lite/issues/1043

The solution was that I need to use "componentHandler.upgradeDom();" after the ajax call and I am not sure how to do it.

Does anyone have an idea how to implement this?

Thanks!

Answer

Call componentHandler.upgradeDom() after you have done inserting any dynamic elements into the DOM.

In your case, call it after jQuery('.rhm_add').html(data)