can’t bind a function to `beforeShowDay` from jQuery UI

  • Resolved AnDurugkar

    (@andurugkar)


    7 years, 8 months ago

    Hi,
    I am new to CMB2 trying to create a plugin for event calendar and In a form I want to bind date picker to a function that will check the already available event dates and dont let user to click them when booking for new event.

    A function here https://jsfiddle.net/yXMKC/2714/ is in working condition just for to use in beforeShowDay method of jQuery Ui datepicker and failing to do that

    below is my code for the field

    $cmb->add_field( array(
    ‘name’ => __( ‘Date of Booking’, ‘wds-post-submit’ ),
    ‘id’ => $prefix . ‘date_of_booking’,
    ‘type’ => ‘text_date’,
    ‘default’ => __( ”, ‘wds-post-submit’ ),
    ‘attributes’ => array(
    // CMB2 checks for datepicker override data here:
    ‘placeholder’ => ‘Date of Booking’,
    ‘required’ => ‘required’,
    ‘readonly’ => ‘readonly’,
    ‘data-datepicker’ => json_encode( array(
    ‘beforeShowDay’ => check_available,
    ‘yearRange’ => ‘2017:2018’,
    ‘minDate’ => $todays_date,
    ) ),
    ),
    ‘date_format’ => ‘d-m-Y’,
    ‘before_row’ => ‘<br><p>BOOKING INFORMATION</p>’,

    ) );

    I get an error Uncaught TypeError: q.apply is not a function

    I tried following

    function check_available(datep) {
    availableDates = [“9-5-2017”, “14-5-2017”, “15-5-2017”];

    dmy = datep.getDate() + “-” + (datep.getMonth()+1) + “-” + datep.getFullYear();
    // console.log(dmy+’ : ‘+($.inArray(dmy, availableDates)));
    if ($.inArray(dmy, availableDates) != -1) {
    return [false, ” “,”Not Available”];
    } else {
    return [true,” “,”Available”];
    }
    }

    also I tried binding
    function check_available(datep) {
    return [true,” “,”Available”];
    }
    no success!

    Can you please guide me on this?
    Thanks & Regards,
    Anil Durugkar

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Biggest thing I can notice is probably the lack of quotes around the ‘check_available’ in the json_encode spot.

    Beyond that, after piecing together what I think the setup may be, I got to a point of “datepicker is not a function” and the q.apply error once I click the input but i’m also loading my quick js above in the admin head which may still be playing a part in things. I don’t know exactly where all your parts are being loaded at the moment.

    Thread Starter AnDurugkar

    (@andurugkar)

    Hi,
    Thanks for your reply,

    I already tried the quotes arount the ‘check_available’ in the json_encode spot and then tried without it and also I don’t get datepicker is not a function. As you said the error q.apply is once click on the input yes I also have the same.

    My loading order of js is
    1) jquery.js
    2) jquery-migrate.min.js?ver=1.4.1
    3) jquery/ui/effect.min.js?ver=1.11.4
    4) body
    5) jquery/ui/core.min.js?ver=1.11.4
    6) jquery/ui/datepicker.min.js?ver=1.11.4
    7) wp-content/plugins/cmb2/js/cmb2.min.js?ver=2.2.4
    8) wp-content/plugins/events-booking/js/eve_script.js?ver=4.7.3 having the only function check_available(datep) {
    availableDates = [“9-5-2017″,”14-5-2017″,”15-5-2017”];
    dmy = datep.getDate() + “-” + (datep.getMonth()+1) + “-” + datep.getFullYear();
    if (jQuery.inArray(dmy, availableDates) != -1) {
    return [true, “”,”Available”];
    } else {
    return [false,””,”unAvailable”];
    }
    }

    I replaced $.inArray(dmy, availableDates) to jQuery.inArray(dmy, availableDates)
    Today I have created html version of the datepicker and checked the above function it works perfectly alright.

    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    So I asked Justin, the lead dev for CMB2, and this is what he came back with.

    You can’t really set a JS callback in PHP, because json_encode simply sets it to a string.

    You’ll need to add any JS callbacks before CMB2 reads from the data attribute to setup the object, meaning you’ll need your JS to load before CMB2’s

    jQuery( function( $ ) {
	$( document ).on( 'cmb_pre_init', function() {
		var $input = $( '#date_of_booking' );
		var data = $input.data( 'datepicker' );
		data.beforeShowDay = function() {};
		$input.data( 'datepicker', data );
	} );
});

    Note: may not be a perfect fit to your need, so play around as necessary.

    Thread Starter AnDurugkar

    (@andurugkar)

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘can’t bind a function to `beforeShowDay` from jQuery UI’ is closed to new replies.