Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

2 Answers 2

up vote 0 down vote accepted

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 );

});
share|improve this answer

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);

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.