Get json from php, inside $.ajax create jquery array and use the array (variable) outside current function

Question

In php i have echo json_encode($show_thumbnails);

On each function (each file upload) with jquery want to create array with current data from php and use the array for the next file upload.

I mean:

1) user clicks Upload

2) send data to php and receive back echo json_encode($show_thumbnails);

3) the received echo json_encode($show_thumbnails); append to jquery array

4) use the array (content of array) at next click Upload

All works except point 4).

Here is my code

$('#upload_file').change(function(e) {

e.preventDefault();
var formData = new FormData($(this).parents('form')[0]);

Just below code does not work. typeof prev_upld_thumbn always is undefined. Below i create array for typeof prev_upld_thumbn, but the array does not exist on the next $('#upload_file').change(function(e) {

if( typeof prev_upld_thumbn !== 'undefined' ) {
formData.append(prev_upld_thumbn);
alert( formData );
}

Here continue code

$.ajax({
url: '___ajax_upload_files.php',
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
data: formData,
dataType : 'json',
cache: false,
contentType: false,
processData: false,
success: function (data) {

Here i create var prev_upld_thumbn. And alert( prev_upld_thumbn... works.

var prev_upld_thumbn = [];
prev_upld_thumbn.push( data['first_thumbnail'] );
alert( prev_upld_thumbn + ' prev_upld_thumbn1' );
},
});

});//$('#upload_file').change(function(e) {

Here no alert.

alert( prev_upld_thumbn + ' prev_upld_thumbn2' );

So i have created array prev_upld_thumbn. And inside $('#upload_file').change(function(e) { the array exists.

How to get to exist the array outside $('#upload_file').change(function(e) { or on next call of the function?

In some answers read something about asynchronously, added async: false, but no success

Andrew Dunai · Accepted Answer · 2014-11-29 03:59:53Z

You have to put result into variable somewhere upper in scope, e.g. let's assume your URL returns object {foo: 'bar'}:

var data = null;
var counter = 0;
var send_tick = function() {
    console.log('Previous data:', data, 'Counter:', counter);
    $.ajax({
        success: function(data) {
            last_data = data;
            counter++;
            send_tick();
        };
    });
}
send_tick();
console.log('Initial data:', data, 'Counter:', counter); // Outputs
// "Initial data: null Counter: 0" - data is not defined here
// because the request is still running.

After some time, next lines will be printed:

Previous data: null Counter: 0
Previous data: {foo: 'bar'} Counter: 1
Previous data: {foo: 'bar'} Counter: 2
Previous data: {foo: 'bar'} Counter: 3
Previous data: {foo: 'bar'} Counter: 4
...

...and so on.

JavaScript is all about callbacks and asynchrony. Consider following example:

var a = 0;

window.setTimeout(function() {
    a ++;
}, 1000);

window.setTimeout(function() {
    alert(a); // Alerts 1 because "a" was changed asynchronously
    // by another callback. Same flow will be for AJAX.
}, 2000);

Collectives™ on Stack Overflow

Get json from php, inside $.ajax create jquery array and use the array (variable) outside current function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related