0

I m trying to write a reservation based on PHPJabbers' free script and unable to output the price when user selected a date. Here is the JavaScript code:

/**
 * @@@
 * DateTimePicker / Available Calendar (version)
 */
'use strict';

(function(factory) {
  if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function($) {
    var plugin_name = 'calendar',
            data_key = 'plugin_' + plugin_name,
            defaults = {
                modifier: 'datetimepicker', // wrapper class
                day_name: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], //  0-6 = sunday -> saturday
                day_first: 0,
                month_name: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                paging: ['<i class="prev"></i>', '<i class="next"></i>'],
                unavailable: [], // static data - to merge with dynamic data
                adapter: null, // host to get json data of unavailable date
                month: null, // month of calendar = month in js + 1, month in js = 0-11
                year: null, // year of calendar
                num_next_month: 0, // number of next month to show
                num_prev_month: 0, // number of prev month to show
                num_of_week: 6, // number of week need to show on calendar number/auto
                price: null,
                onSelectDate: function(date, month, year){} // trigger on select
            };

    var Plugin = function(options){
        var date = new Date();

        this.options = options;
        this.$element = $(options.element);
        this.options.year = this.$element.data('year') || this.options.year || date.getFullYear();
        this.options.month = this.$element.data('month') || this.options.month || date.getMonth() + 1;
        this.options.month--;
        //this.options.price = 0;

        // for plugin
        this.unavailable = []; // for check for unavailable dates
        //this.price = 0;
        this.init.call(this);
        return this;
    };

    Plugin.prototype = {
        init: function(){
            var _this = this;

            // re-sort day_name & create day_index
            this.day_index = [];
            this.options.day_name = this.options.day_name.slice(this.options.day_first).concat(this.options.day_name.slice(0, this.options.day_first));
            for (var i = 0; i < this.options.day_name.length; i++){
                this.day_index.push((this.options.day_first + i + 7) % 7);
            }
            this.update();
        },

        /**
         * Update data, get json from adapter, generate search keywords & send to adapter
         * @return {[type]} [description]
         */
        update: function(){
            var _this = this, months = this.getMonths();

            // get data
            if (typeof this.options.adapter === 'string'){
                $.getJSON(this.options.adapter, {
                    keys: $(months).map(function(item){
                        // format search key from js to database store
                        return this.year + '-' + (this.month <= 8?'0':'') + (this.month + 1);
                    }).toArray()
                }, function(data){
                    //console.log('update', data);
                    _this.unavailable = _this.options.unavailable.concat(data);
                    _this.draw(months);
                });
            }else{
                this.unavailable = this.options.unavailable;
                this.draw(months);
            }
        },

        /**
         * Draw months list to element
         * @param  {[type]} months array of {month: ..., year: ...} object
         * @return {[type]}        [description]
         */
        draw: function(months){
            this.$element.empty();
            for (var i in months){
                this.$element.append(this.getCalendar(months[i].month, months[i].year));
            }
        },

        /**
         * Get list of months need to show
         * @return {[type]} [description]
         */
        getMonths: function(){
            var date = new Date(), result = [];
            for (var i = this.options.month - this.options.num_prev_month; i <= this.options.month + this.options.num_next_month; i++){
                date.setFullYear(this.options.year);
                date.setMonth(i);
                result.push({
                    month: date.getMonth(),
                    year: date.getFullYear()
                });
            }
            return result;
        },

        /**
         * Load previous month
         * @return {[type]} [description]
         */
        prevMonth: function(){
            this.options.month--;
            this.update();
        },

        /**
         * Load next month
         * @return {[type]} [description]
         */
        nextMonth: function(){
            this.options.month++;
            this.update();
        },

        /**
         * [getCalendar description]
         * @param  {[type]} month 0 - 11 (Jan - Dec)
         * @param  {[type]} year  full year
         * @return {[type]}       dom element
         */
        getCalendar: function(month, year){
            var _this = this, date = new Date();
            date.setFullYear(year);
            date.setMonth(month);
            date.setDate(1);

            var day_first = date.getDay();

            // total date
            date.setMonth(date.getMonth() + 1);
            date.setDate(0);
            var total_date = date.getDate();

            // begin date
            var date_start = this.day_index.indexOf(day_first);

            // total week need to show
            var total_week;
            if (!isNaN(this.options.num_of_week)){
                total_week = 6;
            }else{
                total_week = Math.ceil((date_start + total_date)/7);
            }

            // draw
            return $('<div>').addClass(this.options.modifier).append([
                $('<div>').addClass('paging').append(function(){
                    return [
                        $('<span>').addClass('prev').append(_this.options.paging[0]).click(function(){
                            _this.prevMonth();
                        }),
                        $('<div>').addClass('month-name').append([_this.options.month_name[date.getMonth()], ', ', date.getFullYear()]),
                        $('<span>').addClass('next').append(_this.options.paging[1]).click(function(){
                            _this.nextMonth();
                        }),
                    ];
                }),
                $('<table>').append(function(){
                    return [
                        $('<thead>').append(function(){
                            return $(_this.options.day_name).map(function(index, element){
                                return $('<td>').append(element);
                            }).toArray();
                        }),
                        $('<tbody>').append(function(){
                            var ap = [];
                            for (var i = 0; i < total_week; i++){
                                ap.push($('<tr>').append(function(){
                                    var ap = [];
                                    for (var j = 0; j < 7; j++){
                                        var d = new Date();
                                        d.setFullYear(year);
                                        d.setMonth(month);
                                        //console.log(month, year);
                                        //d.setDate(1);
                                        d.setDate(-date_start + (j + 1)+(i*7));
                                        //var available = me.options.filter.call(me, d);
                                        ap.push($('<td>').addClass(function(){
                                            var cls = [];
                                            if (_this.isAvailable(d.getDate(), d.getMonth() + 1, d.getFullYear())){
                                                cls.push('available');
                                            }else{
                                                cls.push('unavailable');
                                            }
                                            if (d.getMonth() == date.getMonth()){
                                                cls.push('cur-month');
                                            }else{
                                                cls.push('near-month');
                                            }
                                            return cls.join(' ');
                                        }).data({date: d.getDate(), month: d.getMonth() + 1, year: d.getFullYear()}).append(d.getDate()).click(function(){
                                            var date = $(this).data('date'),
                                            month = $(this).data('month'),
                                            year = $(this).data('year');
                                            _this.options.onSelectDate.call(_this, date, month, year);
                                        }));
                                    }
                                    return ap;
                                }));    
                            }
                            return ap;
                        })
                    ];
                })

            ]);
        },

        /**
         * Check the date book: date, month, year have to in MySql format
         * Base on this.unavailable data / input MySql date format (support glob)
         * Eg: ['year-month-date', '*-month-date']
         * @param  {[type]}  date  [description]
         * @param  {[type]}  month month in javascript = 0-11, month in MySql = 1-12, so month input have to +1 before run this function
         * @param  {[type]}  year  [description]
         * @return {Boolean}       [description]
         */
        isAvailable: function(date, month, year){
            for (var i in this.unavailable){
                var book_date = this.unavailable[i].split('-');
                if (book_date.length !== 3){
                    return false;
                }else if (
                    (book_date[0] == '*' || book_date[0] - year === 0)  &&
                    (book_date[1] == '*' || book_date[1] - month === 0) &&
                    (book_date[2] == '*' || book_date[2] - date === 0)
                ){
                    return false;
                }
            }
            return true;
        },

        /**
         * Get the price of the selected date
         * @param  {[type]}  date  [description]
         * @param  {[type]}  month month in javascript = 0-11, month in MySql = 1-12, so month input have to +1 before run this function
         * @param  {[type]}  year  [description]
         */
        getPrice: function(date, month, year) {
            // get data
            $.getJSON("assets/calendar/server/pricelist.php", {
                keys: year + '-' + month + '-' + date
            }, function(data){
                //_this.unavailable = _this.options.unavailable.concat(data);
                //_this.draw(months);
                this.options.price = data;
                //alert(data);
                console.log('success 1', data);
                return data;
            });
        }
    };

    $.fn[plugin_name] = function (options){
        return this.each(function(){
            var data = $(this).data(data_key);
            if (!data){
                $(this).data(data_key, new Plugin($.extend({
                    element: this
                }, defaults, options)));
            }
            if (typeof options === 'string'){
                $(this).data(data_key)[options].call(this);
            }
        });
    };
}));

