Response of a function inside of another function

Question

Sorry for the subject, I have no clue to take that problem in a simple phrase...

I guess I 'overcoded' a little bit. My problem is that I want to execute at function publishOnWall () the function myDropzone.processQueue(); but I won't work of course because it's not defined before. The important thing is, that I must get the function (response) part of the function puslishOnWall() but I don't get it how I could do that, that I can take the responses of this function inside the submit button function.

Update: So the progress is: I click on the submit button, it checks if has already uploaded an image or not, then if I'm already logged in on facebook or not and then it calls the function to publish on the facebook wall. If the publishing on facebook wall was a success it uploads the image.

Have you any ideas how I could get this to work?

This is a excerpt of my code:

function publishOnFbWall() {
    FB.ui({
        method: 'stream.publish',
        message: '',
        attachment: {
            name: "Demo",
            caption: '',
            description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.",
            href: "url"
        },
        user_prompt_message: "Demo"
    },
    function (response) {
        if (response && response.post_id) {
            myDropzone.processQueue();
            return true;
        } else {
            $('.dz-preview').addClass('dz-error');
            $('.dz-error-message').text('Confirm post on your wall');
            return false;
        }
    });
}

var $ = jQuery.noConflict();

$(document).ready(function () {
    Dropzone.options.fbImageUploadForm = {

        autoProcessQueue: false,
        uploadMultiple: false,
        parallelUploads: 100,
        maxFiles: 1,
        maxFilesize: 1, // MB
        acceptedFiles: 'image/*',
        previewsContainer: "#ImageUploadPreview",
        previewTemplate: "<div class=\"dz-preview dz-file-preview\" data-dz-thumbnail>\n  <div class=\"dz-details\">\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-info\">\n  <div class=\"dz-success-mark\"><i class=\"fa fa-check-circle-o\"></i></div>\n  <div class=\"dz-error-mark\"><i class=\"fa fa-bolt\"></i></div>\n  <div class=\"dz-size\" data-dz-size></div>\n  <a class=\"dz-remove\" data-dz-remove><i class=\"fa fa-times-circle-o\"></i></a>\n  </div>\n  </div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
        clickable: '#ImageUploadPreview',
        thumbnailWidth: 300,
        thumbnailHeight: 300,
        init: function () {
            var submitButton = document.querySelector("#submit-all"),
                myDropzone = this; // closure

            submitButton.addEventListener('click', function () {
                if ($('#ImageUploadPreview').children('div').hasClass('dz-preview dz-image-preview')) {
                    if (logIn()) {
                        publishOnFbWall();
                    } else {
                        logIn();
                        publishOnFbWall();
                        }
                } else {
                    $('.dz-default span').replaceWith('<span class="no-image"><i class="fa fa-times"></i><br/>Upload an image</span>');
                }
            });

There is not `success` param of `publishOnFbWall` or did you mean `myDropzone: Dropzone.processQueue` ? — kindisch, Jun 30 '14 at 16:42
You [cannot `return`](http://stackoverflow.com/q/14220321/1048572) from the callback! — Bergi, Jun 30 '14 at 16:50
The returns is non-deleted code that I worked on previously. I do lots of trial and error, I'm going to delete it. ;) — kindisch, Jun 30 '14 at 17:11

Palpatim · Answer 1 · 2014-06-30T17:04:00.197

You define publishOnFbWall as a function that takes no parameters, but needs resources/context/behavior from the object myDropzone. Why not pass the myDropzone object as a parameter in your handler:

        submitButton.addEventListener('click', function () {
            if ($('#ImageUploadPreview').children('div').hasClass('dz-preview dz-image-preview')) {
                if (logIn()) {
                    // Note change here
                    publishOnFbWall(myDropzone);
                } else {
                    logIn();
                    // Note change here
                    publishOnFbWall(myDropzone);
                    }
            } else {
                $('.dz-default span').replaceWith('<span class="no-image"><i class="fa fa-times"></i><br/>Upload an image</span>');
            }
        });

[EDIT]

Then add myDropZone as a parameter in your function declaration:

function publishOnFbWall(myDropzone) {

I understand your statement and tested it but still error `myDropzone is not defined` after the `publishOnFbWall` succeeded. MyDropzone is the variable for `form#fbImageUploadForm.dropzone` Sorry if I act completly stupid I'm normally a designer and thanks for helping! — kindisch, Jun 30 '14 at 17:00
Sorry, I should have explicitly mentioned to add the parameter to the function declaration as well — Palpatim, Jun 30 '14 at 17:04

score 1 · Accepted Answer · answered Jun 30 '14 at 16:49

1

You could simply make publishOnFbWall require an argument and pass in myDropzone. For example:

function publishOnFbWall(dropzone) {
    // ...
    dropzone.processQueue();
    // ...
}

Then inside your event listener you pass in myDropzone:

if (logIn()) {
    publishOnFbWall(myDropzone);
} // ...

The comment about it being a closure isn't really true here either. You can read more about those here.

answered Jun 30 '14 at 16:49

redbmk

4,687
3
25
49

Thank you very much! This answer got accepted because I understand the complete process very well and has a related link to learn more about. – kindisch Jun 30 '14 at 17:07

Response of a function inside of another function

2 Answers2