One form grouping multiple tabs or panels

[hady]

I have a Dialog window that pops up with two panels; one in the West (with a list of clickable links) and one in the Center (well atleast one).

The content of the panel in the center is populated using AJAX. I was doing this initially using prototype but got equally working by using the yui-ext framework itself.

What I am trying to create is multiple tabs in the center, all under one form. So that when a person closes the dialog I simply read all the object associated with the root form, that contains all its tabs underneath and send it to the server for processing. It seems when yui-ext populates a given div to be a panel or a tab, it removes them from the DOM structure?? Making me unable to retrieve the form fields afterwards.

Anybody went through this problem or implemented a similar application?

[tryanDLS]

It doesn't remove your elements from the DOM. If however you let elements get autocreated, it's conceivable that they're outside your form. I haven't tried this, but I would imagine that if you did the following


<yourform>
<div></div>
<div></div>
</yourform>


and created your panels with those ids and didn't say autocreate, it would work.

EDIT: dont' know why it's not disabling HTML, but those div should have id=... on them

[hady]

Yea tyran I tried that and it didnt work for me.

I'm at work at the moment, I will make another post shortly with some code to prove the problem that I'm facing.

[jbowman]

yui-ext can't be removing the elements from DOM, or you wouldn't be able to see them. However, it is concievable that it's moving the elements out your form to place them in the tabpanel. Are you using TabPanel, or Layout?

Have you tried using the web developer extension for firefox to see where all the elements end up after the page is completely rendered?

[tryanDLS]

It is moving the tab elements outside the form - seems to me this came up before, I'll look at it some more in the AM

[jbowman]

If that's the case, wrap your form around the tabpanel element. The fields will get put inside of it.

[tryanDLS]

You need to put your tabpanel elements inside your form element, but they will still get moved outside the form by layout building.

The solution is to create your dialog using the id of the form element, not the div that contains the form. This is same as the solution to handling the ASP.Net form issues. If you can't get this to work, I'll post a more complete sample - I just need to clean up the code a little.

[hady]

Tyran I initially tried what you just said in your last post: Wrap all my tab elements with the form div.

e.g.


<form> //id=myForm
<div> //id=center1 class=ylayout-inactive-content
...
</div>
<div> //id=center2 class=ylayout-inactive-content
...
</div>
</form>

If I print something like $F('myForm') before I initialise my dialog, the latter would return me all the form fields that I have inside the tabs.

Once the dialog is up and running, $F('myForm') becomes empty.

As I said above, it is as if the form input fields inside the tabs get extracted out into a different structure or something?!

[tryanDLS]

If you build your dialog with a ref to the form element, rather than the outer div, the input fields won't get moved. However, numerous other HTML elements will get wrapped around them, potentially breaking your navigation to them. You need to look at the generated HTML after the dialog is rendered to see what happens to your initial markup.

Here's a sample. Note that the code that pulls the form values is a very simple way to do it - doesn't account for the different types of elements besides a simple input field. Also that method does not guarantee that the fields are returned in their original order.



formInDialog = function() {
var dlg, btn;

build = function() {
if (!dlg) {
dlg = new YAHOO.ext.BasicDialog('frmLogin', {
title: 'Test Dialog',
width: 300, height: 300,
resizable: true, minWidth:200, minHeight:300,
shadow: true,
shim: true,
animateTarget: 'btn',
autoTabs: true
});

dlg.addKeyListener(27, dlg.hide, dlg);
dlg.setDefaultButton(dlg.addButton('Close', getFormData, dlg));
}

dlg.getTabs().getTab(0).setText('Panel1');
dlg.getTabs().getTab(1).setText('Panel2');

dlg.show();
};

getFormData = function() {
var s = [];
var fields = YAHOO.util.Dom.getElementsByClassName('forminput', 'input', dlg.el.dom);
for (var i=0, len=fields.length; i<len; i++) {
s[i] = fields[i].name + '=' + fields[i].value + '\n';
}
alert (s.join(''));
dlg.hide();
};

return {
init: function() {
getEl('btn').on('click', build, this, true);
}
}
}();

YAHOO.ext.EventManager.onDocumentReady(formInDialog.init, formInDialog, true);

</script>
<button id="btn">Click Me!</button>
<div id="dlgHello" style="visibility:hidden;">
<form id="frmLogin" name="frmLogin" method="POST" action="" onsubmit="return false;">
<div id="p1" class="ydlg-tab">
<div class="ydlg-bd" style="margin-top:20px">
<label for="fld1">Field1:</label><input class="forminput" type="text" maxlength="10" name="fld1" value=""/>

<label for="fld2">Field2:</label><input class="forminput" type="text" maxlength="10" name="fld2" value="" />

</div>
</div>
<div id="p2" class="ydlg-tab">
<div class="ydlg-bd" style="margin-top:20px">
<label for="fld3">Field3:</label><input class="forminput" type="text" maxlength="10" name="fld3" value=""/>

<label for="fld4">Field4:</label><input class="forminput" type="text" maxlength="10" name="fld4" value="" />

</div>
</div>
</form>
</div>