Value can't be assign to the variable after getting from database

Question

After getting the value from database the result did not assign to the variable. Below are my codes.. Alerting the arr result returns value but alert the eventimage and speakerimage is empty

    var file_data = $('#pic').prop('files')[0];
    var form_data = new FormData();  // Create a FormData object
    form_data.append('file', file_data);  // Append all element in FormData  object

    $.ajax({
            url         : serverURL() + "/upload.php",    

            cache       : false,
            contentType : false,
            processData : false,
            data        : form_data,                         
            type        : 'post',
            success     : function(arr){
                    alert(arr[0].result);

                  imgNewUserPictureName = (arr[0].result);   

            }
     });




    var file_data1 = $('#pic1').prop('files')[0];
    var form_data1 = new FormData();  // Create a FormData object
    form_data1.append('file', file_data1);  

    $.ajax({
            url         : serverURL() + "/upload1.php",    

            cache       : false,
            contentType : false,
            processData : false,
            data        : form_data1,                         
            type        : 'post',
            success     : function(arr){

                alert(arr[0].result);

                  imgNewUserPictureName1= (arr[0].result);         
            }
     });



    var eventimage = imgNewUserPictureName;
    var speakerimage = imgNewUserPictureName1;

eventimage and speakeriamge will surely be null because $.ajax is asynchronous. These happens because the binding to the variable was done first before the success callback was called — keysl, Oct 31 '18 at 02:08
Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — CertainPerformance, Oct 31 '18 at 02:14
Please change the tag also to javascript/jquery. PHP tag has no business in this question — keysl, Oct 31 '18 at 02:19

score 0 · Answer 1 · answered Oct 31 '18 at 02:18

Variable assignment before an ajax function is completed will surely throw an undefined or null value. This were expected because the ajax is not yet completed.

There are two ways. Callback or Async. But in this case callback is more cleaner and does not block user experience.

Take a look at this example

   function assignToVar(response){
    var assign = response;
    alert(assign.title)
   }

   $(document).ready(function(){

      $.ajax({
            url         :"https://jsonplaceholder.typicode.com/todos/1", 
            cache       : false,
            contentType : false,
            processData : false,                     
            type        : 'get',
            success     : assignToVar
     });

   });

Make the assignment in the callback and most importantly call the assigned value after the ajax function has already completed.

JS Fiddle here http://jsfiddle.net/keysl183/nb029qcL/4/

score 0 · Answer 2 · answered Oct 31 '18 at 02:22

Ajax is asynchronous, use callback function

var eventimage = '';
var speakerimage = '';

var file_data = $('#pic').prop('files')[0];
var form_data = new FormData(); // Create a FormData object
form_data.append('file', file_data); // Append all element in FormData  object

var file_data1 = $('#pic1').prop('files')[0];
var form_data1 = new FormData(); // Create a FormData object
form_data1.append('file', file_data1);

// the magic
function RequestCallback() {
  console.log(eventimage)
  console.log(speakerimage)
}


$.ajax({
  url: serverURL() + "/upload.php",
  cache: false,
  contentType: false,
  processData: false,
  data: form_data,
  type: 'post',
  success: function(arr) {
    alert(arr[0].result);

    eventimage = (arr[0].result);

    $.ajax({
      url: serverURL() + "/upload1.php",
      cache: false,
      contentType: false,
      processData: false,
      data: form_data1,
      type: 'post',
      success: function(arr) {
        alert(arr[0].result);

        speakerimage = (arr[0].result);
        // eventimage and speakerimage is set, run callback function
        RequestCallback()
      }
    });

  }
});

Value can't be assign to the variable after getting from database

2 Answers2