0

I have declared what I believe is a global variable photo_data at top of script.

I am trying to reassign it photo_data = 'view_content'; and then trying to use that reassigned variable later console.log('photo_data', photo_data);

While global variable is created and it can be used later, it doesn't get reassigned.

I thought a global variable can be used and reassigned anywhere below it. What am I missing?

<script>
var photo_data = 'none';

// upload photo using form
// retrieve cloudinary status and upload photo data
// create photo divs
// create upload progress messages
// append photo and details to div
// repeat for multiple photos
$(function () {
    // define where photo is coming from
    $('#direct_upload input[type="file"]')
    .cloudinary_fileupload({
        // define photo drag n drop area div
        dropZone: '#direct_upload',
        // status messages begin
        start: function () {
            $('.status_value').text('Starting upload...');
        },
        progress: function () {
            $('.status_value').text('Uploading...');
        },
    })
    // cloudinarydone when photo upload complete
    // 'cl_data' is cloudinary data
    .on('cloudinarydone', function (e, cl_data) {
        // create info variable to hold main photo div
        var info = $('<div class="photo_container"/>');
        $('.status_value').text('Updating data...');

        // post form to photo_upload_complete view
        $.post(this.form.action, $(this.form).serialize()).always(function (view_content, status, jqxhr) {
            // return success or error message upon upload
            // consider changing 'success' to 'upload next photo'?
            $('.status_value').text(view_content.errors ? JSON.stringify(view_content.errors) : status);

            console.log('view_content', view_content);
            photo_data = 'view_content';

            // append photo details div 
            // content from view eg either photo_upload_form.errors or {photo_id: 93, photo_filename: 'ah5fqdby9aetgl3pfr1p', photo_project: 'User 1 Project 2'}
            $(info).append($('<div class="div_photo_details"/>')
                .append(formatContent(view_content)));
        });

        // get photo_data to add to photo?
        console.log('photo_data', photo_data);
        
        // create cloudinary img and append to div
        $(info).attr("id", cl_data.result.public_id + "-wrap");
        $(info).append($('<div class="div_photo_src"/>').append(
            $.cloudinary.image(cl_data.result.public_id, {
                format: cl_data.result.format, 
                width: 300, 
                crop: "fill"
            })
            // add photo attributes
            .attr("class", "photo_image")
            .attr("id", cl_data.result.public_id)
            .attr("onClick", onclick="photoClick(this)")
        ));
        // append photo_image and div_photo_details divs
        $('.div_photo_uploads').append(info);
        
    });
});
</script>
curtisp
  • 2,227
  • 3
  • 30
  • 62
  • 2
    can you _please_ avoid global variables... – Daniel A. White Oct 25 '21 at 15:19
  • 3
    Please see [How do I return the response from an aynchronous call](https://stackoverflow.com/q/14220321/438992), which this duplicates. You *can* update global variables from anywhere. The problem is *when* the global variable is updated: when it's updated from async processes you're at the mercy of their indeterminancy. – Dave Newton Oct 25 '21 at 15:20
  • 1
    There is absolutely no problem with reassigning the variable, that works just fine. The problem is that you're logging the variable too early, *before* it has been reassigned asynchronously. You can fix this by moving all the code inside that `always` callback. – Bergi Oct 25 '21 at 15:23
  • Ah ok so it is an asynchronous call issue, not necessarily a global variable issue. Had not even considered that. – curtisp Oct 25 '21 at 15:50
  • 1
    @Bergi moving rest of code into `always` callback did the trick! And I could then remove global var and just use `view_content` directly. – curtisp Oct 25 '21 at 15:58

0 Answers0