Samuel Samuel - 1 month ago 8
jQuery Question

Ajax data isn't being received by php

Hello overflowers!

I can't seem to manage to send my ajax data over to my php page correctly, it has worked perfectly fine before but now it is not working.

I'm getting the correct data via

console.log
but on my php page i'm getting
Undefined index
error.

Jquery

var task_takers_pre = [];
var task_takers = [];
var i = 1;

$(".new-task-takers ul.select_takers li").on('click', function(){
$(this).each(function(){
$(this).toggleClass("active");
if($(this).find('.fa').length > 0){
$(this).find('.fa').remove();
i -= 1;
var removeItem = $(this).data("id");
task_takers_pre.remove(removeItem);
console.log(task_takers_pre);
}else{
$('<i class="fa fa-check" aria-hidden="true"></i>').insertBefore($(this).find("div"));
i += 1;
task_takers_pre[i] = $(this).data("id");
console.log(task_takers_pre);
}

$.each(task_takers_pre, function (index, value) {
if ($.inArray(value, task_takers) == -1) {
task_takers.push(index, value);
}
});
});
});

$("#new-task").on('submit', function(){
console.log(task_takers_pre);
$.ajax({
type: 'POST',
url: '',
cache: false,
data: {task_takers_pre : task_takers_pre },
success: function(data) {
//console.log(data)
}
});
});


PHP

if(isset($_POST['task_submit'])){
$task_takers = $_POST['task_takers_pre'][0];
var_dump($task_takers);
}





EDIT

jQuery

var task_takers_pre = [];
var task_takers = [];
var i = 1;

$(".new-task-takers ul.select_takers li").on('click', function(){
$(this).each(function(){
$(this).toggleClass("active");
if($(this).find('.fa').length > 0){
$(this).find('.fa').remove();
i -= 1;
var removeItem = $(this).data("id");
task_takers_pre.remove(removeItem);
console.log(task_takers_pre);
}else{
$('<i class="fa fa-check" aria-hidden="true"></i>').insertBefore($(this).find("div"));
i += 1;
task_takers_pre[i] = $(this).data("id");
console.log(task_takers_pre);
}

$.each(task_takers_pre, function (index, value) {
if ($.inArray(value, task_takers) == -1) {
task_takers.push(index, value);
}
});
});
});

$(".assign").on('click', function(){
console.log(task_takers_pre);
$.ajax({
type: 'POST',
url: './core/includes/new_task.php',
cache: false,
data: {task_takers_pre : task_takers_pre},
success: function(data) {
//console.log(data)
}
});
$.ajax({
type: 'POST',
url: '',
cache: false,
data: {'task_takers_pre' : task_takers_pre},
success: function(data) {
//console.log(data)
}
});
});


PHP

if(isset($_POST['task_takers_pre'][0])){
$task_takers = $_POST['task_takers_pre'][0]; // Just for testing
var_dump($task_takers); // Just for testing
}

if(isset($_POST['task_takers_pre'])){
$task_takers2 = $_POST['task_takers_pre']; // Just for testing
var_dump($task_takers2); // Just for testing
}

Answer

What you are attempting to do is use the same PHP code to handle the Button Press from the Form AND the AJAX Call. Don't!

(note: This answer is Only based upon the code that has been provided and what is trying to achieved with this code.)

So your current PHP is, which I am guessing is what you call when you click the submit button... In that case $_POST['task_takers_pre'] will not exist as you are generating that from the JS and sending it in the AJAX Call.

Write a separate AJAX Call.

You need to create a separate file to handle your AJAX calls and have it perform what duties it needs to perform.

// This is just for testing my AJAX Call
    public function ajax_post(){
      if(isset($_POST['task_takers_pre'])){
        $task_takers = $_POST['task_takers_pre'][0]; // Just for testing
        var_dump($task_takers);                      // Just for testing
        die();
      }
      else {
      // Illegal access/entry do something...
      echo 'Error - I had better check what I am posting.';
      die();
      }
    }