XF 2.1 Problem with AJAX posting

[[F.A] Walky]

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 :

!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 :

<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:

$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

 

[delicatebobster]

@Siropu @Xon any help would be grateful

 

[Siropu]

ajax="true" should prevent normal form submission. There are no JS errors in the console?

 

[[F.A] Walky]

ajax="true" should prevent normal form submission. There are no JS errors in the console?

Hello,

There is no JS errors, I can see the console.log of the beforeSubmit just after sending the form but then I’m redirected.

 

[[F.A] Walky]

Bump please.
I don't know what I'm doing wrong, I'm probably missing something but can't figure out what

 

[delicatebobster]

Hey @Chris D any ideas please sir

 

[Chris D]

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.

 

[[F.A] 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.

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