jQuery Not Working

[Nerbert]

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)

/** @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?

 

[Lukas W.]

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

 

[Nerbert]

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

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:

/** @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()?