You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Joachim Rohde <ma...@joachimrohde.com> on 2010/09/17 00:17:14 UTC

Form values are not submitted if form-component is initially not visible

I have a listview which is displaying in each row some data within a 
form, among other things a date (as a label which is initially shown)
and a Panel containing a (wiquery-)datepicker (which is initially hiding).
Each row also has an edit-link (AjaxLink) and a save-link (SubmitLink).
After clicking the edit-link I'm hiding the date-label and display my 
panel with the datepicker.

My problem is now that after clicking the SubmitLink I'm getting a 
null-value from my datePicker.

If I am setting the visibility of my panel from the very beginning to 
"true" and omit adding my panel to the AjaxRequestTarget within my 
AjaxLink, everything
works as expected: the datepicker is returning the selected value.

What am I doing wrong here? How can I display my panel via Ajax and 
getting anyway my form-values submitted?

I tried already several hours to find a solution, searched the mailing 
list and web but I don't find any solution. So thanks in advance for any 
suggestion.

Joachim


PS:
Here are the relevant pieces of code:

My Listview:

         ListView tiltos = new ListView("myList", myList)
         {

             @Override
             protected void populateItem(final ListItem listItem)
             {

                 Form form = new Form("form");
                 listItem.add(form);

                 // the actual date is set later in the code
                 final Label dateToBuy = new Label("dayToBuy", "keine 
Angabe");
                 dateToBuy.setOutputMarkupId(true);
                 dateToBuy.setOutputMarkupPlaceholderTag(true);
                 form.add(dateToBuy)

                 final EditDatePanel editDate = new 
EditDatePanel("editDate");

                 // if i set this to true and ommit the line later, 
everything works
                 editDate.setVisible(false);

                 editDate.setOutputMarkupId(true);
                 editDate.setOutputMarkupPlaceholderTag(true);
                 form.add(editDate);

                 final SubmitLink saveLink = new SubmitLink("saveLink")
                 {

                     @Override
                     public void onSubmit()
                     {
                         // the output here is always null if the 
editDatePanel
                         // is added to the AjaxRequestTarget (see 
following lines)
                         System.out.println("test = " + editDate.getTest());
                     }
                 }

                 final AjaxLink editLink = new AjaxLink("editLink")
                 {

                     @Override
                     public void onClick(AjaxRequestTarget target)
                     {
                         dateToBuy.setVisible(false);
                         editDate.setVisible(true);
                         target.addComponent(dateToBuy);

                         // this one causes my form not to submit any values
                        // if I ommit it everything works
                         target.addComponent(editDate, 
editDate.getMarkupId());
                     }
                 };

                 form.add(editLink);
             }

         }


The markup to my listview:

<table>
<span wicket:id="myList">
<form wicket:id="form">
<tr>
<td class="userListM">
<span wicket:id="editDate" />
<span wicket:id="dayToBuy">01.06.2010</span>
</td>
</tr>
</form>
</span>
</table>



My panel (which is, at least I think so, irrelevant to my problem):

public final class EditDatePanel extends Panel
{

     private Date test;

     public EditDatePanel(String id)
     {
         super(id);

                 DatePicker<Date> datePicker = new 
DatePicker<Date>("datePicker", new PropertyModel(this, "test")) {
                     public void onModelChanging()
                     {
                         System.out.println("geht los jetzt!!!!!");
                     }
                 };
                 datePicker.setNumberOfMonths(new 
DatePickerNumberOfMonths(new Short((short) 1)));
                 datePicker.setShowButtonPanel(false);
                 datePicker.setShowOn(ShowOnEnum.FOCUS);

                 datePicker.setOutputMarkupId(true);
                 datePicker.setOutputMarkupPlaceholderTag(true);

                 datePicker.setVisible(true);
                 add(datePicker);
     }

     public Date getTest()
     {
         return test;
     }

     public void setTest(Date test)
     {
         this.test = test;
         System.out.println("test   x: " +test);
     }
}

