Problem with form inside div

[Andrew Nguyen-5]

I have the following snippet of code in my tml file:

<div id="categorypopup_div_${headline.id}" class="popup long">
      
     <form t:id="categoryform">
       <input type="hidden" name="headlineId" id="headlineId" value="$
{headline.id}"/>
       <select t:id="category"
               t:type="select"
               t:model="allCategoriesModel"
               t:encoder="allCategoriesModel"
               t:blankOption="ALWAYS"
               t:blankLabel="Choose new cat"/>
       <br/><br/>
       <input type="submit" id="save" value="Save"  
class="popup_closebox"/>   
       <span class="popup_link popup_closebox">Cancel</span>
     </form>
</div>

When the page is accessed via Firefox (with Firebug), it is rendered as:

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

where the form is outside of the <div>...

Any ideas?  I am very new to Tapestry development...

Thanks,
Andrew

[DH-14]

Hi,

Don't ever have such issue, I always put form inside div too.

What about the generated html source code? Is it right?

DH
http://www.gaonline.com.cn

----- Original Message -----
From: "Andrew Nguyen"
To: <users@...>
Sent: Thursday, July 02, 2009 10:16 AM
Subject: Problem with form inside div

>I have the following snippet of code in my tml file:
>
> <div id="categorypopup_div_${headline.id}" class="popup long">
>      
>     <form t:id="categoryform">
>       <input type="hidden" name="headlineId" id="headlineId" value="$
> {headline.id}"/>
>       <select t:id="category"
>               t:type="select"
>               t:model="allCategoriesModel"
>               t:encoder="allCategoriesModel"
>               t:blankOption="ALWAYS"
>               t:blankLabel="Choose new cat"/>
>       <br/><br/>
>       <input type="submit" id="save" value="Save"  
> class="popup_closebox"/>   
>       <span class="popup_link popup_closebox">Cancel</span>
>     </form>
> </div>
>
> When the page is accessed via Firefox (with Firebug), it is rendered as:
>
> <div... />
> <form>
> ....
> </form>
>
> where the form is outside of the <div>...
>
> Any ideas?  I am very new to Tapestry development...
>
> Thanks,
> Andrew

[Andrew Nguyen-6]

The generated source code uses some javascript so it's hard to look at  
the rendered HTML.  Using firebug, the HTML is definitely not correct.

However, I have been doing some more testing and the problem seems to  
be when the code snippet below is located inside a <t:block> and  
dynamically updated.  I don't know if this is the best way but I'm  
trying to have a zone get dynamically updated...  So, I effectively  
have the following:

<t:zone t:id="headlineZone>
<...code snippet below...>
</t:zone>
<t:block t:id="headlineBlock">
<... code snippet below, again...>
</t:block>

This was the only way I could have the form below show up on initial  
page load, and then get updated after the form is successfully  
submitted.  The code displays as expected initially, but after the  
partial update, the div and form is messed up.  The code in the zone  
and block are identical (copy/pasted).

If there is a better way to accomplish the above, I'm all for it.  
But, it seems like what I have should at least work but the code in  
the block seems to be treated differently.

Thanks,
Andrew

On Jul 1, 2009, at 7:47 PM, DH wrote:

> Hi,
>
> Don't ever have such issue, I always put form inside div too.
>
> What about the generated html source code? Is it right?
>
> DH
> http://www.gaonline.com.cn
>
> ----- Original Message -----
> From: "Andrew Nguyen"
> To: <users@...>
> Sent: Thursday, July 02, 2009 10:16 AM
> Subject: Problem with form inside div
>
>
>> I have the following snippet of code in my tml file:
>>
>> <div id="categorypopup_div_${headline.id}" class="popup long">
>>     
>>    <form t:id="categoryform">
>>      <input type="hidden" name="headlineId" id="headlineId" value="$
>> {headline.id}"/>
>>      <select t:id="category"
>>              t:type="select"
>>              t:model="allCategoriesModel"
>>              t:encoder="allCategoriesModel"
>>              t:blankOption="ALWAYS"
>>              t:blankLabel="Choose new cat"/>
>>      <br/><br/>
>>      <input type="submit" id="save" value="Save"
>> class="popup_closebox"/>   
>>      <span class="popup_link popup_closebox">Cancel</span>
>>    </form>
>> </div>
>>
>> When the page is accessed via Firefox (with Firebug), it is  
>> rendered as:
>>
>> <div... />
>> <form>
>> ....
>> </form>
>>
>> where the form is outside of the <div>...
>>
>> Any ideas?  I am very new to Tapestry development...
>>
>> Thanks,
>> Andrew

[Andrew Nguyen-6]

Of course, it turned out to be something else - I messed up the  
tables...

Thanks all,
Andrew

On Jul 1, 2009, at 7:47 PM, DH wrote:

> Hi,
>
> Don't ever have such issue, I always put form inside div too.
>
> What about the generated html source code? Is it right?
>
> DH
> http://www.gaonline.com.cn
>
> ----- Original Message -----
> From: "Andrew Nguyen"
> To: <users@...>
> Sent: Thursday, July 02, 2009 10:16 AM
> Subject: Problem with form inside div
>
>
>> I have the following snippet of code in my tml file:
>>
>> <div id="categorypopup_div_${headline.id}" class="popup long">
>>     
>>    <form t:id="categoryform">
>>      <input type="hidden" name="headlineId" id="headlineId" value="$
>> {headline.id}"/>
>>      <select t:id="category"
>>              t:type="select"
>>              t:model="allCategoriesModel"
>>              t:encoder="allCategoriesModel"
>>              t:blankOption="ALWAYS"
>>              t:blankLabel="Choose new cat"/>
>>      <br/><br/>
>>      <input type="submit" id="save" value="Save"
>> class="popup_closebox"/>   
>>      <span class="popup_link popup_closebox">Cancel</span>
>>    </form>
>> </div>
>>
>> When the page is accessed via Firefox (with Firebug), it is  
>> rendered as:
>>
>> <div... />
>> <form>
>> ....
>> </form>
>>
>> where the form is outside of the <div>...
>>
>> Any ideas?  I am very new to Tapestry development...
>>
>> Thanks,
>> Andrew