XenForo v1.3 AJAX code not working

[AndyB]

In my add-on Similar Threads, I use this .js file to show a list of similar threads when a user is creating a new thread. When the user starts typing into the title input the code should fire.

This code works fine in XenForo v1.2x, but it does nothing in XenForo v1.3 beta1.

similarthreads.js

!function($, window, document, _undefined)
{
    XenForo.similarthreadsId = function($form)
    {
        var typewatch = (function()
        {
            var timer = 0;
            return function(callback, ms)
            {
                clearTimeout (timer);
                timer = setTimeout(callback, ms);
            }
        })();
        $title = $form.find('input[name="title"]');
        $title.keyup(function()
        {
            typewatch(function ()
            {
                var pathname = $(location).attr('href');
                var newPathname = pathname.replace('create-thread','similarthreads');
                XenForo.ajax(
                newPathname,
                $form.serializeArray(),
                function(ajaxData, textStatus)
                {
                    if (ajaxData.templateHtml)
                    {
                        new XenForo.ExtLoader(ajaxData, function()
                        {
                            $('#similarthreadsId-result').html('<div>' + ajaxData.templateHtml + '</div>');
                        });
                    }
                });
            }, 500);
        });      
    }
    XenForo.register('#similarthreadsId', 'XenForo.similarthreadsId');  
}
(jQuery, this, document);

Hopefully someone will be able to tell me which line of code needs to be changed.

Thank you.

 

[AndyB]

I found the change which is causing the problem. In XenForo v1.3 this code was added to the thread_create template:

id="ThreadCreate"

<form action="{xen:link 'forums/add-thread', $forum}" method="post" id="ThreadCreate"
    class="xenForm Preview AutoValidator"
    data-previewUrl="{xen:link 'forums/create-thread/preview', $forum}"
    data-redirect="on"
>

If I remove the [id="ThreadCreate"] code in the template, the similarthreads.js file works perfect. I would like to modify the similarthreads.js file but I don't know what change to make.

 

[Chris D]

The JS file is expecting a selector called '#similarthreadsId'.

What you have said suggests that you must have been adding id="similarthreadsId" to the add thread forum. Were you doing that by a template modification or similar?

Either way, the solution is probably to change this:

XenForo.register('#similarthreadsId', 'XenForo.similarthreadsId');

to:

XenForo.register('#ThreadCreate', 'XenForo.similarthreadsId');

 

[AndyB]

Either way, the solution is probably to change this:

XenForo.register('#similarthreadsId', 'XenForo.similarthreadsId');

to:

XenForo.register('#ThreadCreate', 'XenForo.similarthreadsId');

I changed the code as per your instructions and that worked perfect!

I really appreciate your help, Chris.

Thank you.

 

[AndyB]

The JS file is expecting a selector called '#similarthreadsId'.

What you have said suggests that you must have been adding id="similarthreadsId" to the add thread forum. Were you doing that by a template modification or similar?

Yes I was adding id="similarthreadsId" via Template Modification.

Now the Template Modification is will add id="ThreadCreate". In xF v1.3 it will be redundant, but that is required to make the add-on work for both xF 1.2 and 1.3.

<form action="{xen:link 'forums/add-thread', $forum}" method="post" id="ThreadCreate"
    class="xenForm Preview AutoValidator"
    data-previewUrl="{xen:link 'forums/create-thread/preview', $forum}"
    data-redirect="on"
    id="ThreadCreate"
>

 

[AndyB]

You don't need to add an ID to that form. It already has it.

Correct, but XenForo v1.2x does not have it. The add-on needs to works on both 1.2 and 1.3.

 

[Chris D]

For backwards compatibility yeah, fair enough. Not ideal though. (I missed the backwards compatibility part in my previous message which I tried to delete to cover up the fact I didn't read your post properly )

If your JS is only run on that page, then you could probably just target it like this:

form.Preview instead of #ThreadCreate

That selector should work in all versions.

 

[xf_phantom]

You could also use a template modification callback function to check the XenForo Version and insert the ID only if XF< 1.3

 

[AndyB]

If your JS is only run on that page, then you could probably just target it like this:

form.Preview instead of #ThreadCreate

That selector should work in all versions.

Interesting, that does works:

XenForo.register('form.Preview', 'XenForo.similarthreadsId');

I would have assumed it would only work getting an id. In this case it's getting it from the class.

 

[Chris D]

jQuery selectors are the same as CSS selectors.

So you'd be able to add CSS styling to form.Preview, e.g.

form.Preview
{
    color: red;
}

So you can use the same in jQuery.

You can target classes, IDs, name properties, input types. Anything I think.

You could also use a template modification callback function to check the XenForo Version and insert the ID only if XF< 1.3

I'd have suggested the same but it seemed overkill in this case.