Customizing Forms 2.0 with Jquery - late loading

[Brennan_McAdam2]

I have been experimenting with creating dynamic sections of a landing page based on the selection of from a select menu.  I finally figured out that I was having problems between when Jquery was ready and when the form actually loaded.  In the end, I ended up explicitly adding the Form2.js in the top of my html block to get the MktoForms2.whenReady to properly call.  However, I am wondering if anyone solved this differently as a hate loading a script in twice.

[SanfordWhiteman]

The goal isn't entirely clear (sorry!) without example code/URL.

Try to create an example of code that triggers the failure (rather than code you fixed with a workaround) and post the URL.

[Brennan_McAdam2]

Here is the code.

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
//This line here is required or the ReferenceError: MktoForms2 is not defined
<script type="text/JavaScript" src="http://info.purestorage.com/js/forms2/js/forms2.min.js" ></script>
    
<script type="application/javascript">
    var $ = jQuery.noConflict();

    var Locations = ["<b>San Francisco</b><br /> What a foggy city!","<b>New York</b><br /> It's the Big Apple, need we say more!", "<b>London</b><br /> It's a foggy city too, ever heard of London Fog?"];

    function changeLoc(i) {
        i = i - 1;
        $("#Location-Tag").html(Locations[i]);
    }


//requires a second inline load of forms2.min.js to be available.  See http://developers.marketo.com/documentation/websites/forms-2-0/    
MktoForms2.whenReady(function (form){
    //Attach change of select to display
    $(document).ready(function() {
//This is the failing element in that Jquery calls ready before form is loaded.
        $("#repurpose8").change( function(){
            changeLoc($(this).children('option:selected').index());
        });
    });
});

</script>

[SanfordWhiteman]

How about a URL where that code is running, so I don't have to make my own landing page?

[SanfordWhiteman]

OK, I threw together a landing page and reduced your code to the apparent problem area, but I don't see a problem. http://pages.vaneck.com/jq-whenready.html listens for the MktoForms2.whenReady event and then adds an Element.onChange event listener to the `Email` field, using jQ syntax for the native event.

There's nothing special about the Landing Page.  I added jQuery in the HEAD (using standard LP Actions >> Edit Page Meta Tags).  Then an HTML Element to hold the SCRIPT tag.

[Brennan_McAdam2]

Yes, the code works.  If you scan the javascripts that get loaded, In the code, i had to import the forms2.js into the block to get the MktoForms2.whenReady to work.  My question is has any else experienced late loading of forms? 

In your example, try removing the <script type="text/JavaScript" src="http://info.purestorage.com/js/forms2/js/forms2.min.js" ></script>.  Does it still work?  When testing this I found the forms2.js was loading in well after Jquery called ready.  Hence my second declarition in my script.  Perhaps it is something else in my page. 

BTW, I appreciate looking at this and burning the midnight oil.

[SanfordWhiteman]

@Brennan M There's no such line in my landing page; there's only the built-in forms2.min.js include that the LP adds to support the form widget.  

I do have a feeling there's something else in your page b/c I kept it as basic as possible.

[Brennan_McAdam2]

I found it.  It was the forms2.js is placed below in my page and inline (not in the header).  So in my case it is late.  Thanks for helping.

[SanfordWhiteman]

An inline SCRIPT tag is fine but MktoForms2 needs to be in-scope when you first call it...

[Brennan_McAdam2]

Yes, I didn't realize that forms2.js was place inline and not at the header.