Re: Seaside+Bootstrap and callbacks
Paul DeBruicker <[email protected]>
| Newsgroups | gmane.comp.lang.smalltalk.squeak.seaside |
|---|---|
| Message-ID | <[email protected]> |
Yea if you change the modal initialization JS to
html document addLoadScript: ((html jQuery id: 'myModal') call: 'modal'
with: self modalOptions).
MyComponent>>#modalOptions
^Dictionary new
at: 'backdrop' put: 'static';
yourself;
It'll keep the modal from closing when someone clicks outside the modal
Its described here:
https://getbootstrap.com/docs/4.3/components/modal/#options
Dominique Dartois-4 wrote
> You are right it's a better approach. The logic is more centralized.
> An other thing I am discovering : the modal window is not really modal
> because if I click out of the dialog the window closes. I think it's more
> on the Bootstrap side than on the seaside one.
>
> Regards
> ---
> Dominique Dartois
>
>> Le 22 février 2019 à 23:29, Paul DeBruicker <
> pdebruic@
> > a écrit :
>>
>>
>> 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
>> >> > > > >
>> >> > > > > >
>> >> > > > >
>> >> > > > > > > > >
>> >> > > > > > [email protected]
>> >> mailto:[email protected]
>> >> > > > mailto: [email protected]
>> >> mailto:[email protected]
>> >> > > >
>> >> > > > > > > > >
>> >> > > > > >
>> >> > > > >
>> >> > > > > > > > >
>> >> > > > > >
>> >> > > >
>> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> >> > > >
>> >> > > > > > > > >
>> >> > > > > >
>> >> > > > >
>> >> > > > > > > > >
>> >> > > >
>> >> > > >
>> >> > > >
>> >> > > > --
>> >> > > > Sent from:
>> >> http://forum.world.st/Seaside-General-f86180.html
>> >> > > > _______________________________________________
>> >> > > > seaside mailing list
>> >> > > >
>> >> > > >
>> >> > > > > > >
>> >> > > > >
>> >> >
>> >> > > > > [email protected]
>> >> mailto:[email protected]
>> >> > >
>> >> > > > >
>> >> >
>> >> > > > > mailto:
>> >> > >
>> >> > > > >
>> >> >
>> >> > > > > [email protected]
>> >> mailto:[email protected]
>> >> > >
>> >> > > > >
>> >> >
>> >> > > > >
>> >> > > > > > >
>> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> >> > > >
>> >> > > >
>> >> > > > > > >
>> >> > > _______________________________________________
>> >> > > seaside mailing list
>> >> > >
>> >> > > > >
>> >> >
>> >> > > > > [email protected]
>> >> mailto:[email protected]
>> >> > >
>> >> > > > >
>> >> >
>> >> > > > >
>> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> >> > >
>> >> > > > >
>> >> >
>> >> >
>> >> >
>> >> >
>> >> > --
>> >> > Sent from: http://forum.world.st/Seaside-General-f86180.html
>> >> > _______________________________________________
>> >> > seaside mailing list
>> >> >
>>
>> > [email protected]
>>
>> > mailto:
>>
>> > [email protected]
>>
>> >> >
>> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> >> >
>> >> > > _______________________________________________
>> >> seaside mailing list
>> >>
>>
>> > [email protected]
>>
>> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> >>
>> >
>> >
>> >
>> > _______________________________________________
>> > seaside mailing list
>>
>> > [email protected]
>>
>> > 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
>> _______________________________________________
>> seaside mailing list
>>
> [email protected]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> _______________________________________________
> seaside mailing list
> [email protected]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
--
Sent from: http://forum.world.st/Seaside-General-f86180.html
_______________________________________________
seaside mailing list
[email protected]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside