2

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.

2 Answers 2

3

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

});
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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