The markup to my panel:

<wicket:panel>
<input type="text" wicket:id="datePicker" class="input80px"/>
</wicket:panel>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Form values are not submitted if form-component is initially not visible

Posted by Joachim Rohde <ma...@joachimrohde.com>.
Am 17.09.2010 21:16, schrieb Jeremy Thomerson:
>> Thanks for the answer. But if I'm adding my form to the target the
>> visibility of the components does not change anymore. Anything else I'm
>> overseeing?
>>      
>
> It should.  Did you look in the wicket ajax log window?  Did you add
> form.setOutputMarkupId(true) ?
>    
OutputMarkupId was already set to true. But that was also not the 
solution. I found out what was going wrong. The markup screwed things up.

Before my markup looked like this:
<table>
<span wicket:id="myList">
<form wicket:id="form">
[...]
</form>
</span>
</table>

But forms within tables seem to be invalid. If I rearrange the markup to 
this:

<span wicket:id="myList">
<form wicket:id="form">
<table>
                          [...]
</table>
</form>
</span>

everything works as expected. Why can't browser just be as strict as 
compilers? *sigh*
Thanks anyway for your time Jeremy.


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Form values are not submitted if form-component is initially not visible

Posted by Jeremy Thomerson <je...@wickettraining.com>.
>
> Thanks for the answer. But if I'm adding my form to the target the
> visibility of the components does not change anymore. Anything else I'm
> overseeing?


It should.  Did you look in the wicket ajax log window?  Did you add
form.setOutputMarkupId(true) ?
-- 
Jeremy Thomerson
http://www.wickettraining.com

Re: Form values are not submitted if form-component is initially not visible

