날짜와 시간이있는 달력이 있습니다. 그리고 사용자는 사용 가능한 요일과 시간을 선택할 수 있습니다. 그 정보를 데이터베이스에 저장하고 있습니다. 현재 사용자가 예를 들어 월요일 08:00부터 10:00까지 선택하면 데이터베이스에 슬롯 당 한 줄을 저장합니다.
내가하고 싶은 것은 한 줄 (마지막 줄) 만 저장하는 것입니다. 그들 모두 대신. 그래서 기본적으로 클릭에서 클릭으로 정보를 저장해야합니다. 나는 그것을 달성하는 방법을 정말로 모른다. 이것은 지금까지의 코드입니다.
function isSlotSelected($slot) { return $slot.is('[data-selected]'); }
function isSlotSelecting($slot) { return $slot.is('[data-selecting]'); }
/**
* Get the selected time slots given a starting and a ending slot
* @private
* @returns {Array} An array of selected time slots
*/
function getSelection(plugin, $a, $b) {
var $slots, small, large, temp;
if (!$a.hasClass('time-slot') || !$b.hasClass('time-slot') ||
($a.data('day') != $b.data('day'))) { return []; }
$slots = plugin.$el.find('.time-slot[data-day="' + $a.data('day') + '"]');
small = $slots.index($a); large = $slots.index($b);
if (small > large) { temp = small; small = large; large = temp; }
return $slots.slice(small, large + 1);
}
DayScheduleSelector.prototype.attachEvents = function () {
var plugin = this
, options = this.options
, $slots;
this.$el.on('click', '.time-slot', function () {
var day = $(this).data('day');
if (!plugin.isSelecting()) { // if we are not in selecting mode
if (isSlotSelected($(this))) { plugin.deselect($(this)); }
else { // then start selecting
plugin.$selectingStart = $(this);
$(this).attr('data-selecting', 'selecting');
plugin.$el.find('.time-slot').attr('data-disabled', 'disabled');
plugin.$el.find('.time-slot[data-day="' + day + '"]').removeAttr('data-disabled');
}
} else { // if we are in selecting mode
if (day == plugin.$selectingStart.data('day')) { // if clicking on the same day column
// then end of selection
plugin.$el.find('.time-slot[data-day="' + day + '"]').filter('[data-selecting]')
.attr('data-selected', 'selected').removeAttr('data-selecting');
plugin.$el.find('.time-slot').removeAttr('data-disabled');
plugin.$el.trigger('selected.artsy.dayScheduleSelector', [getSelection(plugin, plugin.$selectingStart, $(this))]);
plugin.$selectingStart = null;
}
}
});
this.$el.on('mouseover', '.time-slot', function () {
var $slots, day, start, end, temp, endAux;
if (plugin.isSelecting()) { // if we are in selecting mode
day = plugin.$selectingStart.data('day');
$slots = plugin.$el.find('.time-slot[data-day="' + day + '"]');
$slots.filter('[data-selecting]').removeAttr('data-selecting');
start = $slots.index(plugin.$selectingStart);
end = $slots.index(this);
if (end < 0) return; // not hovering on the same column
if (start > end) { temp = start; start = end; end = temp; }
$slots.slice(start, end + 1).attr('data-selecting', 'selecting');
}
$.ajax({
url: "/Member/test.php",
dataType:"json",
type: "POST",
data: {
day,
start,
end
}
}).success( function( weekDay, startTime, endTime) {
console.log( weekDay );
console.log( startTime );
console.log( endTime );
}).error( function( error ) {
console.log( "error:", error );
})
});
};
그리고 이것은 데이터베이스에 정보를 저장하는 PHP입니다.
<?php
include 'connection.php';
session_start();
$raw_json = json_encode( $_POST );
if($raw_json != "[]"){
$sql = "INSERT INTO Users (day) VALUES ('$raw_json')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
?>
어떤 도움을 주시면 감사하겠습니다. 감사.
당신은 각 서버에 요청을하고 있습니다 mouseover
의 .time-slot
요소 (달력에서 그 사각형의 아마 하나) :
this.$el.on('mouseover', '.time-slot', function () {
따라서 오전 8 시부 터 시작하여 오전 10 시까 지 드래그 mouseover
하면 사용자가 .time-slot
요소 위로 마우스를 이동할 때마다 이벤트가 트리거 되어 여러 쿼리가 실행됩니다. mouseup
이벤트 를 사용 하고 마지막 .time-slot
으로 마우스를 올려 놓은 것이 무엇인지 확인 하고 싶을 것 입니다.
다음과 같은 유사 코드에서 :
mouseover:
lastSlot = element hovered over
mouseup:
send request to server with lastSlot
DayScheduleSelector 를 사용하는 것을 보면 플러그인 은 선택 후 이벤트를 발생 시킵니다 .
selected.artsy.dayScheduleSelector
선택시 트리거됩니다. 이벤트 및 선택한 시간 슬롯의 배열을 이벤트 핸들러에 전달합니다.
$("#weekly-schedule").on('selected.artsy.dayScheduleSelector', function (e, selected) {
/* selected is an array of time slots selected this time. */
/* pop the last element of selected and execute your request */
}
당신은 단지 마지막으로 선택한 항목을 원하는 경우에, 그것을 떨어져 팝업selected
배열을하고 그것에게 요청을 보냅니다. 이것은 정확한 구현은 아니지만 필요에 맞게 조정할 수있는 충분한 포인터를 제공합니다.
참고로 현재 쿼리는 MySQL 주입에 취약합니다. 읽어보세요 : PHP에서 SQL 주입을 어떻게 방지 할 수 있습니까? . 여러분의 코드는 형식이 잘못되어 명확하지 않아서 사람들이 처음부터 여러분을 도와 주도록 동기를 부여하지 않습니다. 유용한 도움말을 제공하는 것보다 코드가 수행하는 작업을 이해하는 데 더 많은 시간이 걸립니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다