Here is my HTML:

<html>
<head></head>
<body>

<div class="col-xss-12 tab-pane active" id="all">
                        <div data-form-alert>
                            <div id="all-room-alert" class="data-form-alert-success" style="visibility: hidden">
                                <div id="all-room-alert-msg" class="alert alert-success text-center"></div>
                            </div>
                        </div>
                        <div id="show-next-month-all" data-toggle="calendar"></div>
                    </div>
    <script src="assets/web/assets/jquery/jquery.min.js"></script>
<!--<script type="text/javascript" src="assets/calendar/scripts/jquery.min.js"></script>-->
<script type="text/javascript" src="assets/calendar/scripts/dateTimePicker.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $('#show-next-month-all').calendar(
            {
                num_next_month: 2,
                num_prev_month: 0,
                adapter: 'assets/calendar/server/adapter.php',
                onSelectDate: function(date, month, year)
                {
//                    alert([year, month, date].join('-') + ' is: ' + this.isAvailable(date, month, year));
                    document.getElementById("all-room-alert").style.visibility = "visible";
                    if(this.isAvailable(date, month, year)) {
                        var price = this.getPrice(date, month, year);
                        console.log('success', price);
//                        alert(this.price);
                        document.getElementById("all-room-alert-msg").className = "alert alert-success text-center";
                        document.getElementById("all-room-alert-msg").innerText = [year, month, date].join('-') + ' is available and the price is ' + price;
                    } else {
                        document.getElementById("all-room-alert-msg").className = "alert alert-danger text-center";
                        document.getElementById("all-room-alert-msg").innerText = [year, month, date].join('-') + ' is not available';
                    }
                }
            });
</script>

The php file : (just for test)

echo(json_encode(array("IDR2,670,000")));

Now, the error that I got is price is undefined but when i look at the console, the data is there, just lagged behind.

When i try to output through console, the 'success' got undefined then below that line, i got 'success 1' and the price from the PHP file.

EDIT: Found out how to do it. Pretty much inside DatePicker.js, I added a new function called getPrice() and it takes in parameters date, month, year, alert-box-id. After calling getJson is done, it will append the result to the alert box.

2

1 Answer 1

0

You can use json_encode((your array), 1) and check the value of price.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.