DropDownChoice selection won't update form fields

classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

DropDownChoice selection won't update form fields

oggie
I have a dropdownchoice populated from a database call. When a user selects an item from the drop down, I want to load the values of the drop down object into the form.

I can't seem to be able to just get the form to reload with the chosen object. But I can change the form fields individually by setting the model on each text field.

If I do : id.setModel(new PropertyModel(chosenConfigType, "configTypeId"));  It works. I was hoping that I wouldn't have to modify the model for each field.  If I populate the configType field in the beginning (with 9) it works and is displayed on page load. I would like to avoid this since I'm going to have other pages with larger forms.

CommonBO is just a business object that has the business rules in it and makes calls to the DAO objects to get the DTO objects.

The ConfigTypeDTO is just a POJO.

public final class ConfigTypePage extends BasePage {

    // @Autowired
    @SpringBean(name = "commonBO")
    CommonBO commonBO;
    ConfigTypeDTO configType;
    List<ConfigTypeDTO> configTypes;
    Form form;
    TextField id;

    public ConfigTypePage() {
        super();
        configType = new ConfigTypeDTO();
        //just added for testing
        configType.setConfigTypeId(9);
        configType.setConfigTypeName("nine");
        configType.setConfigTypeDescription("This is number 9");
        configTypes = commonBO.getConfigTypes();

        DropDownChoice<ConfigTypeDTO> configTypeDropDownChoice =
                new DropDownChoice<>("configTypes", new Model<ConfigTypeDTO>(), configTypes,
                new ChoiceRenderer<ConfigTypeDTO>("configTypeId"));
         configTypeDropDownChoice.add(new AjaxFormComponentUpdatingBehavior("onchange") {
            @Override
            protected void onUpdate(AjaxRequestTarget target) {
               ConfigTypeDTO chosenConfigType = (ConfigTypeDTO) this.getComponent().getDefaultModelObject();
               configType = chosenConfigType;
               form.setModel(new Model(configType));
               id.setModel(new PropertyModel(chosenConfigType, "configTypeId"));
               target.add(form);
      }
    });
        configTypeDropDownChoice.setNullValid(false);
        add(configTypeDropDownChoice);

        buildForm();

        // FeedbackPanel
        final FeedbackPanel feedback = new FeedbackPanel("feedback");
        feedback.setOutputMarkupId(true);
        form.add(feedback);

        // Textfield for the ID
        id = new TextField("id", new PropertyModel(configType, "configTypeId"));
        id.setOutputMarkupId(true);
        id.setRequired(false);
        id.setEnabled(false);
        form.add(id);

        Label idLabel = new Label("idLabel", new ResourceModel("id.label"));
        form.add(idLabel);

        // Textfield for entering a name
        TextField name = new TextField("name", new PropertyModel(configType, "configTypeName"));
        name.setOutputMarkupId(true);
        name.setRequired(true);
        form.add(name);

        Label nameLabel = new Label("nameLabel", new ResourceModel("name.label"));
        form.add(nameLabel);

        // Textfield for entering a description
        TextField description = new TextField("description", new PropertyModel(configType, "configTypeDescription"));
        description.setOutputMarkupId(true);
        description.setRequired(true);
        form.add(description);

        Label descLabel = new Label("descLabel", new ResourceModel("desc.label"));
        form.add(descLabel);

        // Add the Save button
        form.add(new Button("saveButton", new ResourceModel("save.button")));

        add(form);
    }

    void buildForm() {
        form = new Form("form", new Model(configType)){
            protected void onSubmit() {
                //save the data
                ConfigTypeDTO current = (ConfigTypeDTO) this.getModelObject();
                current.setUpdateTime(Calendar.getInstance().getTime());
                current.setUpdateBy("OSS UI");
                if (current.getConfigTypeId() == null || current.getConfigTypeId() == 0) {
                    current.setInsertTime(Calendar.getInstance().getTime());
                    current.setInsertBy("OSS UI");
                }
                commonBO.addConfigType(current);
            }
        };
        form.setOutputMarkupId(true);
    }
}
Reply | Threaded
Open this post in threaded view
|

Re: DropDownChoice selection won't update form fields

