Pass values throw Ajax to a php file

Question

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 $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;
  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');
   }
   console.log(day);
    $.ajax({
    url:   "/Member/test.php",
    dataType:"json",
    type:  "POST",
    data:  {
    weekDay: 'day',
    start: 'start',
    end:   'end'
 } 
}) 
});

The html looks like:

<!doctype html>
<html>
<head>
<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='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
body { font-family:'roboto'; background-color:#ECF0F1; }
</style>
</head>
<body>
<h1 style="margin:150px auto 30px auto;"></h1>
<div id="day-schedule"></div>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="/Member/index.php"></script>
<script>
(function ($) {
  $("#day-schedule").dayScheduleSelector({
  });
  $("#day-schedule").on('selected.artsy.dayScheduleSelector', function (e,     selected) {
 console.log(selected);
  })
})($);
</script>
</body>
</html>

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.

Edition:

_After that I suppose to see the values in the console_ And they do appear? Explain more the issue you are facing. Also add `success` and `error` callbacks in your ajax request, so you can debug easier http://stackoverflow.com/a/21897542/3499595 — yuriy636, Sep 06 '16 at 17:07
No, I dont see anything. I want to see the day printed in the console like "saturday" or whatever. And nothing appear — AlguienEnEsteMundo, Sep 06 '16 at 17:11
Could you clarify what the top file is? Is this the `../src/index.js` file? — pcnate, Sep 06 '16 at 17:28
Possible duplicate of [Pass variables from javascript to php file to store them in mysql db after](http://stackoverflow.com/questions/39336184/pass-variables-from-javascript-to-php-file-to-store-them-in-mysql-db-after) — Professor Zoom, Sep 06 '16 at 18:14

pcnate · Accepted Answer · 2016-09-06T17:46:38.997

1

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

You need to add a callback:

$.ajax({
  url:   "/Member/test.php",
  dataType:"json",
  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: http://api.jquery.com/jquery.ajax/

edited Sep 06 '16 at 17:46

answered Sep 06 '16 at 17:08

pcnate

1,694
1
18
34

thanks for the help. But I still dont see the value printed in the console – AlguienEnEsteMundo Sep 06 '16 at 17:13
Since you are using a very old version of jQuery, I have updated the code to use the obsolete methods – pcnate Sep 06 '16 at 17:23
Thanks. Im getting this error: error: Object {readyState: 4, responseText: "array(1) {↵ ["weekDay"]=>↵ string(3) "day"↵}↵ddd", status: 200, statusText: "OK"} Which looks like the success is not working, but throwing a 200 anyway.. – AlguienEnEsteMundo Sep 06 '16 at 17:30
Closer, what do you see in the Chrome DevTools when this request is sent? – pcnate Sep 06 '16 at 17:34
I add a picture, to make it easier – AlguienEnEsteMundo Sep 06 '16 at 17:39
Actually, I wanted to see the response in the network tab. What you are getting is the XHR object in your console. We are using the wrong methods of jQuery. I thought thats what they were for jQuery 1.11. Lets try my updated code. – pcnate Sep 06 '16 at 17:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/122771/discussion-between-pcnate-and-alguienenestemundo). – pcnate Sep 06 '16 at 17:40

Nicolas · Answer 2 · 2016-09-06T17:14:36.650

0

first of all in your Ajax request, you don't have a success: function(){} Callback, so you cannot do anything with the data you receive from the server.
Also, you are using a 'type' variable for the method instead or 'method'.
I would suggest something more like this :

$.ajax({
'url': 'path/to/your/file.php',
'method': 'POST'
'data': {'day' : weekDay, 'start': start, 'end': end},
'success':function(data) {
    console.log('data');
},
'error':function(error){
    console.error('Error : ' + error);
}
})

P.S. i switch your data because i assumed the string where the key and the other were variables.
Hopes it helps !

Nic

edited Sep 06 '16 at 17:14

answered Sep 06 '16 at 17:11

Nicolas

8,077
4
21
51

You have a typo `'succes'` -> `'success'` – yuriy636 Sep 06 '16 at 17:13
Im getting an "annexpected token" in this line: 'data': {'day' : weekDay, 'start': start, 'end': end}, It doesnt make any sense. Ihave all the code (js and ajax) in the .php file. Is that ok? – AlguienEnEsteMundo Sep 06 '16 at 17:21
@AlguienEnEsteMundo i suggest having a separate file to handle the PHP, but that isn't the problem. i did a typo, my error. add a coma ( , ) after method: 'POST'. – Nicolas Sep 06 '16 at 17:41

Pass values throw Ajax to a php file

2 Answers2