Question

业务逻辑

用户可以在临时工作时进行设置，更新和删除。我为jQuery UI设置了multiDatePicker。它允许用户选择多个日期。

目前如何运作

用户可以选择多个日期，他们的日期通过ajax发布到日历控制器

问题

我可以很好地访问我的回调函数中的日期但是当我尝试在回调函数之外检索先前选择的日期时，它似乎不起作用。所以我想要完成的是以下内容。

用户选择几个不同的日期然后关闭日历。他们稍后会回来，可以看到他们之前选择的日期。

CalenderController

public function calendar(){
    $id = Auth::user()->id;
    $user_ids = DB::table('availability')->lists('user_id');
    $comma_separated = implode(",", $_POST['dates'] );


        if (empty($user_ids )){

            DB::table('availability')->insert(array('user_id' => $id, 'dates_available' => $comma_separated));
            return Response::json(array("dates" => $comma_separated));

        }else{

            foreach ($user_ids as $user_id){

                //if user id exit then add new dates
                if ($user_id == $id)  {


                    DB::statement("update availability set dates_available = concat(dates_available, ',{$comma_separated}') where user_id = '{$id}'");
                    return Response::json(array("dates" => $comma_separated));


                }
            }


        }



}

JS / AJAX

 var today = new Date();
    var y = today.getFullYear();
    var arr=[];
    $('#dashboard-availability-calender').multiDatesPicker({
        addDates: "how do i retrieve the dates from db ?",
        minDate: today,
        numberOfMonths: [1,1],
        showCurrentAtPos: today.getMonth(),
        onSelect: function(date) {

            var found = jQuery.inArray(date, arr);
            if (found >= 0) {
                // Element was found, remove it.
                arr.splice(found, 1);
            } else {
                // Element was not found, add it.
                arr.push(date);
            }
        }
    });

    $( ".mdp_button" ).click(function( event ) {
        event.preventDefault();

        console.log('user clicked');
        for ( var i = 0; i < arr.length; i = i + 1 ) {
            console.log("dates selectd " +  arr[ i ] );
        }

        if (arr.length === 0) {
            alert("No dates selected.");
        } else {

            var dates = jQuery("form#mdp_form").serialize() + "&" + $.param({ dates: arr }, false);

            $.ajax({
                url: '/user/dashboard',
                data: dates,
                type: 'POST',
                beforeSend: function() {
                    jQuery('.ui-datepicker-calendar').addClass('calenderDisabled');
                    $('.mdp_button').button('loading');
                },
                success: function(data) {
                    //I can retrieve my data like this data.dates 
                    setTimeout(function () {
                    jQuery('.sending').hide().remove();
                        jQuery('.mdp_button').addClass('btn-success').button('complete');
                        jQuery('.mdp_button').removeClass('btn-success').button('reset');
                        jQuery('.ui-datepicker-calendar').removeClass('calenderDisabled');
                        jQuery('#response').html('<div class="alert alert-success fade in"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Your dates have been saved successfully</div>');
                    }, 500)

                }

            });
        }
    });

Answer 1

试试这个：

$.ajax({
url: '/user/dashboard',
data: dates,
type: 'POST',
async: false,     <-----------------------------ADD THIS
beforeSend: function() {
    jQuery('.ui-datepicker-calendar').addClass('calenderDisabled');
    $('.mdp_button').button('loading');
}

如何使用javascript检索PHP数据

1 个答案: