You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Vijay Dharap <vj...@gmail.com> on 2008/02/03 10:41:05 UTC

Help in ajax repainting of table

Hi,

I am fairly new to world of wicket. so my issue might be something very 
trivial.
I am using a simple form to input some fields. and i want to update the 
table below in the same page with the newly entered info in the form 
above. Page should not refresh. table should be updated through AJAX.

Looking at various examples, I could get my ajax part working. but. now 
when i enter details in the form above 2nd time, the refreshed table 
below replaces all the old entries same as latest entry.
e.g. 1st time descr was "1sst time", when i try to submit page second 
time with description "2nd time" both rows of table now show "2nd time" 
as description.

Can anyone help pinpoint what i am doing wrong?

Here is the code that i tried.
*Fee.java*

public class Fee extends WebPage {
	private static final Logger logger = LoggerFactory.getLogger(Fee.class);
	private String pageTitle;
	/** Container for the fees table, used to update the listview. */
	private WebMarkupContainer feesContainer;
	private ListView fees;
	private FeeForm form;
	public Fee() {
		super();
		FeeModel fee = new FeeModel();
		CompoundPropertyModel propertyModel = new CompoundPropertyModel(fee);
		form = new FeeForm("feeForm", propertyModel);
		pageTitle = "Add Fees and listing of Current Fees!";
		fees = new ListView("fees", getFeesList()) {
			// This method is called for each 'entry' in the list.
			@Override
			protected void populateItem(ListItem item) {
				FeeModel fee = (FeeModel) item.getModelObject();
				logger.debug("fee" + fee);
				item.add(new Label("description", fee.getDescr()));
				item.add(new Label("type", fee.getType()));
				item.add(new Label("capitalized", fee.getCapitalized()));
				item.add(new Label("taxable", fee.getTaxable()));
				item.add(new Label("amount", String.valueOf(fee.getAmount())));
			}
		};

		add(form);
		TextField descr = new TextField("descr");
		TextField amount = new TextField("amount");
		DropDownChoice type = new DropDownChoice("type", Arrays.asList(new String[]{"Registration","Documentation","Others","TaxItems"}));
		RadioChoice taxable = new RadioChoice("taxable");
		CheckBox capitalized = new CheckBox("capitalized");

		Button submitButton = new AjaxButton("submitButton"){
			@Override
			protected void onSubmit(AjaxRequestTarget target, Form form) {
				logger.debug("Ajax success: form: ",form);
				logger.debug("model object is"+form.getModelObject());
				getFeesList().add(form.getModelObject());
				target.addComponent(feesContainer);
			}
			@Override
			protected void onError(AjaxRequestTarget target, Form form) {
				logger.debug("in ajax error msg");
				super.onError(target, form);
			}
		};
		form.add(descr);
		form.add(amount);
		form.add(type);
		form.add(taxable);
		form.add(capitalized);
		form.add(submitButton);
		
		feesContainer = new WebMarkupContainer("feesContainer");
		feesContainer.setOutputMarkupId(true);
		feesContainer.add(fees);
		add(feesContainer);
		
		add(new Label("pageTitle", pageTitle));
	}
	
	private List feesList = new ArrayList();

	public List getFeesList() {
		return feesList;
	}

	public void setFeesList(List feesList) {
		this.feesList = feesList;
	}

}

FeeForm.java

public class FeeForm extends Form{
    private static final Logger log = LoggerFactory.getLogger(FeeForm.class);
    private static final long serialVersionUID = 1L;
    public FeeForm(String id, IModel model) {
        super(id,model);
    }
}

FeeModel.java

public class FeeModel implements Serializable{
	private String descr;
	private double amount;
	private String type ;
	private String taxable ;
	private String capitalized ;;
	// and getters and setters
}



Fee.html






Description:
Amount:
Type:
Taxable: Yes No
Capitalized:
submit


Current Fees are:
# 	Description 	Type 	Capitalized 	Taxable 	Amount
[3222] 	[Registration Fee] 	[Documentation] 	[No] 	[Yes] 	[$200.44]

Can anyone help me out?

Any pointers would be appriciated

-- 
Cheers,
VJ

Re: Help in ajax repainting of table

Posted by Timo Rantalaiho <Ti...@ri.fi>.
On Mon, 04 Feb 2008, Vijay Dharap wrote:
> I will work on this one angle. Late night for me now. Would get back to 
> you on this one tomorrow.
> 
> Btw.. where should i create the new FeeModel instance?