oggie
Also, the drop down is not part of the form. Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"
      xml:lang="en"
      lang="en">
    <head>
        <wicket:head>
            <title>Wicket Example</title>
        </wicket:head>
    </head>
    <body>
        <wicket:extend>
            <h1><wicket:message key="hello">Text that will be replaced.</wicket:message></h1>
            <select name="configTypes" wicket:id="configTypes"></select>

            <form wicket:id="form">
                <div wicket:id="feedback"></div>
                <table>
                    <tr>
                        <td valign="top">
                            <label for="id" wicket:id="idLabel">ID:</label>
                        </td>
                        <td>
                            <input type="text" id="id" wicket:id="id"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <label for="name" wicket:id="nameLabel">Enter the name:</label>
                        </td>
                        <td>
                            <input type="text" id="name" wicket:id="name"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <label for="description" wicket:id="descLabel">Enter the description:</label>
                        </td>
                        <td>
                            <input type="text" id="description" wicket:id="description"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="Save" wicket:id="saveButton"/>
                        </td>
                    </tr>
                </table>
            </form>


        </wicket:extend>
    </body>
</html>
Reply | Threaded
Open this post in threaded view
|

Re: DropDownChoice selection won't update form fields

Andrea Del Bene-2
Hi,

you can clean up your page using a CompundPropertyModel for your form
and a Model for dropDownChoice.  I would make a chain of models passing
Model to CompoundPropertyModel:

model = new Model(configType);//for dropDownChoice
CompoundPropertyModel cpm = new CompoundPropertyModel(model) //for form

Then change the id of your FormComponents in accordance with the name of
the field they should read/write. In this way you don't need the code
inside onUpdate, just leave 'target.add(form);'

> Also, the drop down is not part of the form. Here's the HTML:
>
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/DropDownChoice-selection-won-t-update-form-fields-tp4413980p4414035.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: DropDownChoice selection won't update form fields

oggie
This post was updated on .
That worked. Thanks!

The only downside is that the wicket plugin for netbeans is throwing a bunch of errors at me due to the way it's now set up.

It's saying that everything I add to the form is a child in Java and not in HTML, or it's named wrong.
Examples:
For the dropdown, when I do
add(configTypeDropDownChoice)
 it says :
DIFFERENT_IDS: "form" in HTML / "configTypes" in Java
For the labels, when I do a
form.add(descLabel)
 it says
JAVA_NODE_ADDED:"descLabel" is a child in Java and not in HTML

It all works, but these messages in the IDE are annoying.
Reply | Threaded
Open this post in threaded view
|

Re: DropDownChoice selection won't update form fields

oggie
This post was updated on .
I jumped the gun on that one. It sort of worked.

The form fields get updated, but the reset button messes it up. I've tried a few things with the model for it and other options. Once I hit the reset, it no longer works.

Here's the code:
public final class ConfigTypePage extends BasePage {

    @SpringBean(name = "commonBO")
    CommonBO commonBO;
    ConfigTypeDTO configType;
    List<ConfigTypeDTO> configTypes;
    Form form;
    TextField id;
    TextField name;
    TextField description;

