AlguienEnEsteMundo AlguienEnEsteMundo - 1 month ago 12x
MySQL Question

Pass values throw Ajax to a php file

Im struggling with this problem, that may be very easy, but for me its being very complicated, because is the first time Im doing Javascript. So basically I have a calendar where I can choose the days and different ranges of times for every day. Till now, everything good. Now, I want to pass that values to a php file, so I can save them in the MySQL database. Im trying to do that with Ajax, so this is my code so far:

function isSlotSelected($slot) { return $'[data-selected]');
function isSlotSelecting($slot) { return $'[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') ||
($'day') != $'day'))) { return []; }
$slots = plugin.$el.find('.time-slot[data-day="' + $'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.$'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.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;
if (plugin.isSelecting()) { // if we are in selecting mode
day = plugin.$'day');
$slots = plugin.$el.find('.time-slot[data-day="' + day + '"]');
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');
url: "/Member/test.php",
type: "POST",
data: {
weekDay: 'day',
start: 'start',
end: 'end'

The html looks like:

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='' rel='stylesheet' type='text/css'>
body { font-family:'roboto'; background-color:#ECF0F1; }
<h1 style="margin:150px auto 30px auto;"></h1>
<div id="day-schedule"></div>

<script src=""></script>
<script src="/Member/index.php"></script>
(function ($) {
$("#day-schedule").on('selected.artsy.dayScheduleSelector', function (e, selected) {

After that I suppose to see the values in the console, but I don´t and I really don´t know what I´m doing wrong.

Any help will be very appreciated.


enter image description here


You are using a pretty old version of jQuery. You may want to upgrade.

You need to add a callback:

  url:   "/Member/test.php",
  type:  "POST",
  data:  {
    weekDay: 'day',
    start: 'start',
    end:   'end'
}).success( function( msg ) {
  console.log( "success:", msg );
}).error( function( error ) {
  console.log( "error:", error );

In your php use the following at the end of the file.

echo json_encode( $yourvariable );

You may also need to set the header to output as json at the top of your file:

header('Content-type: application/json');

More examples: