Return string from PHP and alert jQuery response

Question

I'm trying to do something which should be really simple:

jQuery post -> which will return a string from the server -> alert string?

But for the life of me I cannot get the alert to display the string, I get object Object or a warning,

What am I doing wrong here?

Results:

JSON.parse: unexpected character at line 1 column 2 of the JSON data

exception: cyclic object

[object Object]

Update Php code:

public function fileupload(){
    $uniqueID = request('uniqueId');
    if($uniqueID != ''){
         echo 'Works'
    }
    else{
         echo 'Failed'
    }
}

Updated jQuery Code: alert is on the last block of code

$(function () {
  
   $('.fileupload').fileupload({
      
      headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      maxFileSize: 3000000,
      acceptFileTypes:  /(\.|\/)(pdf|jpeg)$/i,
      dataType: 'json',
      done: function (e, data) {
         $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);          
         });           
      },
         // Required for Progress bar
      progress: function (e, data) {
         var progress = parseInt(data.loaded / data.total * 100, 10);
         $(this).closest("div").find("div.bar").css(                                                   
            'width', progress + '%'            
         );
         // update text in progress bar
        $(this).closest("div").find("div.percentage").text(progress + '%');        
      }
      // This is required for displaying errors
      }).bind('fileuploadsubmit', function (e, data) {
         data.formData = {
            'uniqueId': $('.uniqueFileId').val()
         };
         
      }).on('fileuploadadd', function (e, data) {
         data.context = $('<div/>').appendTo('#files');
         $.each(data.files, function () {
         var node = $('<p/>').append($('<span/>'));     
         node.appendTo(data.context);
      });
      
      // This is also required for displaying errors 
      }).on('fileuploadprocessalways', function (e, data) {
          
         alert(data);
      
         var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
            
         if (file.error) {
            node.append($('<span style=\'color:red; \'"/>').text(file.name +' '+ file.error + ',file must be .pdf or .jpg'));
          
         }
      });
   });

Response from php:

Answer 1

What Your Issue is you are not specifying a key for your message.

php:

public function fileupload(){
    $uniqueID = request('uniqueId');
    if($uniqueID != ''){
         echo json_encode(array("msg" => 'Works'));
    }
    else{
         echo json_encode(array("msg" => 'Failed'));
    }
}

jQuery:

$(function () {

   $('.fileupload').fileupload({

      headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      maxFileSize: 3000000,
      acceptFileTypes:  /(\.|\/)(pdf|jpeg)$/i,
      dataType: 'json',
      done: function (e, data) {
         $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);          
         });           
      },
         // Required for Progress bar
      progress: function (e, data) {
         var progress = parseInt(data.loaded / data.total * 100, 10);
         $(this).closest("div").find("div.bar").css(                                                   
            'width', progress + '%'            
         );
         // update text in progress bar
        $(this).closest("div").find("div.percentage").text(progress + '%');        
      }
      // This is required for displaying errors
      }).bind('fileuploadsubmit', function (e, data) {
         data.formData = {
            'uniqueId': $('.uniqueFileId').val()
         };

      }).on('fileuploadadd', function (e, data) {
         data.context = $('<div/>').appendTo('#files');
         $.each(data.files, function () {
         var node = $('<p/>').append($('<span/>'));     
         node.appendTo(data.context);
      });

      // This is also required for displaying errors 
      }).on('fileuploadprocessalways', function (e, data) {
console.log(data);



         alert(JSON.parse(data));

         var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);

         if (file.error) {
            node.append($('<span style=\'color:red; \'"/>').text(file.name +' '+ file.error + ',file must be .pdf or .jpg'));

         }
      });
   });

Changes:

1) PHP Code to return a valid JSON else js will treat it as payload. 2) Parse Returning Object and you will have that JSON object in an alert method.

Hope this stats your problem.

Answer 2

According to the documentation, the data object passed to the fileuploadprocessalways handler doesn't contain the ajax response from the server's upload handler.

Instead it contains

two arrays:

files - which contains the result of the process applied.

originalFiles - the original uploaded files.

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#processing-callback-options

Perhaps you meant to write a handler for the done callback. https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Answer 3

You should try the following changes :

$msg = 'Hello';
echo json_encode($msg);

Return works if you are using the returned value within PHP functions. In your case you are communicating within PHP and javascript. Ajax default behavior outputs whatever you echo/print in php.