Well, in reality you would not typically use a new IModel
instance, but a new domain object or form bean instance 
inside the model. Your code is just a proof of concept /
test to see how you would make an appending list, right?

When you add the new object to the list, the object that
is being edited by the form should be a new object, right?

Best wishes,
Timo

-- 
Timo Rantalaiho           
Reaktor Innovations Oy    <URL: http://www.ri.fi/ >

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


Re: Help in ajax repainting of table

Posted by Vijay Dharap <vj...@gmail.com>.
Oh may be. This whole model concept is still not very clear to me.

I will work on this one angle. Late night for me now. Would get back to 
you on this one tomorrow.

Btw.. where should i create the new FeeModel instance?

Guys, *Thanks A Lot for all the replies!*

Its encouraging for nOOb like me.

Regards,
Vijay Dharap

Timo Rantalaiho wrote:
> On Sun, 03 Feb 2008, Vijay Dharap wrote:
>   
>> Can anyone help pinpoint what i am doing wrong?
>>     
>
> You never create a new FeeModel instance but just keep on 
> editing the same one and adding it to the list multiple
> times?
>
> Best wishes,
> Timo
>
>   


-- 
Cheers,
VJ

Re: Help in ajax repainting of table

Posted by Timo Rantalaiho <Ti...@ri.fi>.
On Sun, 03 Feb 2008, Vijay Dharap wrote:
> Can anyone help pinpoint what i am doing wrong?

You never create a new FeeModel instance but just keep on 
editing the same one and adding it to the list multiple
times?

Best wishes,
Timo

-- 
Timo Rantalaiho           
Reaktor Innovations Oy    <URL: http://www.ri.fi/ >

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


Re: Help in ajax repainting of table

Posted by Igor Vaynberg <ig...@gmail.com>.
create a new instance of page, why would you do that. it should simply
be something like:

onsubmit() { List list=getList(); Object object=getObject(); list.getObject(); }

if everything is wired properly the page should refresh and you should
see updated info.

-igor


On Feb 3, 2008 10:40 AM, Vijay Dharap <vj...@gmail.com> wrote:
> Hi Igor,
>
> If I use regular submit button and override the onsubmit of the feeForm
> and create a new page just to display the fee Listing page
> like below,
> protected void onSubmit() {
>         log.debug("form got submitted"+getModelObject());
>         ListFees listFees = new ListFees();
>         listFees.getFeesList().add(getModelObject());
>         setResponsePage(listFees);
>         super.onSubmit();
>     }
>
> Things work properly. by that i mean, I get table with one row
> showingthe contents which i had just entered in the form. I am still to
> fgure ut how to retrieve old list from the session so that entire table
> can be replicated in more than one submis.
>
> Regards,
> Vijay Dharap
>
>
> Igor Vaynberg wrote:
> > what happens if you change ajaxbutton to regular button? does the
> > update happen properly then?
> >
> > -igor
> >
> > On Feb 3, 2008 1:41 AM, Vijay Dharap <vj...@gmail.com> wrote:
> >
> >> Hi,
> >>
> >> I am fairly new to world of wicket. so my issue might be something very
> >> trivial.
> >> I am using a simple form to input some fields. and i want to update the
> >> table below in the same page with the newly entered info in the form
> >> above. Page should not refresh. table should be updated through AJAX.
> >>
> >> Looking at various examples, I could get my ajax part working. but. now
> >> when i enter details in the form above 2nd time, the refreshed table
> >> below replaces all the old entries same as latest entry.
> >> e.g. 1st time descr was "1sst time", when i try to submit page second
> >> time with description "2nd time" both rows of table now show "2nd time"
> >> as description.
> >>
> >> Can anyone help pinpoint what i am doing wrong?
> >>
> >> Here is the code that i tried.
> >> *Fee.java*
> >>
> >> public class Fee extends WebPage {
> >>         private static final Logger logger = LoggerFactory.getLogger(Fee.class);
> >>         private String pageTitle;
> >>         /** Container for the fees table, used to update the listview. */
> >>         private WebMarkupContainer feesContainer;
> >>         private ListView fees;
> >>         private FeeForm form;
> >>         public Fee() {
> >>                 super();
> >>                 FeeModel fee = new FeeModel();
> >>                 CompoundPropertyModel propertyModel = new CompoundPropertyModel(fee);
> >>                 form = new FeeForm("feeForm", propertyModel);
> >>                 pageTitle = "Add Fees and listing of Current Fees!";
> >>                 fees = new ListView("fees", getFeesList()) {
> >>                         // This method is called for each 'entry' in the list.
> >>                         @Override
> >>                         protected void populateItem(ListItem item) {
> >>                                 FeeModel fee = (FeeModel) item.getModelObject();
> >>                                 logger.debug("fee" + fee);
> >>                                 item.add(new Label("description", fee.getDescr()));
> >>                                 item.add(new Label("type", fee.getType()));
> >>                                 item.add(new Label("capitalized", fee.getCapitalized()));
> >>                                 item.add(new Label("taxable", fee.getTaxable()));
> >>                                 item.add(new Label("amount", String.valueOf(fee.getAmount())));
> >>                         }
> >>                 };
> >>
> >>                 add(form);
> >>                 TextField descr = new TextField("descr");
> >>                 TextField amount = new TextField("amount");
> >>                 DropDownChoice type = new DropDownChoice("type", Arrays.asList(new String[]{"Registration","Documentation","Others","TaxItems"}));
> >>                 RadioChoice taxable = new RadioChoice("taxable");
> >>                 CheckBox capitalized = new CheckBox("capitalized");
> >>
> >>                 Button submitButton = new AjaxButton("submitButton"){
> >>                         @Override
> >>                         protected void onSubmit(AjaxRequestTarget target, Form form) {
> >>                                 logger.debug("Ajax success: form: ",form);
> >>                                 logger.debug("model object is"+form.getModelObject());
> >>                                 getFeesList().add(form.getModelObject());
> >>                                 target.addComponent(feesContainer);
> >>                         }
> >>                         @Override
> >>                         protected void onError(AjaxRequestTarget target, Form form) {
> >>                                 logger.debug("in ajax error msg");
> >>                                 super.onError(target, form);
> >>                         }
> >>                 };
> >>                 form.add(descr);
> >>                 form.add(amount);
> >>                 form.add(type);
> >>                 form.add(taxable);
> >>                 form.add(capitalized);
> >>                 form.add(submitButton);
> >>
> >>                 feesContainer = new WebMarkupContainer("feesContainer");
> >>                 feesContainer.setOutputMarkupId(true);
> >>                 feesContainer.add(fees);
> >>                 add(feesContainer);
> >>
> >>                 add(new Label("pageTitle", pageTitle));
> >>         }
> >>
> >>         private List feesList = new ArrayList();
> >>
> >>         public List getFeesList() {
> >>                 return feesList;
> >>         }
> >>
> >>         public void setFeesList(List feesList) {
> >>                 this.feesList = feesList;
> >>         }
> >>
> >> }
> >>
> >> FeeForm.java
> >>
> >> public class FeeForm extends Form{
> >>     private static final Logger log = LoggerFactory.getLogger(FeeForm.class);
> >>     private static final long serialVersionUID = 1L;
> >>     public FeeForm(String id, IModel model) {
> >>         super(id,model);
> >>     }
> >> }
> >>
> >> FeeModel.java
> >>
> >> public class FeeModel implements Serializable{
> >>         private String descr;
> >>         private double amount;
> >>         private String type ;
> >>         private String taxable ;
> >>         private String capitalized ;;
> >>         // and getters and setters
> >> }
> >>
> >>
> >>
> >> Fee.html
> >>
> >>
> >>
> >>
> >>
> >>
> >> Description:
> >> Amount:
> >> Type:
> >> Taxable: Yes No
> >> Capitalized:
> >> submit
> >>
> >>
> >> Current Fees are:
> >> #       Description     Type    Capitalized     Taxable         Amount
> >> [3222]  [Registration Fee]      [Documentation]         [No]    [Yes]   [$200.44]
> >>
> >> Can anyone help me out?
> >>
> >> Any pointers would be appriciated
> >>
> >> --
> >> Cheers,
> >> VJ
> >>
> >>
> >
>
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
> >
>
>
> --
> Cheers,
> VJ
>

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


Re: Help in ajax repainting of table

Posted by Vijay Dharap <vj...@gmail.com>.
Hi Igor,

If I use regular submit button and override the onsubmit of the feeForm
and create a new page just to display the fee Listing page
like below,
protected void onSubmit() {
        log.debug("form got submitted"+getModelObject());
        ListFees listFees = new ListFees();
        listFees.getFeesList().add(getModelObject());
        setResponsePage(listFees);
        super.onSubmit();
    }

Things work properly. by that i mean, I get table with one row 
showingthe contents which i had just entered in the form. I am still to 
fgure ut how to retrieve old list from the session so that entire table 
can be replicated in more than one submis.

Regards,
Vijay Dharap

Igor Vaynberg wrote:
> what happens if you change ajaxbutton to regular button? does the
> update happen properly then?
>
> -igor
>
> On Feb 3, 2008 1:41 AM, Vijay Dharap <vj...@gmail.com> wrote:
>   
>> Hi,
>>
>> I am fairly new to world of wicket. so my issue might be something very
>> trivial.
>> I am using a simple form to input some fields. and i want to update the
>> table below in the same page with the newly entered info in the form
>> above. Page should not refresh. table should be updated through AJAX.
>>
>> Looking at various examples, I could get my ajax part working. but. now
>> when i enter details in the form above 2nd time, the refreshed table
>> below replaces all the old entries same as latest entry.
>> e.g. 1st time descr was "1sst time", when i try to submit page second
>> time with description "2nd time" both rows of table now show "2nd time"
>> as description.
>>
>> Can anyone help pinpoint what i am doing wrong?
>>
>> Here is the code that i tried.
>> *Fee.java*
>>
>> public class Fee extends WebPage {
>>         private static final Logger logger = LoggerFactory.getLogger(Fee.class);
>>         private String pageTitle;
>>         /** Container for the fees table, used to update the listview. */
>>         private WebMarkupContainer feesContainer;
>>         private ListView fees;
>>         private FeeForm form;
>>         public Fee() {
>>                 super();
>>                 FeeModel fee = new FeeModel();
>>                 CompoundPropertyModel propertyModel = new CompoundPropertyModel(fee);
>>                 form = new FeeForm("feeForm", propertyModel);
>>                 pageTitle = "Add Fees and listing of Current Fees!";
>>                 fees = new ListView("fees", getFeesList()) {
>>                         // This method is called for each 'entry' in the list.
>>                         @Override
>>                         protected void populateItem(ListItem item) {
>>                                 FeeModel fee = (FeeModel) item.getModelObject();
>>                                 logger.debug("fee" + fee);
>>                                 item.add(new Label("description", fee.getDescr()));
>>                                 item.add(new Label("type", fee.getType()));
>>                                 item.add(new Label("capitalized", fee.getCapitalized()));
>>                                 item.add(new Label("taxable", fee.getTaxable()));
>>                                 item.add(new Label("amount", String.valueOf(fee.getAmount())));
>>                         }
>>                 };
>>
>>                 add(form);
>>                 TextField descr = new TextField("descr");
>>                 TextField amount = new TextField("amount");
>>                 DropDownChoice type = new DropDownChoice("type", Arrays.asList(new String[]{"Registration","Documentation","Others","TaxItems"}));
>>                 RadioChoice taxable = new RadioChoice("taxable");
>>                 CheckBox capitalized = new CheckBox("capitalized");
>>
>>                 Button submitButton = new AjaxButton("submitButton"){
>>                         @Override
>>                         protected void onSubmit(AjaxRequestTarget target, Form form) {
>>                                 logger.debug("Ajax success: form: ",form);
>>                                 logger.debug("model object is"+form.getModelObject());
>>                                 getFeesList().add(form.getModelObject());
>>                                 target.addComponent(feesContainer);
>>                         }
>>                         @Override
>>                         protected void onError(AjaxRequestTarget target, Form form) {
>>                                 logger.debug("in ajax error msg");
>>                                 super.onError(target, form);
>>                         }
>>                 };
>>                 form.add(descr);
>>                 form.add(amount);
>>                 form.add(type);
>>                 form.add(taxable);
>>                 form.add(capitalized);
>>                 form.add(submitButton);
>>
>>                 feesContainer = new WebMarkupContainer("feesContainer");
>>                 feesContainer.setOutputMarkupId(true);
>>                 feesContainer.add(fees);
>>                 add(feesContainer);
>>
>>                 add(new Label("pageTitle", pageTitle));
>>         }
>>
>>         private List feesList = new ArrayList();
>>
>>         public List getFeesList() {
>>                 return feesList;
>>         }
>>
>>         public void setFeesList(List feesList) {
>>                 this.feesList = feesList;
>>         }
>>
>> }
>>
>> FeeForm.java
>>
>> public class FeeForm extends Form{
>>     private static final Logger log = LoggerFactory.getLogger(FeeForm.class);
>>     private static final long serialVersionUID = 1L;
>>     public FeeForm(String id, IModel model) {
>>         super(id,model);
>>     }
>> }
>>
>> FeeModel.java
>>
>> public class FeeModel implements Serializable{
>>         private String descr;
>>         private double amount;
>>         private String type ;
>>         private String taxable ;
>>         private String capitalized ;;
>>         // and getters and setters
>> }
>>
>>
>>
>> Fee.html
>>
>>
>>
>>
>>
>>
>> Description:
>> Amount:
>> Type:
>> Taxable: Yes No
>> Capitalized:
>> submit
>>
>>
>> Current Fees are:
>> #       Description     Type    Capitalized     Taxable         Amount
>> [3222]  [Registration Fee]      [Documentation]         [No]    [Yes]   [$200.44]
>>
>> Can anyone help me out?
>>
>> Any pointers would be appriciated
>>
>> --
>> Cheers,
>> VJ
>>
>>     
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
>   


