Trying to truncate string after it's called by loop via ajax - php

Question

I have a table which include names, the last name of each entry needs to be truncated ex. Miles Davis becomes Miles D.
I achieve this with the following JS:
$('.trunc-name').each(function (d, td) {
$(td).text($(td).text().replace(/^(\S+)\s+(\S).*/, '$1 $2.'));
});
and the td class is set to trunc-name:
<td class="trunc-name"><?php foreach ($resident_name_terms as $object) { echo $object->name; } ?></td>
Those table contents (which are actually WP taxonomy terms) are filterable via a select form - the options of which are getting truncated too.
Select:
if( $terms = get_terms( array(
'taxonomy' => 'resident_name',
'orderby' => 'name'
) ) ) :
echo '<select name="resident_name_filter"><option value="" selected="selected">' . __( 'All Residents', 'mv' ) . '</option>';
foreach ( $terms as $term ) :
echo '<option class="trunc-name" value="' . $term->term_id . '">' . $term->name . '</option>';
endforeach;
echo '</select>';
endif;
So far everything works fine. The problem is that when I change criteria via a select option for that column (built with AJAX), the newly outputted values are not truncated.
Query Params:
$relation = 'AND';
$params = array();
$args['tax_query']['relation'] = $relation;
foreach ( $taxonomies as $tax ) {
if( isset( $_POST[ $tax . '_filter' ] ) && !empty( $_POST[ $tax . '_filter' ] ) ) {
$args['tax_query'][] = array(
'taxonomy' => $tax,
'field' => 'id',
'terms' => $_POST[ $tax . '_filter' ],
);
}
};
Loop:
$query = new WP_Query( $args );
if( $query->have_posts() ) : ?>
<table style="width:100%" id="incident-reports">
<tr>
<th>Resident</th>
</tr>
<?php
while( $query->have_posts() ): $query->the_post();
$resident_name_terms = get_the_terms( $post->ID, 'resident_name' );
?>
<tr>
<td class="trunc-name"><?php foreach ($resident_name_terms as $object) { echo $object->name; } ?></td>
</tr>
<?php endwhile; ?>
</table>
endif;
Any help is, as always, greatly appreciated!

Answer 1

You need to run the truncate code in the success: function after it creates the new elements.
$.ajax({
...
success: function(response) {
... // code that adds the new HTML
$('.trunc-name').each(function (d, td) {
$(td).text($(td).text().replace(/^(\S+)\s+(\S).*/, '$1 $2.'));
});
}
});