Custom Fields
Re-Envisioned
Support Meta Box Builder calculation in fields | success/error-messages | jQuery version

  • Creator
    Topic
  • #22377
    Resolved jw_bln
    Participant

    I have a number field “Lenght” and a number field “Width” (Lenght = 2, Width = 3 >> 2 x 3 = 6).
    Now I want to calculate the default value of a third field called “Square Meters” based on the value of the two mentioned fields (in this case 6). Or it should be used as a conditional logic operator. How I can do this?

    Is this a case of custom callback with jQuery (function xx() { return true; })?
    Can you explain and show this using the above mentioned simple example.
    What I have to enter in the graphical MB-Builder in field > General > Default value?
    And where I have to place the jQuery to calculate? Inside that field or in an html-script tag?

    //////////////
    Is there a way to
    a) hide the standard success or error messages (on MB-form-level and on single field level) not using css-hide and
    b) catch the values with jQuery script (please create a small/simple example)

    //////////////
    Which jQuery is needed (frontend/backend) to work with metabox?
    What happens if I change WordPress to the newest version?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #22381
    Long Nguyen
    Moderator

    Hi there,

    > hide the standard success or error messages (on MB-form-level and on single field level)

    What is the success and error message? We can simply hide the messages with some custom CSS code without touching other complicated PHP code.

    > catch the values with jQuery script (please create a small/simple example)

    I’ve created three number fields with the corresponding ID: width, length, square_meters. Using a small Javascript code to get two fields value and set the square value for the field square_meters.

    jQuery(document).ready(function($) {
        $('body').on('keyup', '#width, #length', function() {
            var width = $('#width').val();
            var length = $('#length').val();
            var square_meters = width * length;
            $('#square_meters').val(square_meters);
        });
    });

    See more in my screen record https://www.loom.com/share/568c0be8096542c3bb05e2eb3fa6f75c.

    > Which jQuery is needed (frontend/backend) to work with metabox?
    What happens if I change WordPress to the newest version?

    Meta Box uses the jQuery version depend on WordPress core 1.12.4 when enqueueing the script file, you can just use array( 'jquery' ) for the $deps parameter.

    For more information, please follow the documentation.
    https://developer.wordpress.org/reference/functions/wp_enqueue_script/#comment-content-276

    #22394
    jw_bln
    Participant

    Hi, many thanks for the example given.
    This gives me a good idea how to go forward 😉

    Regarding jQuery version:
    If I am not using the old jQuery version of WordPress, but instead enquing the latest jQuery version all function of Meta Box (frontend and backend) are still working?

    Regarding hiding success message:
    Below you can see some screenshots of a trial to use/style an autocomplete field.

    1.) As you can see the green success message is completely wrong positioned.
    Therefore I would like to hide this message and create my own message using jQuery…
    So I am able to position/style the success or error messages in a way the design requires it.

    There are different additional issues as you can see:
    2.) I thought I can show the results inside the field (like multi-select field)
    3.) In addition, the result is even shown after I selected an item (Management + management)
    4.) “1 result is available” is even shown after CEO was selected and even after the submit button was pressend…
    To be honest, I was stopping after a while as it seems not to be possible to get exprected results…
    Maybe you can explain?

    Related to this:
    5.) Can I use an external submit button and hide the one used inside MB (e.g. for design reason) and using jQuery for submit function (if please show a simple example)?

    Thanks for your answer.

    Unfortunately there is no way to check the post before submitting – I hope the pictures are visible….

    1

    2

    3

    4

    #22396
    Long Nguyen
    Moderator

    Hi,

    Regarding jQuery version: Meta Box and extensions are compatible with the newest version of jQuery 3.5.1 but it’s not encouraged because of WordPress core use 1.12.4, using the newest version of jQuery might break some plugins/themes and it also breaks the Meta Box’s JavaScript function.

    As you can see the green success message is completely wrong positioned.
    Therefore I would like to hide this message and create my own message using jQuery…
    So I am able to position/style the success or error messages in a way the design requires it.

    It looks so weird when the form submitted and the field still shows next to the confirmation box. Could you please share the code which creates the field and shortcode to show the frontend form?

    I thought I can show the results inside the field (like multi-select field)

    The field autocomplete helps you to select an option from the list and show below the field, you can select other options after. If you want to show like the multi-select, please use the field select_advanced.

    Can I use an external submit button and hide the one used inside MB (e.g. for design reason) and using jQuery for submit function (if please show a simple example).

    Yes, you can create a custom button that has ID custom-submit then use this JavaScript code to hide the form submit button and trigger click this submit button when clicking the custom button.

    jQuery(document).ready(function($) {
        $('.rwmb-form-submit button').hide();
    
        $('body').on('click', '#custom-submit', function() {
            $('.rwmb-form-submit button').trigger('click');
        });
    });
    #22436
    jw_bln
    Participant

    Hi,
    thanks for your answer, will send you the link…

    Regarding Calculation of field value:

    Calculation-Example (with small changes) works well on the frontend, but not on backend fields.

    jQuery(document).ready(function() {
        jQuery('body').on('keyup', '#number_plan, #number_actual', function() {
            var p = jQuery('#number_plan').val();
            var s = jQuery('#number_actual').val();
            var delay = p * s;
            if ( delay != 0 ) (
                jQuery('#number_delay').val(delay)
            );
        });
    });

    In addition, I added conditional logic, but also a similar effect.
    </iframe>” alt=”1″ />

    It works on the backend but not on the frontend…

    Not sure why…

    Regarding jQuery version:
    OK, so changing to the newest version will break even MetaBox jquery/JS functions!
    So there is no real possibility…
    But WP will change jQuery-Version with the next version (2021??)…

    Regarding Submit-Button:
    Works well, thanks for the direction… !!

    Regarding hiding success message:
    Autocomplete versus Multi-select >> I don’t see a big difference.
    Both fields will give an array of results (but Autocomplete gives some ideas on how to fill). Can you create an option in Autocomplete to place the results inside the field?

    #22438
    Long Nguyen
    Moderator

    Hi,

    Regarding Calculation of field value

    Please follow this documentation to know how to enqueue scripts in the backend (admin area) https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/.

    Regarding jQuery version:

    Don’t worry, if there is any issue relates to the compatibility between Meta Box and WordPress core, we will release an update immediately to fix it.

    Regarding hiding success message:

    I’m going to create a featured request for the developer team to support an option to show the selected items in the field. Thank you.

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