Friendlypix-web: firebaseHelper undefined

Question

I based my project on friendlypix-web and I want to allow users to edit the text of a post, just as they can already edit a comment. I created a method in FirebaseHelper.js to do this.

The code below, using window.prompt() works (see commented section). But I want to use SweetAlert2 which allows textarea to help with longer captions and comments.

Here's my code:

_setupEditButton(postId, author = {}, imageText) {
    const post = this.postElement;

    if (this.auth.currentUser && this.auth.currentUser.uid === author.uid) {
        post.addClass('fp-owned-post');
    } else {
        post.removeClass('fp-owned-post');
    }

    $('.fp-edit-post', post).click(() => {

//       const newPost = window.prompt('Edit the post?', imageText);
//        if (newPost !== null && newPost !== '') {
//            this.firebaseHelper.editPost(postId, newPost).then(() => {
//              $('.fp-first-comment .fp-text', post).text(newPost);
//            });
//        }

        swal({
            title: 'Edit post',
            showCancelButton: true,
            input: 'textarea',  // sweetalert2 allows textarea
            inputValue: imageText,
            reverseButtons: true,

        }).then(function(result) {

            const newPost = result;

            if (newPost !== null && newPost !== '') {
                try {
                    this.firebaseHelper.editPost(postId, newPost).then(() => {
                        $('.fp-first-comment .fp-text', post).text(newPost);
                    });
                } catch (e) {
                    console.log(e);
                }
            }
        });
    });
}

Sadly, my feeble understanding of JavaScript results in

TypeError: Cannot read property 'firebaseHelper' of undefined

Why is "this" undefined in the swal() version and not in the window.prompt()?

score 0 · Accepted Answer · answered Nov 14 '18 at 15:02

0

It's because this inside a callback function refers to that functions, not the the object outside of the function.

The simplest change is to bind the function to the correct meaning of this:

.then(function(result) {

    const newPost = result;

    if (newPost !== null && newPost !== '') {
        try {
            this.firebaseHelper.editPost(postId, newPost).then(() => {
                $('.fp-first-comment .fp-text', post).text(newPost);
            });
        } catch (e) {
            console.log(e);
        }
    }
}).bind(this);

But I highly recommend reading more solutions and explanations here:

How to access the correct `this` inside a callback?

answered Nov 14 '18 at 15:02

Frank van Puffelen

565,676
79
828
807

I am reading but I also tried the simple solution. It's giving me TypeError: d(...)(...).then(...).bind is not a function – Favecat Nov 14 '18 at 15:32
So it's my bad... I had already tried to correct the reference to firebaseHelper using `const firebaseHelper = this.firebaseHelper;` - that's the coding style used in friendlypix-web - but then I saw a Firebase permission error that I didn't pursue. It was actually a SweetAlert mistake: `result` should have been `result.value` and the friendlypix rules had no provision for a child under -text. @frankvanpuffelen you correctly answered my question, "why?" so I accept your answer! – Favecat Nov 14 '18 at 16:55

Friendlypix-web: firebaseHelper undefined

1 Answers1