-- 
Cheers,
VJ

Re: Help in ajax repainting of table

Posted by Igor Vaynberg <ig...@gmail.com>.
what happens if you change ajaxbutton to regular button? does the
update happen properly then?

-igor

On Feb 3, 2008 1:41 AM, Vijay Dharap <vj...@gmail.com> wrote:
> Hi,
>
> I am fairly new to world of wicket. so my issue might be something very
> trivial.
> I am using a simple form to input some fields. and i want to update the
> table below in the same page with the newly entered info in the form
> above. Page should not refresh. table should be updated through AJAX.
>
> Looking at various examples, I could get my ajax part working. but. now
> when i enter details in the form above 2nd time, the refreshed table
> below replaces all the old entries same as latest entry.
> e.g. 1st time descr was "1sst time", when i try to submit page second
> time with description "2nd time" both rows of table now show "2nd time"
> as description.
>
> Can anyone help pinpoint what i am doing wrong?
>
> Here is the code that i tried.
> *Fee.java*
>
> public class Fee extends WebPage {
>         private static final Logger logger = LoggerFactory.getLogger(Fee.class);
>         private String pageTitle;
>         /** Container for the fees table, used to update the listview. */
>         private WebMarkupContainer feesContainer;
>         private ListView fees;
>         private FeeForm form;
>         public Fee() {
>                 super();
>                 FeeModel fee = new FeeModel();
>                 CompoundPropertyModel propertyModel = new CompoundPropertyModel(fee);
>                 form = new FeeForm("feeForm", propertyModel);
>                 pageTitle = "Add Fees and listing of Current Fees!";
>                 fees = new ListView("fees", getFeesList()) {
>                         // This method is called for each 'entry' in the list.
>                         @Override
>                         protected void populateItem(ListItem item) {
>                                 FeeModel fee = (FeeModel) item.getModelObject();
>                                 logger.debug("fee" + fee);
>                                 item.add(new Label("description", fee.getDescr()));
>                                 item.add(new Label("type", fee.getType()));
>                                 item.add(new Label("capitalized", fee.getCapitalized()));
>                                 item.add(new Label("taxable", fee.getTaxable()));
>                                 item.add(new Label("amount", String.valueOf(fee.getAmount())));
>                         }
>                 };
>
>                 add(form);
>                 TextField descr = new TextField("descr");
>                 TextField amount = new TextField("amount");
>                 DropDownChoice type = new DropDownChoice("type", Arrays.asList(new String[]{"Registration","Documentation","Others","TaxItems"}));
>                 RadioChoice taxable = new RadioChoice("taxable");
>                 CheckBox capitalized = new CheckBox("capitalized");
>
>                 Button submitButton = new AjaxButton("submitButton"){
>                         @Override
>                         protected void onSubmit(AjaxRequestTarget target, Form form) {
>                                 logger.debug("Ajax success: form: ",form);
>                                 logger.debug("model object is"+form.getModelObject());
>                                 getFeesList().add(form.getModelObject());
>                                 target.addComponent(feesContainer);
>                         }
>                         @Override
>                         protected void onError(AjaxRequestTarget target, Form form) {
>                                 logger.debug("in ajax error msg");
>                                 super.onError(target, form);
>                         }
>                 };
>                 form.add(descr);
>                 form.add(amount);
>                 form.add(type);
>                 form.add(taxable);
>                 form.add(capitalized);
>                 form.add(submitButton);
>
>                 feesContainer = new WebMarkupContainer("feesContainer");
>                 feesContainer.setOutputMarkupId(true);
>                 feesContainer.add(fees);
>                 add(feesContainer);
>
>                 add(new Label("pageTitle", pageTitle));
>         }
>
>         private List feesList = new ArrayList();
>
>         public List getFeesList() {
>                 return feesList;
>         }
>
>         public void setFeesList(List feesList) {
>                 this.feesList = feesList;
>         }
>
> }
>
> FeeForm.java
>
> public class FeeForm extends Form{
>     private static final Logger log = LoggerFactory.getLogger(FeeForm.class);
>     private static final long serialVersionUID = 1L;
>     public FeeForm(String id, IModel model) {
>         super(id,model);
>     }
> }
>
> FeeModel.java
>
> public class FeeModel implements Serializable{
>         private String descr;
>         private double amount;
>         private String type ;
>         private String taxable ;
>         private String capitalized ;;
>         // and getters and setters
> }
>
>
>
> Fee.html
>
>
>
>
>
>
> Description:
> Amount:
> Type:
> Taxable: Yes No
> Capitalized:
> submit
>
>
> Current Fees are:
> #       Description     Type    Capitalized     Taxable         Amount
> [3222]  [Registration Fee]      [Documentation]         [No]    [Yes]   [$200.44]
>
> Can anyone help me out?
>
> Any pointers would be appriciated
>
> --
> Cheers,
> VJ
>

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


Re: Help in ajax repainting of table

Posted by Vijay Dharap <vj...@gmail.com>.
Ya version is 1.3
Ooops here is the html once again.
Fee.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title wicket:id="pageTitle">[Page Title]</title>
<style>
span.lable{
    text-align:right;
    width:200px;
    position:relative;
    float:left;
}
</style>
</head>
<body>
<form wicket:id="feeForm">
<div id="addFeeSection">
    <div>
        <span class="lable">Description: </span><input name="descr" 
type="text" wicket:id="descr" />
    </div>
    <div>
        <span class="lable">Amount: </span><input name="amount" 
type="text" wicket:id="amount" />
    </div>
    <div>
        <span class="lable">Type: </span><select 
wicket:id="type"><option>sample1</option><option>sample2</option><option>sample3</option></select>
    </div>
     <div>
        <span class="lable">Taxable: </span><input name="taxable" 
type="radio" wicket:id="taxable" value="yes" />Yes <input name="taxable" 
type="radio" value="no"/> No
    </div>
    <div>
        <span class="lable">Capitalized: </span><input 
name="capitalized" type="checkbox" wicket:id="capitalized" />
    </div>
    <div>
        <span class="lable"><button 
wicket:id="submitButton">submit</button></span>
    </div>
</div>
</form>
<div id="feeListingSection" wicket:id = "feesContainer" style="clear:both">
<span>Current Fees are:</span>
    <table border="1">
        <thead>
            <tr>
                <th>#</th>
                <th>Description</th>
                <th>Type</th>
                <th>Capitalized</th>
                <th>Taxable</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr wicket:id="fees">
                <td >[3222]</td>
                <td wicket:id="description">[Registration Fee]</td>
                <td wicket:id="type">[Documentation]</td>
                <td wicket:id="capitalized">[No]</td>
                <td wicket:id="taxable">[Yes]</td>
                <td wicket:id="amount">[$200.44]</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

Hope it will come through this time.

Regards,
Vijay Dharap