Posted by Joachim Rohde <ma...@joachimrohde.com>.
Am 17.09.2010 07:21, schrieb Jeremy Thomerson:
> On Thu, Sep 16, 2010 at 5:17 PM, Joachim Rohde<mailinglist@joachimrohde.com
>    
>> wrote:
>>      
>    
>> I have a listview which is displaying in each row some data within a form,
>> among other things a date (as a label which is initially shown)
>> and a Panel containing a (wiquery-)datepicker (which is initially hiding).
>> Each row also has an edit-link (AjaxLink) and a save-link (SubmitLink).
>> After clicking the edit-link I'm hiding the date-label and display my panel
>> with the datepicker.
>>
>> My problem is now that after clicking the SubmitLink I'm getting a
>> null-value from my datePicker.
>>
>> If I am setting the visibility of my panel from the very beginning to
>> "true" and omit adding my panel to the AjaxRequestTarget within my AjaxLink,
>> everything
>> works as expected: the datepicker is returning the selected value.
>>
>> What am I doing wrong here? How can I display my panel via Ajax and getting
>> anyway my form-values submitted?
>>
>> I tried already several hours to find a solution, searched the mailing list
>> and web but I don't find any solution. So thanks in advance for any
>> suggestion.
>>
>> Joachim
>>
>>
>> PS:
>> Here are the relevant pieces of code:
>>
>> My Listview:
>>
>>         ListView tiltos = new ListView("myList", myList)
>>         {
>>
>>             @Override
>>             protected void populateItem(final ListItem listItem)
>>             {
>>
>>                 Form form = new Form("form");
>>                 listItem.add(form);
>>
>>                 // the actual date is set later in the code
>>                 final Label dateToBuy = new Label("dayToBuy", "keine
>> Angabe");
>>                 dateToBuy.setOutputMarkupId(true);
>>                 dateToBuy.setOutputMarkupPlaceholderTag(true);
>>                 form.add(dateToBuy)
>>
>>                 final EditDatePanel editDate = new
>> EditDatePanel("editDate");
>>
>>                 // if i set this to true and ommit the line later,
>> everything works
>>                 editDate.setVisible(false);
>>
>>                 editDate.setOutputMarkupId(true);
>>                 editDate.setOutputMarkupPlaceholderTag(true);
>>                 form.add(editDate);
>>
>>                 final SubmitLink saveLink = new SubmitLink("saveLink")
>>                 {
>>
>>                     @Override
>>                     public void onSubmit()
>>                     {
>>                         // the output here is always null if the
>> editDatePanel
>>                         // is added to the AjaxRequestTarget (see following
>> lines)
>>                         System.out.println("test = " + editDate.getTest());
>>                     }
>>                 }
>>
>>                 final AjaxLink editLink = new AjaxLink("editLink")
>>                 {
>>
>>                     @Override
>>                     public void onClick(AjaxRequestTarget target)
>>                     {
>>                         dateToBuy.setVisible(false);
>>                         editDate.setVisible(true);
>>                         target.addComponent(dateToBuy);
>>
>>                         // this one causes my form not to submit any values
>>                        // if I ommit it everything works
>>                         target.addComponent(editDate,
>> editDate.getMarkupId());
>>                     }
>>                 };
>>
>>                 form.add(editLink);
>>             }
>>
>>         }
>>
>>
>> The markup to my listview:
>>
>> <table>
>> <span wicket:id="myList">
>> <form wicket:id="form">
>> <tr>
>> <td class="userListM">
>> <span wicket:id="editDate" />
>> <span wicket:id="dayToBuy">01.06.2010</span>
>> </td>
>> </tr>
>> </form>
>> </span>
>> </table>
>>
>>
>>
>> My panel (which is, at least I think so, irrelevant to my problem):
>>
>> public final class EditDatePanel extends Panel
>> {
>>
>>     private Date test;
>>
>>     public EditDatePanel(String id)
>>     {
>>         super(id);
>>
>>                 DatePicker<Date>  datePicker = new
>> DatePicker<Date>("datePicker", new PropertyModel(this, "test")) {
>>                     public void onModelChanging()
>>                     {
>>                         System.out.println("geht los jetzt!!!!!");
>>                     }
>>                 };
>>                 datePicker.setNumberOfMonths(new
>> DatePickerNumberOfMonths(new Short((short) 1)));
>>                 datePicker.setShowButtonPanel(false);
>>                 datePicker.setShowOn(ShowOnEnum.FOCUS);
>>
>>                 datePicker.setOutputMarkupId(true);
>>                 datePicker.setOutputMarkupPlaceholderTag(true);
>>
>>                 datePicker.setVisible(true);
>>                 add(datePicker);
>>     }
>>
>>     public Date getTest()
>>     {
>>         return test;
>>     }
>>
>>     public void setTest(Date test)
>>     {
>>         this.test = test;
>>         System.out.println("test   x: " +test);
>>     }
>> }
>>
>> The markup to my panel:
>>
>> <wicket:panel>
>> <input type="text" wicket:id="datePicker" class="input80px"/>
>> </wicket:panel>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>>      
> Add the entire form to the AjaxRequestTarget.  The form's action URL is
> out-of-date and pulls up the old version of the page.
>
>    
Thanks for the answer. But if I'm adding my form to the target the 
visibility of the components does not change anymore. Anything else I'm 
overseeing?

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Form values are not submitted if form-component is initially not visible

Posted by Jeremy Thomerson <je...@wickettraining.com>.
On Thu, Sep 16, 2010 at 5:17 PM, Joachim Rohde <mailinglist@joachimrohde.com
> wrote:

