Support

Account

Home Forums Front-end Issues Can't display on front-end more than one field group with date picker field

Solved

Can't display on front-end more than one field group with date picker field

  • Hello to everybody,
    a day and a sleepless night trying to figure out why the front-end displays only the date picker field of the first “field_groups”. All fields of the other “field_groups” loaded on the same page are properly saved and displayed with the exception of the date picker fields type.
    I noticed that some classes and the id are not assigned to these. That is: the code of a working date field picker is typically similar to:
    <input type="text" value="" class="input active hasDatepicker" id="dp1397430542535">
    As in all the other date fields loaded after first “field_groups” code is:
    <input type="text" value="" class="input">
    Each field and “field_groups” have unique id and slug.
    The strange thing is that in the edit page on the back-end everything is working correctly.

    This is the code used in the template page:

    <!-- ACF CUSTOM FORM —>
    global $post;
      $var_page_id = $post->ID;
              <?php
    acf_form(array(
    	'post_id' => $var_page_id,
        'field_groups' => array('191'),
    	'form' => true, 
    	'form_attributes' => array( 
                'id' => 'form_setup',
                'class' => 'form_render ',
            ),
        'submit_value' => 'Salva dati',
    	'return' => get_permalink( $var_page_id ),
        'updated_message' => 'Dati correttamente salvati.', 
    ));
    ?>
              <h3>This is the value retrieved with "the_field" for the first date picker: <em><?php the_field('first_data', $var_page_id); ?></em></h3>
    <hr />
    <?php
    acf_form(array(
    	'post_id' => $var_page_id, 
        'field_groups' => array('198'),
    	'form' => true, 
    	'form_attributes' => array( 
                'id' => 'form_setup',
                'class' => 'form_render ',
            ),
        'submit_value' => 'Salva dati',
    	'return' => get_permalink( $var_page_id ),
        'updated_message' => 'Dati correttamente salvati.',
    ));
    ?>
    <h3>This is the value retrieved with "the_field" for the second date picker:<em> <?php the_field('second_data', $var_page_id); ?></em></h3>
              <!-- end ACF CUSTOM FORM -->

    I am enormously grateful to anyone who can give me a little help!
    🙂 Marcella

  • Hi Marcella,

    I’m having the same problem with a repeated form (one instance for adding posts another for editing)

    The date picker on the 2nd form is not working. From having a look at the example on your website you seem to have fixed it.

    I would really appreciate it if you could explain how you fixed it.

    Thanks

    Carlos

  • Hello Carlos! It took me a long time because I’m not an expert in code but, yes, I solved it. I don’t know if the solution I’ve found is the best, since I have modified some plugin source files that will be overwritten when updating, but for now it works!
    I’m glad to show you how I did it hoping that you find it useful.

    The problem is that the acf_form function surrounds the acf form with a <div id=“poststuff”> wrapper, and calling it twice will create two wrappers with this same id, and confuse the javascript.
    Maybe if you remove the addition of this wrapper from the acf_form() code, then wrap the fields manually it may work, but in my case I have too many forms in the same page and this solution would be impossible for me…. So here what I have done:

    – advanced-custom-fields / core / api.php
    LINE 1251 : <! - <div Id="poststuff"> ->
    LINE 1269 : enter here the div above together with the variable that stored the id of “group_fields” + class to use with the css styles:
    echo ' <div id="poststuff_' . $acf['id'] . '" class="stuffclass"> ' ;

    – advanced-custom-fields / js / input.js
    LINE 917 : change the absolute reference to the div “#poststuff” with the selector “all divs that start with “poststuff_”:
    $(document).trigger('acf/setup_fields', [ $("[id^='poststuff_']") ]);

    – advanced-custom-fields / js / input.min.js
    generated the new compressed code

    – advanced-custom-fields / css / input.css
    ROW 16 : Replaced reference id “#poststuff ” with reference class “.stuffclass”

    	.acf_postbox .inside,
    	.stuffclass .acf_postbox .inside {
    	margin: 0;
    	padding: 0;
    	}

    That’s all!
    If someone has a better solution or any further suggestions these would be well-accepted! 😉

  • Hey Marcella, thank you very much for this!

    Your solution worked for me too and ACF probably needs to be fixed according to your code.

    Hopefully an admin/author will see this post and flag it.

    Thanks again and best of luck with your website! x

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

You must be logged in to reply to this topic.