[Resolved] GeneratePress Theme Interfering with Targeting ACF fields via Javascript

Home Forums Support GeneratePress Theme Interfering with Targeting ACF fields via Javascript

  • This topic has 5 replies, 3 voices, and was last updated 4 months ago by Elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1516107
    RUBEN

    I’m using Advanced Custom Fields Pro to add some fields to the admin page of a custom post type and would like to use Javascript to complete some actions when one of the fields is changed, however it appears that the GeneratePress theme is interfering with this.

    I’ve verified that it is the theme by changing to the TwentyTwenty theme and checking that things do work as intended there, as you can see in this video: https://www.awesomescreenshot.com/video/1578295?key=fb0ae62a8f38ec44eee1061f8eb1779c

    And comparing the HTML for the fields shows that they’re identical, so it has to be related to something that the GeneratePress theme does to the admin pages:

    <div class="acf-field acf-field-radio acf-field-5f58a5c865197" data-name="free_without_registration" data-type="radio" data-key="field_5f58a5c865197">
    <div class="acf-label">
    <label for="acf-field_5f58a5c865197">Free without registration<a href="#" class="post-edit-field-name-info dashicons dashicons-info acf-js-tooltip" title="free_without_registration">free_without_registration</a></label></div>
    <div class="acf-input">
    <input type="hidden" name="acf[field_5f58a5c865197]"><ul class="acf-radio-list acf-hl" data-allow_null="0" data-other_choice="0"><li><label class=""><input type="radio" id="acf-field_5f58a5c865197" name="acf[field_5f58a5c865197]" value="No" checked="checked">No</label></li><li><label class="selected"><input type="radio" id="acf-field_5f58a5c865197-Yes" name="acf[field_5f58a5c865197]" value="Yes">Yes</label></li></ul></div>
    </div>
    <div class="acf-field acf-field-radio acf-field-5f58a5c865197" data-name="free_without_registration" data-type="radio" data-key="field_5f58a5c865197">
    <div class="acf-label">
    <label for="acf-field_5f58a5c865197">Free without registration<a href="#" class="post-edit-field-name-info dashicons dashicons-info acf-js-tooltip" title="free_without_registration">free_without_registration</a></label></div>
    <div class="acf-input">
    <input type="hidden" name="acf[field_5f58a5c865197]"><ul class="acf-radio-list acf-hl" data-allow_null="0" data-other_choice="0"><li><label class=""><input type="radio" id="acf-field_5f58a5c865197" name="acf[field_5f58a5c865197]" value="No" checked="checked">No</label></li><li><label class="selected"><input type="radio" id="acf-field_5f58a5c865197-Yes" name="acf[field_5f58a5c865197]" value="Yes">Yes</label></li></ul></div>
    </div>

    The code I’m trying to use is very simple and was provided by ACF, when I thought the issue was on their end:

    jQuery('input:radio[name="acf[field_5f58a5c865197]"]').change(
        function(){
            //if (jQuery(this).is(':checked')) {
                alert(jQuery(this).val());
            //}
        });

    Any help would be greatly appreciated!

    #1516544
    David
    Staff
    Customer Support

    Hi there,

    can you test this without the Child Theme to see whether that is the issue.

    #1516566
    RUBEN

    I should have mentioned that in the original post, but yes it does happen with the base GeneratePress theme, too.

    #1516765
    Elvin
    Staff
    Customer Support

    Hi,

    This normally happens when a script is only being enqueued on a particular theme only.

    I’ve read the functions.php of all of your themes inside the site.

    Your script works only on TwentyTwenty theme because you only enqueued the script there as shown here:
    https://share.getcloudapp.com/geuqKDe5

    Moving or adding this code to the functions.php of the child theme should make the script work on the child theme too:

    function my_admin_enqueue_scripts() {
    
    	wp_enqueue_script( 'date-picker-js', 'https://ctvt.redlotusaustin.com/wp-content/themes/ctvt/js/admin-js.js', array(), '1.0.0', true );
    
    }
    
    add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts');

    As shown here: https://share.getcloudapp.com/d5upjkLE

    A wise man once said:
    "Have you cleared your cache?"

    #1516933
    RUBEN

    He Elvin,

    Thank you for your response. The additional admin script is enqueued on line 551 of functions.php in the child theme but it was being enqueued in a different way from the TwentyTwenty theme; it looks like the necessary piece was the additional parameters in the wp_enqueue_script() function: “, array(), ‘1.0.0’, true”

    function add_custom_js_to_admin( $hook ) {
      wp_enqueue_script( 'ctvt_admin_js', get_stylesheet_directory_uri() . '/js/admin-js.js?ver=' . filemtime(get_stylesheet_directory_uri() . '/js/admin-js.js'), array(), '1.0.0', true );
    }
    add_action('admin_enqueue_scripts', 'add_custom_js_to_admin');

    Adding those seems to have fixed the issue.

    Thank you again for your assistance!

    #1516974
    Elvin
    Staff
    Customer Support

    Good catch!

    No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.