Insérer des données de Javascript à MySQL en utilisant PHP

Question

J'ai un calendrier avec les jours et les heures. Et l'utilisateur peut choisir quels jours et heures est-il disponible. Im sauvegarder cette information dans la base de données. À l'heure actuelle, si l'utilisateur sélectionne par exemple lundi de 08:00 à 10:00 j'économise sur la base de données une ligne par slot.

Ce que je veux faire, est de sauver une seule ligne (la dernière ligne). Au lieu de tous. Donc, fondamentalement, je dois enregistrer les informations de cliquer pour cliquer. Je ne sais pas vraiment comment faire ça. Voici le code à ce jour:

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); 
}) 
    }); 
    }; 

Et c'est le PHP où j'enregistre les informations contenues dans la base de données:

<?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; 
} 
} 
?> 

Toute aide sera appréciée. Merci.

Answer 1

Vous faites une demande à votre serveur sur chaque mouseover d'un élément .time-slot (probablement l'un de ces rectangles dans votre calendrier):

this.$el.on('mouseover', '.time-slot', function() {

Donc, si vous commencez à 0800 AM et faites glisser à 10 : 00:00 l'événement mouseover est déclenché chaque fois que l'utilisateur survole un élément .time-slot, ce qui entraîne l'exécution de plusieurs requêtes. Vous voulez probablement utiliser l'événement mouseup et vérifier ce que le dernier .time-slot survolé est.

Dans psuedo-code qui est quelque chose comme ceci:

mouseover: 
    lastSlot = element hovered over 

mouseup: 
    send request to server with lastSlot 

Voyant que vous utilisez DayScheduleSelector, le plug-in fires an event après une sélection est faite:

selected.artsy.dayScheduleSelector

Déclenché lorsque une sélection est faite. Transmet l'événement et un tableau d'intervalles de temps sélectionnés au gestionnaire d'événements.

$("#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 */ 
} 

Si vous ne souhaitez que la dernière entrée sélectionnée, pop it off le tableau selected et envoyer une demande. Ce n'est pas une implémentation exacte, mais cela devrait vous donner suffisamment de pointeurs pour l'adapter à vos besoins. Sur une note de côté, votre requête actuelle est susceptible d'injection MySQL. S'il vous plaît lire: How can I prevent SQL-injection in PHP?. Votre code est également mal formaté et pas clair, ce qui ne motive pas vraiment les gens à vous aider en premier lieu; il faut plus de temps pour comprendre ce que fait votre code (pas), que pour offrir une aide utile.