    public ConfigTypePage() {
        super();
        configType = new ConfigTypeDTO();
        //just added for testing
        configType.setConfigTypeId(9);
        configType.setConfigTypeName("nine");
        configType.setConfigTypeDescription("This is number 9");
        configTypes = commonBO.getConfigTypes();

        Model model = new Model(configType);
        CompoundPropertyModel configTypeModel = new CompoundPropertyModel(model);

        form = new Form("form", configTypeModel){
            protected void onSubmit() {
                //save the data
                ConfigTypeDTO current = (ConfigTypeDTO) this.getModelObject();
                current.setUpdateTime(Calendar.getInstance().getTime());
                current.setUpdateBy("OSS UI");
                if (current.getConfigTypeId() == null || current.getConfigTypeId() == 0) {
                    current.setInsertTime(Calendar.getInstance().getTime());
                    current.setInsertBy("OSS UI");
                }
                commonBO.addConfigType(current);
            }
        };
        form.setOutputMarkupId(true);

        DropDownChoice<ConfigTypeDTO> configTypeDropDownChoice =
                new DropDownChoice<>("configTypes", model, configTypes,
                new ChoiceRenderer<ConfigTypeDTO>("configTypeId"));
         configTypeDropDownChoice.add(new AjaxFormComponentUpdatingBehavior("onchange") {
            @Override
            protected void onUpdate(AjaxRequestTarget target) {
               target.add(form);
      }
    });
        configTypeDropDownChoice.setNullValid(false);
        add(configTypeDropDownChoice);

        // FeedbackPanel
        final FeedbackPanel feedback = new FeedbackPanel("feedback");
        feedback.setOutputMarkupId(true);
        form.add(feedback);

        // Textfield for the ID
        id = new TextField("configTypeId");
        id.setOutputMarkupId(true);
        id.setRequired(false);
        id.setEnabled(false);
        form.add(id);

        Label idLabel = new Label("idLabel", new ResourceModel("id.label"));
        form.add(idLabel);

        // Textfield for entering a name
        name = new TextField("configTypeName");
        name.setOutputMarkupId(true);
        name.setRequired(true);
        form.add(name);

        Label nameLabel = new Label("nameLabel", new ResourceModel("name.label"));
        form.add(nameLabel);

        // Textfield for entering a description
        description = new TextField("configTypeDescription");
        description.setOutputMarkupId(true);
        description.setRequired(true);
        form.add(description);

        Label descLabel = new Label("descLabel", new ResourceModel("desc.label"));
        form.add(descLabel);

        // Add the Save button
        form.add(new Button("saveButton", new ResourceModel("save.button")));
        //add the reset button
        Button resetButton = new Button("resetButton", new ResourceModel("reset.button")){
         @Override
            public void onSubmit() {
             form.modelChanging();
             configType = new ConfigTypeDTO();
               id.setModel(new PropertyModel(configType, "configTypeId"));
               name.setModel(new PropertyModel(configType, "configTypeName"));
               description.setModel(new PropertyModel(configType, "configTypeDescription"));
               form.setModel(new Model(configType));
               form.modelChanged();
               form.clearInput();
            }
        };
        resetButton.setDefaultFormProcessing(false);

        form.add(resetButton);
        add(form);
    }
}
Reply | Threaded
Open this post in threaded view
|

Re: DropDownChoice selection won't update form fields

Andrea Del Bene-3
Maybe the problem is with resetButton. The code inside onSubmit breaks
the model chain. If you want to reset form's field try just with

form.setModelObject(new ConfigTypeDTO());

> I jumped the gun on that one. It didn't work.
>
> I was still calling the old page from my menu. Once I fixed that and I am
> now calling a new page with your suggestions, the form objects never get
> updated. Here's the code:
>
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/DropDownChoice-selection-won-t-update-form-fields-tp4413980p4414709.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: DropDownChoice selection won't update form fields

oggie
Once again, you make it simpler than I thought it would be. Thanks again.

Finally, how do I reset the form from the onSubmit button of the form? I tried this:
form = new Form("form", configTypeModel){
            protected void onSubmit() {
                //save the data
                ConfigTypeDTO current = (ConfigTypeDTO) this.getModelObject();
                current.setUpdateTime(Calendar.getInstance().getTime());
                current.setUpdateBy("OSS UI");
                if (current.getConfigTypeId() == null || current.getConfigTypeId() == 0) {
                    current.setInsertTime(Calendar.getInstance().getTime());
                    current.setInsertBy("OSS UI");
                }
                commonBO.addConfigType(current);
                configTypes = commonBO.getConfigTypes();
                configTypeDropDownChoice.setChoices(configTypes);
                configType = new ConfigTypeDTO();
                form.modelChanging();
                form.setModelObject(configType);
                form.modelChanged();
            }
        };

But it doesn't work. The form never gets reset. I'm able to get the updated list from the DB and repopulate the list. And the list is updated on the page. But the form isn't.
Reply | Threaded
Open this post in threaded view
|

Re: DropDownChoice selection won't update form fields

Andrea Del Bene-3
This is strange. Can you post the code of the full page?

> Once again, you make it simpler than I thought it would be. Thanks again.
>
> Finally, how do I reset the form from the onSubmit button of the form? I
> tried this:
>
>
> But it doesn't work. The form never gets reset. I'm able to get the updated
> list from the DB and repopulate the list. And the list is updated on the
> page. But the form isn't.
>
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/DropDownChoice-selection-won-t-update-form-fields-tp4413980p4415082.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: DropDownChoice selection won't update form fields

