this.stickyAlerts is undefined

[ZikaCodez]

I have this simple code:

halfmoon.initStickyAlert({title: 'Publishing...', message: '<i class="fas fa-spinner fa-spin"></i> Your post is being published, please wait..', type: 'alert-secondary', timeShown: 1500})

triggered when a form is being submitted, here's the full code:

$("#post-form").submit(function (e) {
                    e.preventDefault();
                    $.ajax({
                        url: '/post',
                        type: 'GET',
                        beforeSend: function () {
                            $('#settings-form').find('button').attr('disabled', true);
                            halfmoon.initStickyAlert({title: 'Publishing...', message: '<i class="fas fa-spinner fa-spin"></i> Your post is being published, please wait..', type: 'alert-secondary', timeShown: 1500})
                        },
                        data: {
                            content: content
                        },
                        success: function () {
                            $('#settings-form').find('button').attr('disabled', false);
                            $('#content').val('');
                            $('#posts').unload()
                        },
                        error: function () {
                            $('#settings-form').find('button').attr('disabled', false);
                        }

                    });
                });

I keep getting this error whenever trying to trigger the function.

Meanwhile, I have it working in another page. Here's the code:

$("#settings-form").submit(function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'GET',
                    url: '/update-profile',
                    beforeSend: function() {
                        $('#settings-form').find('button').attr('disabled', true);
                        halfmoon.initStickyAlert({
                            title: 'Saving...',
                            content: '<i class="fas fa-spinner fa-spin"></i> Saving changes...',
                            type: 'alert-secondary',
                            timeShown: 1500
                        });
                    },
                    data: $('#settings-form').serialize(),
                    success: function(data) {
                        window.scrollTo(0, 0);
                        halfmoon.initStickyAlert({
                            content: "Profile has been updated successfully.",
                            title: "Changes Saved!",
                            alertType: "alert-success",
                            fillType: "",
                            hasDismissButton: false,
                            timeShown: 3000
                        })
                        $('#sidebar-username').html($('input[name=username]').val());
                        $('#settings-form').find('button').attr('disabled', false);
                    },
                    error: function(data) {
                        console.log("Error")
                        console.log(data)
                        window.scrollTo(0, 0);
                        halfmoon.initStickyAlert({
                            content: "There was an error updating your profile. Please try again.",
                            title: "Error!",
                            alertType: "alert-danger",
                            fillType: "",
                            hasDismissButton: false,
                            timeShown: 3000
                        })
                        $('#settings-form').find('button').attr('disabled', false);
                    },
                    
                });
            });

I have halfmoon.js imported in a headers file, and this headers file is imported in all my pages' files.

[JKoblitz]

Have you added the sticky-alerts container to your page-wrapper?

<div class="sticky-alerts"></div>

Documented here.