Fields don’t reflect previous Quick Edit changes when clicking Quick Edit a second time

I’ve added a column to the edit screen and add an input for that column in the quickedit. Everything saves and displays like I’d expect with one small hiccup.

If I click on Quick Edit for a particular post, make a change to the custom input, and save…. well the column updates properly. However, if I click Quick Edit again (without refreshing the page) the custom input maintains the original input…. the input isn’t getting the new value, even though I am using .on(), inlineEditPost.revert() and even though the hidden value is being properly updated (I can see it with Chrome’s dev tools). Perhaps this is strictly a JS error, but I figured I would post here first.

This is the content of my custom column:

echo $sub = get_post_meta(get_the_ID(), 'kia_subtitle', true);
echo '<div class="hidden kia-subtitle-value">' . $sub . '</div>';

This is the jquery I am using to set the custom input’s value in Quick Edit mode:

$( '.editinline' ).on( 'click', function(){

    // revert Quick Edit menu so that it refreshes properly
    inlineEditPost.revert();

    posttitlelabel = $( ':input[name="post_title"]', '.inline-edit-row' ).parents( 'label' ); 
    tag_id = $( this ).parents( 'tr' ).attr( 'id' );    
    subtitle = $( 'div.kia-subtitle-value', '#' + tag_id ).text();  

    $( 'input.kia-subtitle-input', '.inline-edit-row' ).val( subtitle ).parents( 'label' ).insertAfter( posttitlelabel );

});

The posttitlelabel, and insertAfter parts are just to move the input so that it immediately follows the regular Title.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The solution was on the jquery side of things. The .on function needed to bubble upwards to be sure that it was always getting the most recent, ajax-added content. I only had to adjust the first line to be more aligned with jquery documentation for .on().

$( '#the-list' ).on( 'click', '.editinline', function(){

    // revert Quick Edit menu so that it refreshes properly
    inlineEditPost.revert();

    posttitlelabel = $( ':input[name="post_title"]', '.inline-edit-row' ).parents( 'label' ); 
    tag_id = $( this ).parents( 'tr' ).attr( 'id' );    
    subtitle = $( 'div.kia-subtitle-value', '#' + tag_id ).text();  

    $( 'input.kia-subtitle-input', '.inline-edit-row' ).val( subtitle ).parents( 'label' ).insertAfter( posttitlelabel );

});

Method 2

To populate a <select> element in this circumstance I found it necessary to use the setTimeout(..., 0) trick.

window.setTimeout(function(){
jQuery('#foo').val(bar);
}, 0);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0