ma nrave wrote:
> Which version? I'm using 1.3.0 and keep running in similar issues :(It's as
> if the second submit happens twice? BTW, your html didn't come
> through
>
> On Feb 3, 2008 11:41 AM, Vijay Dharap <vj...@gmail.com> wrote:
>
>   
>> Hi,
>>
>> I am fairly new to world of wicket. so my issue might be something very
>> trivial.
>> I am using a simple form to input some fields. and i want to update the
>> table below in the same page with the newly entered info in the form
>> above. Page should not refresh. table should be updated through AJAX.
>>
>> Looking at various examples, I could get my ajax part working. but. now
>> when i enter details in the form above 2nd time, the refreshed table
>> below replaces all the old entries same as latest entry.
>> e.g. 1st time descr was "1sst time", when i try to submit page second
>> time with description "2nd time" both rows of table now show "2nd time"
>> as description.
>>
>> Can anyone help pinpoint what i am doing wrong?
>>
>> Here is the code that i tried.
>> *Fee.java*
>>
>> public class Fee extends WebPage {
>>        private static final Logger logger = LoggerFactory.getLogger(
>> Fee.class);
>>        private String pageTitle;
>>        /** Container for the fees table, used to update the listview. */
>>        private WebMarkupContainer feesContainer;
>>        private ListView fees;
>>        private FeeForm form;
>>        public Fee() {
>>                super();
>>                FeeModel fee = new FeeModel();
>>                CompoundPropertyModel propertyModel = new
>> CompoundPropertyModel(fee);
>>                form = new FeeForm("feeForm", propertyModel);
>>                pageTitle = "Add Fees and listing of Current Fees!";
>>                fees = new ListView("fees", getFeesList()) {
>>                        // This method is called for each 'entry' in the
>> list.
>>                        @Override
>>                        protected void populateItem(ListItem item) {
>>                                FeeModel fee = (FeeModel)
>> item.getModelObject();
>>                                logger.debug("fee" + fee);
>>                                item.add(new Label("description",
>> fee.getDescr()));
>>                                item.add(new Label("type", fee.getType()));
>>                                item.add(new Label("capitalized",
>> fee.getCapitalized()));
>>                                item.add(new Label("taxable",
>> fee.getTaxable()));
>>                                item.add(new Label("amount", String.valueOf
>> (fee.getAmount())));
>>                        }
>>                };
>>
>>                add(form);
>>                TextField descr = new TextField("descr");
>>                TextField amount = new TextField("amount");
>>                DropDownChoice type = new DropDownChoice("type",
>> Arrays.asList(new
>> String[]{"Registration","Documentation","Others","TaxItems"}));
>>                RadioChoice taxable = new RadioChoice("taxable");
>>                CheckBox capitalized = new CheckBox("capitalized");
>>
>>                Button submitButton = new AjaxButton("submitButton"){
>>                        @Override
>>                        protected void onSubmit(AjaxRequestTarget target,
>> Form form) {
>>                                logger.debug("Ajax success: form: ",form);
>>                                logger.debug("model object
>> is"+form.getModelObject());
>>                                getFeesList().add(form.getModelObject());
>>                                target.addComponent(feesContainer);
>>                        }
>>                        @Override
>>                        protected void onError(AjaxRequestTarget target,
>> Form form) {
>>                                logger.debug("in ajax error msg");
>>                                super.onError(target, form);
>>                        }
>>                };
>>                form.add(descr);
>>                form.add(amount);
>>                form.add(type);
>>                form.add(taxable);
>>                form.add(capitalized);
>>                form.add(submitButton);
>>
>>                feesContainer = new WebMarkupContainer("feesContainer");
>>                feesContainer.setOutputMarkupId(true);
>>                feesContainer.add(fees);
>>                add(feesContainer);
>>
>>                add(new Label("pageTitle", pageTitle));
>>        }
>>
>>        private List feesList = new ArrayList();
>>
>>        public List getFeesList() {
>>                return feesList;
>>        }
>>
>>        public void setFeesList(List feesList) {
>>                this.feesList = feesList;
>>        }
>>
>> }
>>
>> FeeForm.java
>>
>> public class FeeForm extends Form{
>>    private static final Logger log = LoggerFactory.getLogger(FeeForm.class
>> );
>>    private static final long serialVersionUID = 1L;
>>    public FeeForm(String id, IModel model) {
>>        super(id,model);
>>    }
>> }
>>
>> FeeModel.java
>>
>> public class FeeModel implements Serializable{
>>        private String descr;
>>        private double amount;
>>        private String type ;
>>        private String taxable ;
>>        private String capitalized ;;
>>        // and getters and setters
>> }
>>
>>
>>
>> Fee.html
>>
>>
>>
>>
>>
>>
>> Description:
>> Amount:
>> Type:
>> Taxable: Yes No
>> Capitalized:
>> submit
>>
>>
>> Current Fees are:
>> #       Description     Type    Capitalized     Taxable         Amount
>> [3222]  [Registration Fee]      [Documentation]         [No]    [Yes]
>> [$200.44]
>>
>> Can anyone help me out?
>>
>> Any pointers would be appriciated
>>
>> --
>> Cheers,
>> VJ
>>
>>     
>
>   


-- 
Cheers,
VJ

Re: Help in ajax repainting of table

Posted by ma nrave <ma...@gmail.com>.
Which version? I'm using 1.3.0 and keep running in similar issues :(It's as
if the second submit happens twice? BTW, your html didn't come
through

On Feb 3, 2008 11:41 AM, Vijay Dharap <vj...@gmail.com> wrote:

> Hi,
>
> I am fairly new to world of wicket. so my issue might be something very
> trivial.
> I am using a simple form to input some fields. and i want to update the
> table below in the same page with the newly entered info in the form
> above. Page should not refresh. table should be updated through AJAX.
>
> Looking at various examples, I could get my ajax part working. but. now
> when i enter details in the form above 2nd time, the refreshed table
> below replaces all the old entries same as latest entry.
> e.g. 1st time descr was "1sst time", when i try to submit page second
> time with description "2nd time" both rows of table now show "2nd time"
> as description.
>
> Can anyone help pinpoint what i am doing wrong?
>
> Here is the code that i tried.
> *Fee.java*
>
> public class Fee extends WebPage {
>        private static final Logger logger = LoggerFactory.getLogger(
> Fee.class);
>        private String pageTitle;
>        /** Container for the fees table, used to update the listview. */
>        private WebMarkupContainer feesContainer;
>        private ListView fees;
>        private FeeForm form;
>        public Fee() {
>                super();
>                FeeModel fee = new FeeModel();
>                CompoundPropertyModel propertyModel = new
> CompoundPropertyModel(fee);
>                form = new FeeForm("feeForm", propertyModel);
>                pageTitle = "Add Fees and listing of Current Fees!";
>                fees = new ListView("fees", getFeesList()) {
>                        // This method is called for each 'entry' in the
> list.
>                        @Override
>                        protected void populateItem(ListItem item) {
>                                FeeModel fee = (FeeModel)
> item.getModelObject();
>                                logger.debug("fee" + fee);
>                                item.add(new Label("description",
> fee.getDescr()));
>                                item.add(new Label("type", fee.getType()));
>                                item.add(new Label("capitalized",
> fee.getCapitalized()));
>                                item.add(new Label("taxable",
> fee.getTaxable()));
>                                item.add(new Label("amount", String.valueOf
> (fee.getAmount())));
>                        }
>                };
>
>                add(form);
>                TextField descr = new TextField("descr");
>                TextField amount = new TextField("amount");
>                DropDownChoice type = new DropDownChoice("type",
> Arrays.asList(new
> String[]{"Registration","Documentation","Others","TaxItems"}));
>                RadioChoice taxable = new RadioChoice("taxable");
>                CheckBox capitalized = new CheckBox("capitalized");
>
>                Button submitButton = new AjaxButton("submitButton"){
>                        @Override
>                        protected void onSubmit(AjaxRequestTarget target,
> Form form) {
>                                logger.debug("Ajax success: form: ",form);
>                                logger.debug("model object
> is"+form.getModelObject());
>                                getFeesList().add(form.getModelObject());
>                                target.addComponent(feesContainer);
>                        }
>                        @Override
>                        protected void onError(AjaxRequestTarget target,
> Form form) {
>                                logger.debug("in ajax error msg");
>                                super.onError(target, form);
>                        }
>                };
>                form.add(descr);
>                form.add(amount);
>                form.add(type);
>                form.add(taxable);
>                form.add(capitalized);
>                form.add(submitButton);
>
>                feesContainer = new WebMarkupContainer("feesContainer");
>                feesContainer.setOutputMarkupId(true);
>                feesContainer.add(fees);
>                add(feesContainer);
>
>                add(new Label("pageTitle", pageTitle));
>        }
>
>        private List feesList = new ArrayList();
>
>        public List getFeesList() {
>                return feesList;
>        }
>
>        public void setFeesList(List feesList) {
>                this.feesList = feesList;
>        }
>
> }
>
> FeeForm.java
>
> public class FeeForm extends Form{
>    private static final Logger log = LoggerFactory.getLogger(FeeForm.class
> );
>    private static final long serialVersionUID = 1L;
>    public FeeForm(String id, IModel model) {
>        super(id,model);
>    }
> }
>
> FeeModel.java
>
> public class FeeModel implements Serializable{
>        private String descr;
>        private double amount;
>        private String type ;
>        private String taxable ;
>        private String capitalized ;;
>        // and getters and setters
> }
>
>
>
> Fee.html
>
>
>
>
>
>
> Description:
> Amount:
> Type:
> Taxable: Yes No
> Capitalized:
> submit
>
>
> Current Fees are:
> #       Description     Type    Capitalized     Taxable         Amount
> [3222]  [Registration Fee]      [Documentation]         [No]    [Yes]
> [$200.44]
>
> Can anyone help me out?
>
> Any pointers would be appriciated
>
> --
> Cheers,
> VJ
>