Javascript で Cakephp の正しい形式のデータ配列を取得するのに問題があります。Fullcalendar を使用してスケジューリング カレンダーを作成しており、イベントを配列にロードしました。
外部イベントは、別の div からカレンダーにドラッグされたユーザーであり、名前と userId を転送します。次に、カレンダーが初期化され、ユーザーがドロップされると、ユーザーがカレンダーに表示され、arrayOfEventsに追加されます。これは私たちが扱っている変数です。
$(document).ready(function() {
/* initialize the external events -----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()), // use the element's text as the event title
userId: this.id
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
editable: true,
events: [
<?php foreach ($users as $user) { foreach ($user['Event'] as $event): ?>
{
start: '<?php echo $event['start_date']; ?>',
end: '<?php echo $event['end_date']; ?>',
title: '<?php echo $event['title']; ?>',
allDay: false,
color: '#077169'
},
<?php endforeach; } ?>
],
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.end = (date.getTime() + 3600000) / 1000; // default shift length is 1 hour
copiedEventObject.userId = originalEventObject.userId;
copiedEventObject.allDay = false;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// Push events into array
arrayOfEvents.push(copiedEventObject);
console.log(arrayOfEvents);
}
});
}); // End document ready
var arrayOfEvents = [];
var data = {};
function updateSchedule() { // Function clicked on in link to send arrayOfEvents to controller to add to database
// You can get all events out of the array here
for (var i = 0; i < arrayOfEvents.length; i++) {
var event = arrayOfEvents[i];
data += "Event" + i
+ "&user_id=" + event.userId
+ "&start_date=" + event.start
+ "&end_date=" + event.end
+ "&title=" + event.title;
}
// Make your ajax post here
$.ajax({
type: "POST",
url: "<?php echo $this->webroot; ?>events/add",
data: data,
success: function(response) {
alert('done!');
},
fail: function(response) {
alert("error");
}
});
}
updateSchedule関数は onClick イベントに関連付けられており、ビューに送信されていますが、正しい形式ではありません。配列を次のようにする必要があります。
Array
(
[Event] => Array
(
[0] => Array
(
[user_id] => 'value'
[start_date] => 'value'
[end_date] => 'value'
[title] => 'value'
),
[1] => Array
(
[user_id] => 'value'
[start_date] => 'value'
[end_date] => 'value'
[title] => 'value'
)
)
)
現在、次のようになっています。
array(
'Event' => 'Event0',
'user_id' => '4',
'start_date' => 'Tue Apr 30 2013 11:30:00 GMT-0400 (Eastern Daylight Time)',
'end_date' => 'Tue Apr 30 2013 12:30:00 GMT-0400 (Eastern Daylight Time)',
'title' => 'value'
)
これを希望の形式に変更する方法が少しわかりません。