Customizing Forms 2.0 with Jquery - late loading

[Brennan_McAdam2 · Accepted solution]

Found an even better solution.

Jquery is loading first as it is declared in the header.  As the Forms2.js is placed inline (after the header), I modifed the call to first check jQuery is ready, then check that the form is loaded to begin processing. 

//Attach change of select to display
    $(document).ready(function() {  //switched this to the top
        MktoForms2.whenReady(function (form){  //once jquery is ready, wait for the form
            $("#repurpose8").change( function(){
                changeLoc($(this).children('option:selected').index());
         });
        });
    });

[SanfordWhiteman]

That last way can actually be less efficient.   By delaying attaching whenReady until after DOMReady you may introduce a delay (whether this delay is perceptible to humans depends of course on the complexity of your page) if you were also doing other stuff in whenReady that didn't care about the rest of the DOM.

May you're not totally getting what $(document).ready() (a.k.a. DOMready) means? It doesn't mean that "jQuery is ready" (in fact, it can't mean that, since $() is a jQuery function that will not work unless the jQuery library is loaded in-scope).  

DOMReady is fired when the entire initial DOM has loaded, that is, the "scaffolding" of the page but not necessarily all of the displayable content.  DOMReady isn't he same as the Marketo whenReady() nor is it a prerequisite for whenReady() to fire.  

One usually waits for DOMReady before adding event listeners, but that's not definitive.  You can add an event listener to a SELECT element before any more of the page is drawn and it will still work fine... of course, if the event listener code expects to find other elements in the page that aren't drawn yet, that will be a problem, but that's a separate concern.   

Bottom line is there is no one-size-fits all dependency pattern when dealing with jQuery's DOMReady and Marketo's whenReady and I would take care to not introduce dependencies without knowing why they are necessary.