jQuery ajax returning 'Object Object'

Question

I am trying to send data to a PHP script using jQuery Ajax. For some reason the Ajax request is throwing up an error and returning the following data from the PHP script - [object Object]

I've copied my code in below. I've also copied code using the exact same method elsewhere on the page which seems to work fine!

Can anyone explain why this is happening?

Firstly, the code that is working fine

jQuery

 $("#reqtable a").click(function(){
  var cells = []; 
  var name;
  var account;
  var module;
  var email;
  $(this).parent().parent().find("td").each(function(){
  cells.push($(this).html());
  });
  $(this).parent().parent().find("input").each(function(){
  email = $(this).val();
  });
  $(this).parent().parent().prop('id', 'die');
  name = cells[0];
  account = cells[1];
  module = cells [2];

  $.ajax({
            url: "release.php",
            type: "POST",
            data: {name: name, account: account, module: module, email: email},
            success: function(){
            $("#die").remove();
           }
         });
 });

PHP

<?php
include('../../dbconnect.php');

$name = $_POST['name'];
$account = $_POST['account'];
$email = $_POST['email'];
$module = $_POST['module'];

$releasequery = "INSERT INTO release_assignment(name, account, email, module) VALUES ('$name', '$account', '$email', '$module')";
$release = $conn->query($releasequery);

$erasequery = "DELETE FROM request_assignment WHERE email='$email' AND module = $module";
$erase = $conn->query($erasequery);

?>

And now the code that IS NOT working.

jQuery

 $("#downloadtable a").click(function(){
  var dlcells = []; 
  var dlname;
  var dlaccount;
  var dlmodule;
  var dlemail;
  var dlsub;
  var dlpath;

  $(this).parent().parent().find("td").each(function(){
  dlcells.push($(this).html());
  });
  $(this).parent().parent().find("input.dlemail").each(function(){
  dlemail = $(this).val();
  });
  $(this).parent().parent().find("input.dlsub").each(function(){
  dlsub = $(this).val();
  });
  $(this).parent().parent().find("input.dlpath").each(function(){
  dlpath = $(this).val();
  });

  $(this).parent().parent().prop('id', 'die2');
  dlname = dlcells[0];
  dlaccount = dlcells[1];
  dlmodule = dlcells [2];

  $.ajax({
            url: "download.php",
            type: "POST",
            data: {dlname: dlname, dlaccount: dlaccount, dlmodule: dlmodule, dlemail: dlemail, dlsub: dlsub, dlpath: dlpath},
            success: function(data){
            $("#die2").remove();
            },
            error: function(data){
             $('#downloaddiv').html('<p>' + data + '</p>');
            }
         });
 }); 

PHP

<?php
include('../../dbconnect.php');

$name = $_POST['dlname'];
$email = $_POST['dlemail'];
$account = $_POST['dlaccount'];
$module = $_POST['dlmodule'];
$path = $_POST['dlpath'];
$submission = $_POST['dlsub'];

$feedbackquery = "INSERT INTO feedback_assignments(name, email, level, unit, assignmentpath, submission) VALUES ('$name', $email, '$account', '$module', '$path', '$submission')";
$feedback = $conn->query($feedbackquery);

$erasequery = "DELETE FROM uploaded_assignments WHERE email='$email' AND unit = $module";
$erase = $conn->query($erasequery);

?>

When I comment out all the PHP code and simply put echo ($_POST['dlname']); it returns the data [object Object]

Can anyone explain what is going on and why it seems to work with one block of code but not the other?

Thanks!

Chris

Update: It might be worth mentioning that the initial link ('#downloadtable a') actually instigates a file download as well as the ajax call, whereas in the code that is working it simply makes the ajax call and nothing else. I don't know if this is throwing a spanner in the works but thought it worth mentioning.

Update 2: Using the jQuery Ajax error callback as described below I'm getting the following response:

{"readyState":0,"responseText":"","status":0,"statusText":"error"} 
AJAX error: error : 

The code I've used in the error callback is as follows:

error: function(jqXHR, textStatus, errorThrown) {
   console.log(JSON.stringify(jqXHR));
   console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
   }

Unfortunately I don't understand what this means. Can anyone shed any light on this?

Update 3 OK, I've found the reason for Ajax blowing up on me, and it relates to update number 1 (above). Basically because the link is to a file download (a .docx file) it seems to be causing the problem with ajax. When I change the link to href='#' instead of href="document.docx", the ajax and PHP script works.

This throws up a new question, of course - how can I get the link to download the file whilst simultaneously updating the database?

Answer 1

Specify a dataType and use console to debug your data response.

Also, notice that the error callback contains the following arguments and not any "data";

error Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )

Update

The target file download.php might be throwing an exception. Possibly because of some missing quotes around $email on the line;

$feedbackquery = "INSERT INTO feedback_assignments(name, email, level, unit, assignmentpath, submission) VALUES ('$name', $email, '$account', '$module', '$path', '$submission')";

Debug download.php and make sure it generates the expected output/response.

I advice you to escape the values you are using to build your SQL query with to prevent SQL injection.