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

jQuery Not Working

Discussion in 'XenForo Development Discussions' started by Nerbert, Oct 5, 2015.

  1. Nerbert

    Nerbert Member

    I'm working on an AJAX project for the thread page and jQuery isn't working. The jQ syntax is not recognized and the jQ functions aren't recognized as such.

    I tried both <xen:require js="js/graffiti/graffiti.js" /> in the template and
    $template->addRequiredExternal('js', 'js/graffiti/graffiti.js'); in my listener script.

    Here's my JS file: (See my comments within)

    Code:
    /** @param {jQuery} $ jQuery Object */
    !function($, window, document, _undefined)
    {
        console.info("graffiti")  // this shows in the console before "XenForo.init() 220ms. jQuery 1.11.0/1.2.8-dev"
        XenForo.Graffiti = function($form) {
                                            var f = $("#graffiti_form");
                                            alert(f.id);               // alerted "undefined"
                                            $('#graffiti_display').empty();
            xhr = XenForo.ajax(
           
                //$form.attr('action'),         // didn't recognize this function
                $form.action,
               
                $form.serializeArray(),      // throws error "$form.serializeArray" is not a function         
               
                function(ajaxData) {
                    if (XenForo.hasResponseError(ajaxData))
                    {
                        return false;
                    }
    
                    $('#graffiti_display').empty().append(ajaxData.templateHtml);
    
                }
            )
        }; 
    }
    (jQuery, this, document);
    

    The unrecognized functions are used in js.xenforo/full/acp_quicksearch.js, which I am using as a model.

    What am I doing wrong?
     
  2. katsulynx

    katsulynx Well-Known Member

    The scripts in the /full-folder are not used during runtime, but their compiled counterparts are.
     
  3. Nerbert

    Nerbert Member

    Yes, I referenced the full version because it would be impossible to see it in the minified one.

    To update, here's a file straight out of Kier's scratchpad demo (https://xenforo.com/community/threads/scratchpad-demonstration-ajax-add-on.8369/) with function names changed:

    Code:
    /** @param {jQuery} $ jQuery Object */
    !function($, window, document, _undefined)
    {
        // new namespace for this add-on: XenForo.Graffiti
        XenForo.Graffiti =
        {
            /**
            * A bit like quick reply, but for Graffiti notes
            *
            * @param jQuery form.GraffitiPost
            */
            Post: function($form)
            {
                // bind a function onto the AutoValidationComplete event of the form AutoValidator
                $form.bind('AutoValidationComplete', function(e)
                {
                    // check that templateHtml was received from the AJAX request
                    if (e.ajaxData.templateHtml)
                    {
                        // prevent the normal AutoValidator success message and redirect stuff
                        e.preventDefault();
    
                        // hide the 'no notes' message if it's there, and when it is hidden...
                        $('#GraffitiNoNotes').slideUp(XenForo.speed.fast, function()
                        {
                            // ... load any externals specified by the template, and when that's done...
                            new XenForo.ExtLoader(e.ajaxData, function()
                            {
                                // ... prepend the templateHtml into the notes area
                                $(e.ajaxData.templateHtml).xfInsert('prependTo', '#GraffitiNewNotes');
                            });
    
                            // clear the textarea contents and refocus it
                            $form.find('textarea[name=message]').val('').focus();
    
                            // set the 'date' input field to contain the date of the most recent post (from ajaxData)
                            $form.find('input[name=date]').val(e.ajaxData.date);
    
                            // re-enable the submit button if it's been disabled
                            $form.find('input:submit').removeAttr('disabled').removeClass('disabled');
                        });
                    }
                });
            }
        };
    
        // register the Post functionality
        XenForo.register('form.GraffitiPost', 'XenForo.Graffiti.Post');
    
    }
    (jQuery, this, document);
    
    Note the XenForo.register() at the bottom. My experiments indicate that some element must be registered for jQ to work. register() binds the function to the form when it's submitted and executes the function after disabling submission. I guess it works but I never want the form submitted if someone has JS disabled. And I also have future projects where a form will not be used.

    Is there some other way of getting jQ to work without using register()?
     

Share This Page