[Seaside] Seaside+Bootstrap and callbacks

[Paul DeBruicker]

The #callback: as you're using it in the button doesn't render HTML to the
page. It just tells seaside to change something in the image and then
re-render. 

Because of that your #action: method, if it ran, wouldn't change the page.  

When Seaside re-renders your app, depending on what you do in the callback,
it might re-render the page with some changes or another page.

It looks like you want to open a modal over the current page when the button
is clicked.  Right? 

If so, two ways that come to mind to do that are to either, after the button
is clicked,

 - re-draw the page with the modal dialog HTML code rendered in it and set
to open on load,

or 

 - load the modal dialog HTML code into the existing page with
Javascript/Ajax and open the modal.



The first way:

MyBootstrap>>initialize.

super initialize.
showModal:=false.

MyBootstrap>>renderContentOn: html
self renderMyButton: html
self renderMyModal: html.

MyBootstrap>>renderMyButton: html
html anchor 
class:'btn btn-primary';
callback: [self showModal];
with: 'Show modal'.

html anchor 
class:'btn btn-default';
callback: [self hideModal];
with: 'Hide modal'.

MyBootstrap>>showModal
showModal := true.

MyBootstrap>>hideModal
showModal := false.

My Bootstrap>>renderMyModal: html
showModal ifTrue:[
 html tbsModal 
     id: 'myModal'; 
     attributeAt: 'data-show' put: true; "<--- opens the modal when rendered
on the new page"
     with: [ html 
              tbsModalDialog: [ html 
                      tbsModalContent: [ html 
etc, etc... 
].


Another approach could be to use jQuery to load the modal into the page and
open it when the button is clicked.  


If so I'd do it like this:


renderContentOn: html
html tbsButton
bePrimary;
onClick: ((html jQuery id: 'myModalContainer') load html:[:h | self action:
h]; onComplete:((html jQuery id: 'myModal') call: 'modal' with: 'show');
with: 'Modal'.

html div id:'myModalContainer'.



And keep your #action: method as you have it now. 






Dominique Dartois-4 wrote
> I would to open a dialog like this :
> 
> WAComponent subclass: #MyBootstrap
> 
> MyBootstrap>>renderContentOn: html
> html tbsButton
> bePrimary;
> callback: [self action: html];
> with: 'Modal'.
> 
> MyBootstrap>>action: html
> html
> html tbsModal
> id: 'myModal';
> with: [ html
> tbsModalDialog: [ html
> tbsModalContent: [ html
> etc, etc...
> 
> The callback is never triggered.
> 
> ---
> Dominique Dartois
> 
> 
>>     Le 17 février 2019 à 23:23, Paul DeBruicker < 

> pdebruic@

>  mailto:

> pdebruic@

>  > a écrit :
>> 
>> 
>>     Seaside callbacks shouldn't be affected by bootstrap at all.
>> 
>> 
>>     Bootstrap's javascript for their modal looks for the
>> 
>>     data-toggle="modal"
>> 
>>     attribute and sets a click handler on those elements that
>> opens/closes the
>>     modal when clicked. (See the example at
>>     https://getbootstrap.com/docs/4.3/components/modal/)
>> 
>> 
>>     What are you trying to do that you can't get working?
>> 
>> 
>> 
>> 
>> 
>> 
>> 
>>     Dominique Dartois-4 wrote
>> 
>>         > >         Hi all.
>> > 
>> >         I’m trying to use Bootstrap with Seaside and I don’t find the
>> notion of
>> >         Callback. In the ‘Modal example’ the launch of the modal window
>> is done by
>> >         a href attribute in a html statement and not a callback in the
>> Smalltalk
>> >         code.
>> > 
>> >         The statement :
>> > 
>> >         html: '
>> >         Launch demo modal <#myModal>
>> >         '.
>> > 
>> >         Is it a choice for this example or is it impossible to use a
>> Callback with
>> >         Bootstrap for Seaside?
>> > 
>> > 
>> >         I am using Pharo 7 64 bits and the latest package
>> Seaside+Bootstrap.
>> > 
>> >         Regards,
>> >         ---
>> >         Dominique Dartois
>> > 
>> >         _______________________________________________
>> >         seaside mailing list
>> > 
>> >     > 
>> 
>>         > >         seaside at .squeakfoundation
>> mailto:seaside at .squeakfoundation
>> > 
>> >     > 
>> 
>>         > >        
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> > 
>> >     > 
>> 
>> 
>> 
>> 
>>     --
>>     Sent from: http://forum.world.st/Seaside-General-f86180.html
>>     _______________________________________________
>>     seaside mailing list
>>     

> seaside at .squeakfoundation

>  mailto:

> seaside at .squeakfoundation

>>     http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> 
> 
> _______________________________________________
> seaside mailing list

> seaside at .squeakfoundation

> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside





--
Sent from: http://forum.world.st/Seaside-General-f86180.html