> I have a listview which is displaying in each row some data within a form,
> among other things a date (as a label which is initially shown)
> and a Panel containing a (wiquery-)datepicker (which is initially hiding).
> Each row also has an edit-link (AjaxLink) and a save-link (SubmitLink).
> After clicking the edit-link I'm hiding the date-label and display my panel
> with the datepicker.
>
> My problem is now that after clicking the SubmitLink I'm getting a
> null-value from my datePicker.
>
> If I am setting the visibility of my panel from the very beginning to
> "true" and omit adding my panel to the AjaxRequestTarget within my AjaxLink,
> everything
> works as expected: the datepicker is returning the selected value.
>
> What am I doing wrong here? How can I display my panel via Ajax and getting
> anyway my form-values submitted?
>
> I tried already several hours to find a solution, searched the mailing list
> and web but I don't find any solution. So thanks in advance for any
> suggestion.
>
> Joachim
>
>
> PS:
> Here are the relevant pieces of code:
>
> My Listview:
>
>        ListView tiltos = new ListView("myList", myList)
>        {
>
>            @Override
>            protected void populateItem(final ListItem listItem)
>            {
>
>                Form form = new Form("form");
>                listItem.add(form);
>
>                // the actual date is set later in the code
>                final Label dateToBuy = new Label("dayToBuy", "keine
> Angabe");
>                dateToBuy.setOutputMarkupId(true);
>                dateToBuy.setOutputMarkupPlaceholderTag(true);
>                form.add(dateToBuy)
>
>                final EditDatePanel editDate = new
> EditDatePanel("editDate");
>
>                // if i set this to true and ommit the line later,
> everything works
>                editDate.setVisible(false);
>
>                editDate.setOutputMarkupId(true);
>                editDate.setOutputMarkupPlaceholderTag(true);
>                form.add(editDate);
>
>                final SubmitLink saveLink = new SubmitLink("saveLink")
>                {
>
>                    @Override
>                    public void onSubmit()
>                    {
>                        // the output here is always null if the
> editDatePanel
>                        // is added to the AjaxRequestTarget (see following
> lines)
>                        System.out.println("test = " + editDate.getTest());
>                    }
>                }
>
>                final AjaxLink editLink = new AjaxLink("editLink")
>                {
>
>                    @Override
>                    public void onClick(AjaxRequestTarget target)
>                    {
>                        dateToBuy.setVisible(false);
>                        editDate.setVisible(true);
>                        target.addComponent(dateToBuy);
>
>                        // this one causes my form not to submit any values
>                       // if I ommit it everything works
>                        target.addComponent(editDate,
> editDate.getMarkupId());
>                    }
>                };
>
>                form.add(editLink);
>            }
>
>        }
>
>
> The markup to my listview:
>
> <table>
> <span wicket:id="myList">
> <form wicket:id="form">
> <tr>
> <td class="userListM">
> <span wicket:id="editDate" />
> <span wicket:id="dayToBuy">01.06.2010</span>
> </td>
> </tr>
> </form>
> </span>
> </table>
>
>
>
> My panel (which is, at least I think so, irrelevant to my problem):
>
> public final class EditDatePanel extends Panel
> {
>
>    private Date test;
>
>    public EditDatePanel(String id)
>    {
>        super(id);
>
>                DatePicker<Date> datePicker = new
> DatePicker<Date>("datePicker", new PropertyModel(this, "test")) {
>                    public void onModelChanging()
>                    {
>                        System.out.println("geht los jetzt!!!!!");
>                    }
>                };
>                datePicker.setNumberOfMonths(new
> DatePickerNumberOfMonths(new Short((short) 1)));
>                datePicker.setShowButtonPanel(false);
>                datePicker.setShowOn(ShowOnEnum.FOCUS);
>
>                datePicker.setOutputMarkupId(true);
>                datePicker.setOutputMarkupPlaceholderTag(true);
>
>                datePicker.setVisible(true);
>                add(datePicker);
>    }
>
>    public Date getTest()
>    {
>        return test;
>    }
>
>    public void setTest(Date test)
>    {
>        this.test = test;
>        System.out.println("test   x: " +test);
>    }
> }
>
> The markup to my panel:
>
> <wicket:panel>
> <input type="text" wicket:id="datePicker" class="input80px"/>
> </wicket:panel>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Add the entire form to the AjaxRequestTarget.  The form's action URL is
out-of-date and pulls up the old version of the page.

-- 
Jeremy Thomerson
http://www.wickettraining.com