oggie
I got it working, but I'm not sure if the way I did it is correct. Here's the final code:

public final class ConfigTypePage extends BasePage {

    @SpringBean(name = "commonBO")
    CommonBO commonBO;
    ConfigTypeDTO configType;
    List<ConfigTypeDTO> configTypes;
    Form form;
    DropDownChoice<ConfigTypeDTO> configTypeDropDownChoice;

    public ConfigTypePage() {
        super();
        configType = new ConfigTypeDTO();
        configTypes = commonBO.getConfigTypes();

        Model model = new Model(configType);
        final CompoundPropertyModel configTypeModel = new CompoundPropertyModel(model);

        form = new Form("form", configTypeModel){
            protected void onSubmit() {
                //save the data
                boolean newRecord = false;
                ConfigTypeDTO current = (ConfigTypeDTO) this.getModelObject();
                if (current.getConfigTypeId() == null || current.getConfigTypeId() == 0) {
                    newRecord = true;
                }
                current.setUpdateTime(Calendar.getInstance().getTime());
                current.setUpdateBy("OSS UI");
                if (current.getConfigTypeId() == null || current.getConfigTypeId() == 0) {
                    current.setInsertTime(Calendar.getInstance().getTime());
                    current.setInsertBy("OSS UI");
                }
                ConfigTypeDTO newDTO = commonBO.addConfigType(current);
                //if it's an update, we need to replace the old one in the list with the
                //updated one from the database
                if (!newRecord) {
                    configTypes.remove(current);
                }
                configTypes.add(newDTO);
                configTypeDropDownChoice.setChoices(configTypes);
                configType = new ConfigTypeDTO();
                form.modelChanging();
                configTypeModel.setObject(configType);
                form.modelChanged();
            }
        };
        form.setOutputMarkupId(true);

        configTypeDropDownChoice =
                new DropDownChoice<>("configTypes", model, configTypes,
                new ChoiceRenderer<ConfigTypeDTO>("configTypeName"));
         configTypeDropDownChoice.add(new AjaxFormComponentUpdatingBehavior("onchange") {
            @Override
            protected void onUpdate(AjaxRequestTarget target) {
               target.add(form);
      }
    });
        configTypeDropDownChoice.setNullValid(false);
        add(configTypeDropDownChoice);

        // FeedbackPanel
        final FeedbackPanel feedback = new FeedbackPanel("feedback");
        feedback.setOutputMarkupId(true);
        form.add(feedback);

        // Textfield for the ID
        TextField id = new TextField("configTypeId");
        id.setOutputMarkupId(true);
        id.setRequired(false);
        id.setEnabled(false);
        form.add(id);

        Label idLabel = new Label("idLabel", new ResourceModel("id.label"));
        form.add(idLabel);

        // Textfield for entering a name
        TextField name = new TextField("configTypeName");
        name.setOutputMarkupId(true);
        name.setRequired(true);
        form.add(name);

        Label nameLabel = new Label("nameLabel", new ResourceModel("name.label"));
        form.add(nameLabel);

        // Textfield for entering a description
        TextField description = new TextField("configTypeDescription");
        description.setOutputMarkupId(true);
        description.setRequired(true);
        form.add(description);

        Label descLabel = new Label("descLabel", new ResourceModel("desc.label"));
        form.add(descLabel);

        // Add the Save button
        form.add(new Button("saveButton", new ResourceModel("save.button")));
        //add the reset button
        Button resetButton = new Button("resetButton", new ResourceModel("reset.button")){
         @Override
            public void onSubmit() {
             configType = new ConfigTypeDTO();
             form.setModelObject(configType);
            }
        };
        resetButton.setDefaultFormProcessing(false);
        form.add(resetButton);
        add(form);
    }
}
Reply | Threaded
Open this post in threaded view
|

Re: DropDownChoice selection won't update form fields

Andrea Del Bene-3
Well, if it does its job I think it should be ok :)

> I got it working, but I'm not sure if the way I did it is correct. Here's the
> final code:
>
>
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/DropDownChoice-selection-won-t-update-form-fields-tp4413980p4417640.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]