XF 2.1 Problem with AJAX posting

[F.A] Walky

Active member
Hello,

I'm trying to use AJAX to post comment on my addon and view it without refreshing the page. To achieve it, I took a look at XenForo built-in feature to post thread reply. But I'm not able to reproduce the same render :(

Here is my JavaScript file :
JavaScript:
!function($, window, document, _undefined)
{
    "use strict";

    XF.ProfileComment = XF.Element.newHandler({

        init: function()
        {
            console.log('init');
            this.$target.on('ajax-submit:before', XF.proxy(this, 'beforeSubmit'));
            this.$target.on('ajax-submit:response', XF.proxy(this, 'afterSubmit'));
        },

        beforeSubmit: function(e, config)
        {
            console.log('before');
            var $button = config.submitButton;
            if ($button)
            {
                e.preventDefault();
            }
        },

        afterSubmit: function(e, data)
        {
            console.log(data);

            if (data.errors || data.exception)
            {
                return;
            }

            e.preventDefault();
            this.insertComment(data.html);
        },

        insertComment: function(dataHtml)
        {
            /*XF.Message.insertMessages(
                dataHtml,
                this.getCommentsContainer(),
                this.options.ascending,
                function($message)
                {
                    if ($message && $message.length)
                    {
                        var dims = $message.dimensions(),
                            windowTop = $(window).scrollTop(),
                            windowBottom = windowTop + $(window).height();

                        if (dims.top < windowTop + 50 || dims.top > windowBottom)
                        {
                            $('html, body').animate(
                                { scrollTop: Math.max(0, dims.top - 60) },
                                200
                            );
                        }
                    }
                }
            );*/

            var $container = this.getCommentsContainer();

            XF.setupHtmlInsert(dataHtml, function($html, container, onComplete)
            {
                console.log(container);
                var $noMessages = $container.find('.no-comment');

                if ($noMessages.length)
                {
                    $noMessages.xfFadeUp();
                }

                $container.prepend($html);
                $html.xfFadeDown();

                XF.activate($html);
            });
        },

        getCommentsContainer: function()
        {
            return $('.comment-list').first();
        }
    });

    XF.Element.register('profile-comment', 'XF.ProfileComment');
}
(jQuery, window, document);

The form in my template looks like this :
HTML:
<xf:form action="{{ link('profile/comment', $user) }}"
         ajax="true"
         class="comment-post--form"
         data-xf-init="profile-comment">

    <xf:js src="profile/comment.js" />

    <xf:textarea name="message" placeholder="{{ phrase('message...') }}" />
    <xf:submitrow submit="{{ phrase('comment') }}" />
</xf:form>

And the PHP code:
PHP:
$comment = $this->em()->create('Profile:Comment');
$comment->message = $message;
$comment->save();

$viewParams = [
    'comment' => $comment
];

//var_dump($comment);

$view = $this->view('Profile:NewComment', 'comment_simple', $viewParams);
$view->setJsonParam('post_date', $comment->date);
return $view;

But when I click the comment button in my form, the browser redirect me to the action URL set and I don't know why ...
It's the same properties as Thread Replying.

Thank you for your help,
Walky
 
All I have is a question.

Does XF have different JS for inserting profile posts, inserting profile post comments, inserting gallery comments, inserting resource review comments and so on?

Always try to reuse (not copy) XF stuff in the first instance. Then if that doesn’t work, I’ll lend a hand.
 
All I have is a question.

Does XF have different JS for inserting profile posts, inserting profile post comments, inserting gallery comments, inserting resource review comments and so on?

Always try to reuse (not copy) XF stuff in the first instance. Then if that doesn’t work, I’ll lend a hand.
Well... I tried to use the quick-reply event which didn't work when I first tried. But I've just changed the event name now to reuse quick-reply and it worked ! Meanwhile, I probably changed something :rolleyes:
 
Back
Top Bottom