0

I'm currently working on a plugin that adds a metabox to the post editing area of the dashboard. The metabox has "conditional" fields so I want to show/hide fields based on others, mostly for the user's sake.

I've added a JS file, which works, to add/remove classes for that effect. The JS works fine and so does my CSS.

However, any classes added or removed does not save once I hit the post's "update/publish" button. What step am I missing to ensure that when a post is saved, the state of my JS is saved as well? Do I have to use something like wp_localize_script to pass something between my JS/PHP?

I'm using jQuery since I only need JS for adding/removing classes. I thought Ajax would be overkill in this case, but I'm new to writing JS for a plugin, so open to hearing suggestions about best practices. Thanks in advance! :-)

PS: I'm open to being linked to specific resources if the explanation is too big to write here.


Not sure if this helps, but I'll drop my code in anyway. Here's is the enqueue for my files:

function admin_scripts_styles( $hook ) {
   if ( $hook !== 'post.php' ) {
       return;
   }

   //Yes, unfortunately, this is being done in a custom theme, not a plugin, hence get_template_directory_uri

   wp_enqueue_script( 'admin-featured-posts-scripts', get_template_directory_uri() . 'inc/admin-js/admin-featured-posts.js', [
    'jquery'
] );

    wp_enqueue_style( 'admin-featured-posts-scripts', get_template_directory_uri() . 'inc/admin-css/admin-featured-posts.css' );
}

//this gets called in an init() function but adding here for context
add_action( 'admin_enqueue_scripts', [ $this, 'admin_scripts_styles' ] );

And here is my function that adds/removes classes. This isn't my whole JS file, just the function for this question. Yes the file is being enqueued and yes, this is firing correctly. It also works no problem, but just doesn't "save" once I update/publish the post. It fires with an on change event handler.

function enableOptions() {
   var enableVal = $(this).attr('value'),
       fieldOptions = $('#fieldWrapper');

   if (enableVal === 'yes') {
       fieldOptions.removeClass('disabled');
   } else {
      fieldOptions.addClass('disabled');
   }
}

Here is what the saving function looks like with a nonce. The saving part works as far as saving field values when the post is published or updated.

public function save_featured_metabox( $post_id ) {
    $nonce_action    = 'featured_metabox_nonce_action';
    $nonce_name      = 'featured_metabox_nonce';
    $featured_fields = [
        0 => 'featured_field_one',
        1 => 'featured_field_two',
        2 => 'featured_field_three',
        3 => 'featured_field_four',
    ];

    if ( ! isset( $_POST[ $nonce_name ] ) || ! wp_verify_nonce( $_POST[ $nonce_name ], $nonce_action ) ) {
        return $post_id;
    }

    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return $post_id;
    }

    foreach ( $featured_fields as $featured_field ) {
        update_post_meta( $post_id, '_' . $featured_field, $this->sanitize_featured_fields( $featured_field ) );
    }
}

I've purposely simplified file/class names to post here as an example.

  • Why would HTML/CSS classes be saved? Can we see your code? It's very difficult/near impossible to advise without seeing the code – Tom J Nowell Sep 1 '17 at 15:52
  • @TomJNowell I didn't think my examples would be helpful - there isn't anything broken with the PHP/JS that I have. I just don't know what function or best practice I need to save the JS I apply on the dashboard. I've added some code examples anyway - let me know if that helps. Thanks! :-) – RachieVee Sep 1 '17 at 16:34
  • Thanks, I was hoping to see the code that does the saving though, I wouldn't want to write an answer that isn't relevant, CSS classes are entirely for show/visuals, they aren't data storage, I'd need to see what it is that's being disabled/enabled, and how you're passing the data to WordPress to advise though, are these checkboxes? Or maybe textareas? Toggles? – Tom J Nowell Sep 1 '17 at 17:07
  • 1
    @TomJNowell I've added what my save function looks like. It works saving field values using a nonce and saving as post meta. Can this be used to help save classes from those fields as well? Also these are radio buttons and one checkbox. – RachieVee Sep 5 '17 at 13:13
0

After some thought, my question might have been unclear, or there was way too much code to explain it in a compact way.

What I wanted was to apply classes to the metabox that show/hide an area based on a select box value within that metabox. The area contained radio buttons but weren't important to the overall question I asked - sorry for the confusion! I realized I didn't need to communicate with the PHP at all. The JS file I made would load every time the post gets published/updated.

In addition to the JS function I showed in my question as an example that fires on "change" for the #enable-field-here select box, I now have a function that fires on load. If the dropdown is set to yes, then the classes are handled, therefore "saving" the state of the metabox even after the post has been published/updated. It looks something like this in jQuery now. I continued down that path with any other areas affected by classes via JS with the same approach. Hope that helps someone in the future. :-)

var enableField = $( '#enable-field-here' );

setEnableDefault( enableField );
enableField.change( enableOptions );

function setEnableDefault( enableVal ) {
    var fieldOptions = $( '#fieldWrapper' );

    if ( enableVal === 'yes' ) {
        fieldOptions.removeClass( 'disabled' );
    } else {
        fieldOptions.addClass( 'disabled' );
    }
}

function enableOptions() {
    var enableVal    = $( this ).attr( 'value' ),
        fieldOptions = $( '#fieldWrapper' );

    if ( enableVal === 'yes' ) {
        fieldOptions.removeClass( 'disabled' );
    } else {
        fieldOptions.addClass( 'disabled' );
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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