1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XenForo v1.3 AJAX code not working

Discussion in 'XenForo Development Discussions' started by AndyB, Feb 1, 2014.

  1. AndyB

    AndyB Well-Known Member

    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

    Code:
    !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.
     
    Last edited: Feb 2, 2014
  2. AndyB

    AndyB Well-Known Member

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

    id="ThreadCreate"

    Code:
    <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.
     
  3. Chris D

    Chris D XenForo Developer Staff Member

    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:

    Code:
    XenForo.register('#similarthreadsId', 'XenForo.similarthreadsId');
    to:

    Code:
    XenForo.register('#ThreadCreate', 'XenForo.similarthreadsId');
     
    AndyB likes this.
  4. AndyB

    AndyB Well-Known Member

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

    I really appreciate your help, Chris.

    Thank you.
     
  5. AndyB

    AndyB Well-Known Member

    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.

    Code:
    <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"
    >
    
     
    Last edited: Feb 2, 2014
    Chris D likes this.
  6. AndyB

    AndyB Well-Known Member

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

    Chris D XenForo Developer Staff Member

    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.
     
    AndyB likes this.
  8. xf_phantom

    xf_phantom Well-Known Member

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

    AndyB Well-Known Member

    Interesting, that does works:

    Code:
    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.
     
  10. Chris D

    Chris D XenForo Developer Staff Member

    jQuery selectors are the same as CSS selectors.

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

    Code:
    form.Preview
    {
        color: red;
    }
    So you can use the same in jQuery.

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

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

Share This Page