Re: Fighting with Ajax Modal Dialogs et.al.
Re: Fighting with Ajax Modal Dialogs et.al.
- Subject: Re: Fighting with Ajax Modal Dialogs et.al.
- From: Samuel Pelletier <email@hidden>
- Date: Tue, 12 Dec 2017 07:32:12 -0500
Markus,
I have a very similar implementation is an app where a new user is added by
selecting a contact.
In my UsagerList component where I have the new user function I have this in my
html file:
<wo:AjaxModalDialog label = "$localizer.UsagerList.button.ajouterUsager" width
= "800" title = "$localizer.UsagerList.button.ajouterUsager" class = "tiny
button" style = "margin-bottom:0;">
<wo:ContactSelector selectedContact = "$selectedContact" selectAction =
"$addUsager"/>
</wo:AjaxModalDialog>
....
<wo:AjaxModalDialogOpener class="tiny button" title = "Édition d'un usager"
action = "$editItem" dialogId = "usagerEditor"
>Éditer</wo:AjaxModalDialogOpener>
The add button open the modal that display my ContactSelector component with 2
bindings. The selectedContact will contain the selected contact (an object of
my Contact entity) and the selectAction will be performed upon selection.
In my UsagerList java class, I have a public WOActionResults addUsager()
method that create or edit a user for this contact in a modal dialog. In your
case, just put the value in the desired attribute of your edited object and
close the displayed modal dialog by calling AjaxModalDialog.close(context());
For your situation, I would add the to the closeUpdateContainerID = "editor"
AjaxModalDialog bindings to refresh the form and show the selection to the user.
public WOActionResults addUsager() {
EOEditingContext ec = ERXEC.newEditingContext();
Usager usager = Usager.fetchUsager(ec,
Usager.CONTACT.eq(selectedContact().localInstanceIn(ec)));
if (usager != null) {
setEditedItem(usager);
AjaxModalDialog.open(context(), "usagerEditor",
localizer().localizedStringForKeyWithDefault("UsagerList.text.editerUsager"));
}
else {
Usager newUsager = Usager.createUsager(ec);
newUsager.setContact(newUsager.localInstanceOf(selectedContact()));
newUsager.setUserName(selectedContact().email());
setEditedItem(newUsager);
AjaxModalDialog.open(context(), "usagerEditor");
}
return null;
}
The ContactSelector component needs to be non synchronizing, either by
extending ERXNonSynchronizingComponent or by overriding the
synchronizesVariablesWithBindings method.
Here is the selectContact method in ContactSelector:
public WOActionResults selectContact() {
EOEditingContext ec = (EOEditingContext)
valueForBinding(EditingContextBindingName);
if (ec == null) {
setValueForBinding(item(), SelectedContactBindingName);
}
else {
setValueForBinding(item().localInstanceIn(ec),
SelectedContactBindingName);
}
return (WOActionResults) valueForBinding(SelectActionBindingName);
}
Samuel
> Le 12 déc. 2017 à 05:59, Markus Ruggiero <email@hidden> a écrit :
>
> Hi Samuel,
>
> thanks for your help, but there are some things still not clear.
>
> I have that WOTextField I want to populate. Next to the text field I need a
> clickable element (link, button, whatever) that the user user can use to call
> up an overlay modal dialog. This dialog gets a list of addresss from the
> database. The user can then click one of the addresses (a link or a button)
> to pick the one he needs. This selection action should close the dialog and
> put the selected address string into the text field.
>
> I already have a component that retrieves the possible addresses and lists
> them in tabular form. It also shows a [pick this] link.
>
> That's as far as I got. Currently the dialog opener displays the "Select
> Address" link (should eventually replace the Address Index button. What do I
> do in that yellow component when the user clicks one of the select buttons?
> And how can I pass values to the ShippingAddressSelection component? It ought
> to know the object being edited on the main form, but it is called up by the
> componentName binding on the dialog, no way to bind anything.
>
> I must miss something very simple. The Ajax Examples are not of help here (or
> I just don't get it), as they show some things but actually do not give an
> answer to a "how do I do this..." type of question.
>
> Thanks for bearing with me.
> ---markus---
>
> addressSelectionDialogOpener : AjaxModalDialogOpener {
> dialogId = "selectAddressDialog";
> linkTitle = "Select Address";
> label = "Select Address";
> }
>
> selectAddressDialog : AjaxModalDialog {
> pageName = "ShippingAddressSelection";
> id = "selectAddressDialog";
> title = "Select Shipping Address";
> centerVertically = true;
> locked = true;
> width = 630;
> height = 320;
> overlayOpacity = "0.5";
> overlayDuration = "0.1";
> slideDownDuration = "0.1";
> slideUpDuration = "0.1";
> closeUpdateContainerID = "shippingAddressUpdateContainer";
> }
>
>
> <addresspanel.jpeg>
>> On 11 Dec 2017, at 21:59, Samuel Pelletier <email@hidden
>> <mailto:email@hidden>> wrote:
>>
>> Hi Markus,
>>
>> If I understand your requirement correctly, you want a modal that allows
>> selecting some value(s) for a form field and want the selection be visible
>> in the displayed form after the modal close.
>>
>> The trick is to define an AjaxUpdateContainer around the zone to be updated
>> after the modal close. If you use AjaxObserveFields on your form, you can
>> have a large section refreshed safely.
>>
>> You also need to define the AjaxModalDialog with it's id and add the
>> closeUpdateContainerID binding to specify the AjaxUpdateContainer to update
>> when the dialog close.
>>
>> <wo:AjaxModalDialog closeUpdateContainerID = "formContainerId" id =
>> "selectValueDialogId" ...
>>
>> And lastly, put the link to open the dialog on your form...
>> <wo:AjaxModalDialogOpener dialogId = "selectValueDialogId" class = "tiny
>> button" label = "$localizer.button.selectionner"/>
>>
>>
>> Samuel
>>
>>
>>
>>> Le 11 déc. 2017 à 11:41, Markus Ruggiero <email@hidden
>>> <mailto:email@hidden>> a écrit :
>>>
>>> it always the same ... not using these things often results in utter
>>> confusion when finally I need to do this.
>>>
>>> I have a standard page with a large form.
>>> On that page there is a text field that the user can ...
>>> - enter an value directly
>>> - depending on previously made selections further up in the form the
>>> value is already set and cannot be changed
>>> - depending on previously made selections further up in the form there
>>> is a button/link next to the text field that should open a modal dialog
>>> with a list of strings to pick from (the field is not editable direcly).
>>> My problem is that 3rd option.
>>>
>>> I already have a small component that loads the available strings from the
>>> database and shows them in a table. The user can then click a [pick this] -
>>> hyperlink next to an entry (or close the selection box without picking
>>> anything. The picked
>>> value should be put into the text field.
>>>
>>> I succeeded partially with the help of the Ajax Examples. Tried
>>> AjaxModalDialog as well as AjaxModalUpdate. I can show a dialog with both
>>> elements and the correct data, but from there? ..... I am lost.
>>>
>>> Which one to use, AjaxModalDialog or AjaxModalUpdate?
>>> How do I get the selected String back / put it into the underlying
>>> object-to-be-edited, update the display and close the dialog.
>>>
>>> Can anyone provide me with a simple example?
>>>
>>> Thanks a lot
>>> ---markus---
>>>
>>>
>>> _______________________________________________
>>> Do not post admin requests to the list. They will be ignored.
>>> Webobjects-dev mailing list (email@hidden
>>> <mailto:email@hidden>)
>>> Help/Unsubscribe/Update your Subscription:
>>>
>>> This email sent to email@hidden <mailto:email@hidden>
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden