Squarespace form not loaded when my jquery runs (in IE)

Question

The main problem is square-space builds their forms with java-script (YUI). They have are loading their code on document ready. How can I wait until their form loads? This is only a problem in IE.

My Code: (executes first)

$(document).ready(function() {
    $('#formFieldEl6').each(function(){
        var collection = $.deparam.querystring(window.location);
        $(this).val(collection.id);
        $(this).attr("disabled", true);
    });
});

Squarespace Code: (executes last)

  var theForm10248992;
  YAHOO.util.Event.onDOMReady(function() {
  theForm10248992 = new Squarespace.FormBuilder( "theForm10248992", "formOuterContainer10248992", "formFields10248992", "formAddFieldControl10248992", "formErrorMessage10248992", "formSubmitButton10248992", 10248992,  true ,  false ,  false , "Thanks for responding!" );

  theForm10248992.initializeField( 6, "normal", "Title1", "", true, "", "", 1504386 );
  theForm10248992.initializeField( 9, "normal", "Title2", "", true, "", "", 1504463 );
  theForm10248992.initializeField( 4, "medium", "Title3", "", true, "", "", 1504387 );
  theForm10248992.initializeField( 1, "medium", "Title4", "", true, "", "", 1504395 );
  theForm10248992.initializeField( 2, "large", "Title5", "", true, "", "", 1504390 );
  theForm10248992.initializeField( 1, "small", "Title6", "", true, "", "", 1599975 );

  if (Squarespace.Orderable) { Squarespace.Orderable.ItemManager.initialize(); }
  });

The code just fills in a value from the URL and disables the control. This works in FF and Chrome. When debugging with the developer tools in IE, I can manually wait on a breakpoint until the form loads and then the code works, but I still cannot get this to work in a normal setting. Any ideas?

Answer 1

$(window). load (function() { .... }); Fixed the problem – It fires when the entire window has been loaded.

Answer 2

$(document).ready()

fires when the html and css are loaded. It doesn't check if the images are loaded.

Try $("body").load(function(){alert("body loaded");})

This fires when the html, css and images have loaded, usually it's a little bit later.

Alternately, look into using a timer to run your code a few milliseconds after document.ready fires.