PDA

View Full Version : Unusual behaviour with EventManager and Form elements



vickramj
22 Nov 2006, 1:44 PM
I've noticed very unusual behaviour when using the EventManager and trying to access form elements within my page. By way of background, I'm using the Simple Layout example in the documentation to create a simple page with a form embedded within it -- see below.


Example = function(){
return {
init : function() {
var layout = new YAHOO.ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 35
},
center: {
autoScroll: true
}
});
layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('buttonHeader', {fitToFrame:true}));
layout.add('center', new YAHOO.ext.ContentPanel('content'));
layout.endUpdate();
}
}

}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);

If I call

document.forms[0].fieldNameHere
after the page has loaded (and the EventManager has done its thing and reformatted my page), I get undefined. If I disable the

// YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
line, and run the same

document.forms[0].fieldNameHere
I get my form element reference back.

Has anyone seen this before? Assistance would be appreciated. Note that I am a newbie to the yui-ext libraries, so perhaps I am doing something wrong and this is a known issue.

jack.slocum
22 Nov 2006, 3:07 PM
EventManager has nothing to do with forms.

The layout code rearranges dom elements though and it's possible that your form no longer contains that element if your form is outside of the panel. For example this markup:

<body>
<form>
<div id = "foo">
<input name="test">
</div>
</form>
</body>

If you created a layout and used foo as a panel, foo would get moved to the body element and look like this (possibly wrapped with other elements as well):

<body>
<form>
</form>
<div id = "foo">
<input name="test">
</div>
</body>

You will need to a) put the form inside the panel as well, or b) render to a div inside of the form instead of the body.

On a side note, there any reason you using document.forms[0] type syntax?

<form id="my-form">

var f = document.getElementById('my-form');

vickramj
22 Nov 2006, 4:41 PM
Thanks for the quick response.

So the application that I am using to build my app does not permit me to fiddle with the placement of the form, unfortunately. The <form> tag begins immediately after the <body> tag and ends immediately before the </body> tag. So I can't do much (without enormous difficulty) about placing it entirely within the panel.

How do I try option (b) "render to a div inside of the form instead of the body"?

Also, you're right I should be using getElementById, but I cannot assign an ID to the form through this application, so that doesn't work.

vickramj
22 Nov 2006, 4:57 PM
So I take that back, it isn't all that difficult to move the form element around. I had to blank out the initial form with a </form> and recreate it manually further down the page within my content panel div. It does look like I can get the form elements now, so that confirms that you were bang on.

I am still curious to know how you do option b -- I looked at the javadoc and it is a little too vague for my intermediate javascript skills.

Thanks.

jack.slocum
22 Nov 2006, 5:20 PM
There's a thread on using BorderLayout with ASP.Net, it has the details. I will find it and sticky it.