Calling AJAX from element OnClick function

Question

first time post here, more of a lurker and have found a lot of answers very helpful. I can't figure out my code so looking to the experts who know what they're doing!

I have HTML (created via PHP) where I have a list of baseball cards within a series. I'm using Font Awesome to show a checkbox. When I click the checkbox, I would like to make a call to AJAX to update the database (it would add a card or remove the card from the checklist).

I recycled some prior code that DOES WORK and I did write it over a year ago, but it's called via form submit button. The code below is slightly different because I want the same function called, but I might have hundreds of check boxes if there are hundreds of cards in the series. The "on click" function on the Font Awesome checkbox would pass the series name and card number as variables to the checklist function.

In the end, when I receive a success response from AJAX, I would use the id element to update the class to checkbox with check or without check (if they add or remove from checklist)

Sample of HTML is below. The first section is what I'm using, but the checkbox will not show because of no Font Awesome library here. The second section in case someone wants to run it

<p>The code I'm using with Font Awesome (but won't show checkbox)</p>
<p>Series, #1<i class="fa fa-check-square-o" onclick="checklist('Series','1')" id="Series_1"></i></p>
<p>Series, #2<i class="fa fa-check-square-o" onclick="checklist('Series','2')" id="Series_2"></i></p>
<p>Series, #3<i class="fa fa-check-square-o" onclick="checklist('Series','3')" id="Series_3"></i></p>
<p>Series, #4<i class="fa fa-check-square-o" onclick="checklist('Series','4')" id="Series_4"></i></p>
<p>Series, #5<i class="fa fa-check-square-o" onclick="checklist('Series','5')" id="Series_5"></i></p>
<p>This might display better</p>
<p onclick="checklist('Series','1')">Series, #1</p>
<p onclick="checklist('Series','2')">Series, #2</p>
<p onclick="checklist('Series','3')">Series, #3</p>
<p onclick="checklist('Series','4')">Series, #4</p>
<p onclick="checklist('Series','5')">Series, #5</p>

Below is the JavaScript used that SHOULD work. My updateChecklistTest.php currently has very little code and it's supposed to be returning data.success = FALSE (for testing purposes). The problem is that it goes right to the .fail function, so I get the alert "this is the failure zone".

Also for testing, I have the alert tell me what series and card number are passed to the function, and that DOES work, so it is appropriately passing the variables.

function checklist(s, c) {
  alert("Series: " + s + ", Cardnumber: " + c); // THIS DOES WORK!

  var formData = {
    series: s,
    cardnum: c
  };

  $.ajax({
      type: 'POST',
      url: 'updateChecklistTest.php',
      data: formData,
      dataType: 'json',
      encode: true
    })
    .done(function(data) {

      if (!data.success) {
        alert(data.errors.message);
      } else {
        // ALL GOOD! 

        alert('we are good');
      }
    })

    .fail(function(data) {

      alert('this is failure zone'); // This code ends up here
      alert(data.errors.message);
    });
}

If this helps, here is my PHP code, trying to force an error

$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data

$series = $_POST['series'];
$cardnum = $_POST['cardnum'];

$errors['message'] .= $series."\n";
$errors['message'] .= $cardnum."\n";


$errors['message'] = "Here are the following errors IN THE GOOD FIELD:\n".$errors['message'];
// if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;


// return all our data to an AJAX call
echo json_encode($data);

I feel that the solution is similar to the solution here: OnClick Send To Ajax But, I need this one function to run for 1 or multiple cards in the list, only differentiating the series and cardnumber.

Any help is GREATLY appreciated. My eyes are hurting after searching for hours!

ISSUES RESOLVED (for those who find it helpful)

The response from AlwaysHelping helped clean up the AJAX code and I am still allowed to use my OnClick functionality within Font Awesome tag. So, this is a great reference on getting AJAX setup.

The page this was on was dynamically created, which I believe was causing an issue. The Firefox console.log had this message: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at xxxxxx/updateChecklistTest.php. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."

After looking at the Firefox description, I was able to find this solution on Stack Overflow: htaccess Access-Control-Allow-Origin

Adding that text to my .htaccess file fixed the issue and I can now see data hitting the success/error within my AJAX call, so, I'm very happy now!

Answer 1

You PHP file is throwing error since $errors['message'] is defined multiple times. You can save your error message in a variable use that for $errors['message'].

Also instead of using ajax with fail or done simply use success and error function to determine what went wrong. You can use the same HTML as there is nothing in the HTML you have posted above.

Your final code should like this:

jQuery

function checklist(s, c) {

  var formData = {
    series: s,
    cardnum: c
  };

  $.ajax({
    type: 'POST',
    url: 'file.php',
    data: formData,
    dataType: 'json',
    success: function(data) {
      if (!data.success) {
        console.log(data.errors.message);
      } else {
        // ALL GOOD! 
        console.log('we are good');
      }
    },
    error: function() {
      console.log('this is failure zone'); // This code ends up here
      console.log(data.errors.message);
    }
  })
}

PHP

<?php

$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data

$series = $_POST['series'];
$cardnum = $_POST['cardnum'];

$myData = $series."\n".$cardnum;

$errors['message'] = "Here are the following errors IN THE GOOD FIELD:\n".$myData;
// // if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;

// return all our data to an AJAX call
echo json_encode($data);

?>