[Seaside] Seaside+Bootstrap and callbacks
Paul DeBruicker
pdebruic at gmail.com
Fri Feb 22 22:29:09 UTC 2019
Glad you got it sorted out.
Another approach than your #updateRoot: approach is in the rendering method
in the component that renders the modal do a
html document addLoadScript: ((html jQuery id: 'myModal') call: 'modal').
Then all the modal creation stuff will be in the same method.
Dominique Dartois-4 wrote
> Finally, I've found the right syntax to initialize the modal window :
>
> updateRoot: anHtmlRoot
> super updateRoot: anHtmlRoot.
> anHtmlRoot bodyAttributes at: 'onLoad' append: '$(
> function(){$(''#myModal'').modal();})'.
>
> Thanks again Paul.
> ---
> Dominique Dartois
>
>> Le 22 février 2019 à 21:44, Dominique Dartois <
> dom@
> > a écrit :
>>
>> Thank you Paul for the time you spend writing this code.
>> I can see the
> <div>
> in the debugger appearing if I click the show button and desappearing
> with a click on Hide, BUT the modal window doesn’t show up.
>> I have read on
>> https://stackoverflow.com/questions/18855331/bootstrap-3-data-show-not-working
>> that the modal must be initialized first with something like :
>>
>>
>> I am trying to put this code in the WAComponent>>updateRoot: method
>> without success.
>>
>> Regards,
>> ---
>> Dominique
>>
>>
>> > > Le 19 février 2019 à 01:04, Paul DeBruicker <
> pdebruic@
> mailto:
> pdebruic@
> > a écrit :
>> >
>> >
>> > 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
>> > > > mailto: 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
>> > >
>> > > > >
>> >
>> > > > > mailto:
>> > >
>> > > > >
>> >
>> > > > > seaside at .squeakfoundation
>> mailto:seaside at .squeakfoundation
>> > >
>> > > > >
>> >
>> > > > >
>> > > > > > >
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> > > >
>> > > >
>> > > > > > >
>> > > _______________________________________________
>> > > 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
>>
>
>
>
> _______________________________________________
> seaside mailing list
> seaside at .squeakfoundation
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
> image.png (47K)
> <http://forum.world.st/attachment/5095917/0/image.png>
--
Sent from: http://forum.world.st/Seaside-General-f86180.html
More information about the seaside
mailing list