Support

Account

Home Forums ACF PRO Custom Preview Button Not Working

Solving

Custom Preview Button Not Working

  • Hi All.
    I added a custom preview button and used it, but updating to version 5.7, the following script no longer works.

    (function($) {
      $(document).on('click', '#custom-preview', function(e) {
        e.preventDefault();
        $('#post-preview').click();
      });
    })(jQuery);

    Do you know what is causing it?

  • I will add more accurate information.
    Added custom preview button with reference to https://rudrastyh.com/wordpress/fullscreen-preview-button.html. Custom preview buttons worked without problem until ver 5.6.
    When updating to version 5.7, clicking the button will reload the page.
    How can I solve it?

    // functions.php
    add_action('acf/input/admin_enqueue_scripts', 'my_enqueue_scripts');
    function my_enqueue_scripts()
    {
      global $pagenow;
    
      if ( 'post-new.php' == $pagenow || 'post.php' == $pagenow ) {
        wp_enqueue_script('custom-preview', get_template_directory_uri() . '/js/custom-preview.js');
      }
    }
    
    // custom-preview.js
    (function($) {
      acf.addAction('load_field/type=flexible_content', function() {
        $(document).on('click', '#custom-preview', function(e) {
          e.preventDefault();
          $('#post-preview').click();
        });
      });
    })(jQuery);
    
  • For version 5.7 of ACF the JavaScript API was rebuilt. This is probably the cause of your script not working, but I’m not sure really. The documentation for the new api is here https://www.advancedcustomfields.com/resources/javascript-api/

  • Thank you for your reply.
    I found that it works when adding the following event to “acf.validation events” on line 12847 of acf-input.js.

      acf.validation = new acf.Model({
    
        /** @var string The model identifier. */
        id: 'validation',
    
        /** @var bool The active state. Set to false before 'prepare' to prevent validation. */
        active: true,
    
        /** @var string The model initialize time. */
        wait: 'prepare',
    
        /** @var object The model actions. */
        actions: {
          'ready':  'addInputEvents',
          'append': 'addInputEvents'
        },
    
        /** @var object The model events. */
        events: {
          'click input[type="submit"]': 'onClickSubmit',
          'click button[type="submit"]':  'onClickSubmit',
          'click #save-post':       'onClickSave',
          'mousedown #post-preview':    'onClickPreview', // use mousedown to hook in before WP click event
          'submit form':          'onSubmit',
          'mousedown #custom-preview':    'onClickPreview' // Add New
        },

    However, I didn’t know how to add this process without changing the core file. (I know that filters model.filters exists, but I didn’t know how to write correctly.)
    How can I add events to acf.validation?

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Custom Preview Button Not Working’ is closed to new replies.