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: Theodore Petrosky <email@hidden>
- Date: Tue, 12 Dec 2017 12:34:06 -0500
Before doing that, have you looked at AjaxExample and AjaxExample2 in the
examples folder of Wonder. I thought the different versions of modal dialogs
were shown there.
Ted
> On Dec 12, 2017, at 12:22 PM, Markus Ruggiero <email@hidden>
> wrote:
>
> Samuel,
>
> can you imagine? I am even more confused right now because I think I
> understand what you're telling me --- but then I am not able to make sense of
> it and adapt it to my problem.
>
> Can you/someone else create a minimalistic complete demo that shows exactly
> how to do the following:
>
> in html:
>
> <... wo form ... >
> .....
> <webobject name = "shippingAddressTextfield" /> [button or link here to open
> a modal dialog]
> ....
> <... end wo form ... >
>
>
> in wod:
> shippingAddressTextfield : WOTextField { value = currentObject.address; }
>
>
> The modal dialog shows a tablular list of ShippingAddresses, each
> ShippingAddress has additional fields to help the user pick the right one.
> There is a button or link besides each row to pick that particular one.
> The contents of the dialog should preferably be generated by a separate
> component, but I can also do it right inside the main component if that was
> simpler to do.
>
> When the user picks one of the address rows the dialog should close and the
> address string should be put into the text field (possibly just putting it
> there as if the user had typed it himself)
> There should be a way to dismiss the dialog without picking anything.
> When the user selects a ShippingAddress the textfiels should not be editable
> anymore
> Particularly great would be to not only show the selected address but do a
> currentObject.addObjectToBothSidesOfRelationshipWithKey(selectedShippingAddress,
> CustomerRequest.SHIPPING_ADDRESS_KEY); This would require the dialog
> component to have the currentObject passed to it somehow. How to do this?
>
> I know how to do some of these things with plain javascript but then I have
> no idea how to integrate with WO. So I started to look into Ajax.framework
> and studied the AjaxExamples. This didn't help but confuses me even more as
> the examples just show how some components are being used but there is no
> explanation of the underlying concepts and how to solve a problem with these
> things.
>
> Thanks a lot
> ---markus---
>
>
>> On 12 Dec 2017, at 13:32, Samuel Pelletier <email@hidden
>> <mailto:email@hidden>> wrote:
>>
>> 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
>>> <mailto: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
_______________________________________________
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