Modal dialogs and Updating/closing

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Modal dialogs and Updating/closing

Torsten Bergmann
I have a modal dialog in Seaside like the Bootstrap one demonstrated
here:

http://pharo.pharocloud.com/bootstrap/browser/Modal%20example

When I click on "Save Changes" I would like the server to verify
data (for instance check credentials for a login) and possibly
display a message in the dialog when the input was wrong.

In such a case I only want to refresh the contents of the dialog
and not a full page refresh, because with a full page refresh the
dialog would not be open again but also I want the updated info
to look smooth without flickering of a full page reload.

Also when the data is fine after checking on the server the
dialog should close.

What options do I have/whats the best way to implement this?
Any best practices or simple examples ideally with Bootstrap?

Thx
T.
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Modal dialogs and Updating/closing

Gastón Dall' Oglio
Hi Torsten.

I do guess that it isn't a good practice, but see here for an simple example [1].

Here I have an abstract class where I render the page with a hidden dialog (PIComponent>>renderModalOn:) containing ids to show messages and errors. Later when I want to show an error I use PIComponent>>showError:on:
You can see this in the concrete class  PIExploreComponent.

I can share the image within that I use those classes if you want. This was an experiment for a project that right now is dead.
Best.

[1] http://forum.world.st/Bootstrap-s-Modal-question-td4713488.html



2015-03-12 7:22 GMT-03:00 Torsten Bergmann <[hidden email]>:
I have a modal dialog in Seaside like the Bootstrap one demonstrated
here:

http://pharo.pharocloud.com/bootstrap/browser/Modal%20example

When I click on "Save Changes" I would like the server to verify
data (for instance check credentials for a login) and possibly
display a message in the dialog when the input was wrong.

In such a case I only want to refresh the contents of the dialog
and not a full page refresh, because with a full page refresh the
dialog would not be open again but also I want the updated info
to look smooth without flickering of a full page reload.

Also when the data is fine after checking on the server the
dialog should close.

What options do I have/whats the best way to implement this?
Any best practices or simple examples ideally with Bootstrap?

Thx
T.
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Modal dialogs and Updating/closing

Brad Selfridge
Gaston,

  I am trying to build an add/edit/view modal dialog and am having trouble wrapping my head around how to do this in the Seaside component model.  You seem to have mastered this. Would you be willing to share some examples?  (Both the dialog code, invoking the dialog with data, and returning the results from the dialog).


Thank you in advance,

Brad Selfridge
Brad Selfridge
Reply | Threaded
Open this post in threaded view
|

Re: Modal dialogs and Updating/closing

Gastón Dall' Oglio
Hi Brad.

Yes I can share it of course! Please give me some time to find the image (and probably polish a little to you can understand better the code), because I have it in some backup external disk (sadly I have been a very unorganized with the code's packaging).

Best.

2015-03-26 13:42 GMT-03:00 [hidden email] <[hidden email]>:
Gaston,

  I am trying to build an add/edit/view modal dialog and am having trouble
wrapping my head around how to do this in the Seaside component model.  You
seem to have mastered this. Would you be willing to share some examples?
(Both the dialog code, invoking the dialog with data, and returning the
results from the dialog).


Thank you in advance,

Brad Selfridge



-----
Brad Selfridge
--
View this message in context: http://forum.world.st/Modal-dialogs-and-Updating-closing-tp4811411p4815349.html
Sent from the Seaside General mailing list archive at Nabble.com.
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Modal dialogs and Updating/closing

Johan Brichau-2
In reply to this post by Torsten Bergmann

> On 12 Mar 2015, at 11:22, Torsten Bergmann <[hidden email]> wrote:
>
> I have a modal dialog in Seaside like the Bootstrap one demonstrated
> here:
>
> http://pharo.pharocloud.com/bootstrap/browser/Modal%20example
>
> When I click on "Save Changes" I would like the server to verify
> data (for instance check credentials for a login) and possibly
> display a message in the dialog when the input was wrong.
>
> In such a case I only want to refresh the contents of the dialog
> and not a full page refresh, because with a full page refresh the
> dialog would not be open again but also I want the updated info
> to look smooth without flickering of a full page reload.
>
> Also when the data is fine after checking on the server the
> dialog should close.
>
> What options do I have/whats the best way to implement this?
> Any best practices or simple examples ideally with Bootstrap?

The issue here is that when you push the button in the modal dialog, you should already know if it will be a full page request or an ajax request. Because you don’t know that yet, you can only perform an ajax request that returns a script to either perform the full page request, or adds the error message to the dialog:

html tbsButton
        bePrimary;
        onClick:((html jQuery ajax)
                                serializeForm;
                                script: [ :s | self showErrorMessage ifTrue: [ s << (self scriptForErrorMessageOn: s) ] ifFalse:[ s << (self scriptOnSuccessOn: s) ] ]);
        with: ‘Go!’

The script to show the error message would be a ‘normal’ jquery script that appends some html somewhere (this is application specific).
The script to perform the full page request can be built in Seaside as follows:

scriptOnSuccessOn: canvas
        ^ canvas javascript callback: [ … do whatever you would do in a Seaside callback … ]

cheers
Johan_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside